vue+elementui+mybati+springboot登录md5加密完整代码
时间: 2023-03-20 20:02:25 浏览: 83
以下是使用Vue、ElementUI、MyBatis和SpringBoot实现MD5加密的完整代码:
前端代码(使用Vue和ElementUI):
```html
<template>
<el-form ref="form" :model="loginForm" label-width="80px">
<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>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
}
}
},
methods: {
login() {
this.$axios.post('/login', {
username: this.loginForm.username,
password: this.md5(this.loginForm.password)
}).then(response => {
console.log(response.data)
}).catch(error => {
console.log(error)
})
},
md5(str) {
// 请在这里添加MD5加密算法的实现代码
}
}
}
</script>
```
后端代码(使用MyBatis和SpringBoot):
```java
@RestController
public class LoginController {
@Autowired
private UserService userService;
@PostMapping("/login")
public Response login(@RequestBody LoginForm loginForm) {
User user = userService.getUserByUsername(loginForm.getUsername());
if (user == null) {
return Response.error("用户不存在");
}
if (!user.getPassword().equals(loginForm.getPassword())) {
return Response.error("密码错误");
}
return Response.success("登录成功");
}
}
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public User getUserByUsername(String username) {
return userMapper.selectByUsername(username);
}
}
@Mapper
public interface UserMapper {
@Select("SELECT * FROM user WHERE username = #{username}")
User selectByUsername(@Param("username") String username);
}
public interface UserService {
User getUserByUsername(String username);
}
public class User {
private Long id;
private String username;
private String password;
// 省略getter和setter方法
}
```
请注意,以上代码只是示例代码,实际项目中需要根据具体需求进行修改和优化。另外,MD5加密算法的实现代码需要根据具体语言和库进行选择和编写。