vue+elementui+mybatisplus+springboot登录md5加密完整代码
时间: 2023-03-20 22:02:26 浏览: 165
以下是使用Vue、ElementUI、MybatisPlus和Spring Boot实现MD5加密的完整代码:
前端代码:
```html
<template>
<el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="80px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
import md5 from 'js-md5';
export default {
name: 'LoginForm',
data() {
return {
loginForm: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
};
},
methods: {
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loginForm.password = md5(this.loginForm.password);
// 发送登录请求
} else {
return false;
}
});
}
}
};
</script>
```
后端代码:
```java
import org.apache.commons.codec.digest.DigestUtils;
@RestController
@RequestMapping("/login")
public class LoginController {
@PostMapping
public Result login(@RequestBody LoginForm loginForm) {
String username = loginForm.getUsername();
String password = DigestUtils.md5Hex(loginForm.getPassword());
// 根据用户名和密码验证登录
return Result.success();
}
}
```
以上代码中,前端使用了js-md5库对密码进行MD5加密,后端使用了commons-codec库对密码进行MD5加密。请注意,MD5加密虽然是常用的加密方式,但不是最安全的加密方式。建议在实际开发中,使用更加安全的加密方式,如bcrypt、scrypt等。