用SSM整合框架实现用户登录功能,且密码使用MD5算法加密的过程。登录成功则跳转至主页,失败则弹窗提醒用户登录失败
时间: 2023-06-23 09:08:18 浏览: 70
首先,需要在数据库中创建一张用户表,包含用户名和密码两个字段。密码字段需要使用MD5加密算法加密后存储。
在SSM框架中,需要创建一个UserController类,用于处理用户登录请求。具体代码如下:
```
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping(value = "/login", method = RequestMethod.POST)
@ResponseBody
public String login(String username, String password, HttpSession session) {
User user = userService.getUserByUsername(username);
if (user == null) {
return "用户名不存在";
}
if (!user.getPassword().equals(MD5Utils.md5(password))) {
return "密码错误";
}
session.setAttribute("user", user);
return "success";
}
}
```
其中,UserController类使用了@Controller注解,表示它是一个控制器类。@RequestMapping注解用于映射请求路径,这里映射了用户登录请求的路径为"/user/login",并且请求方式为POST。
在UserController类中,使用了@Autowired注解注入了UserService类,用于处理用户相关的业务逻辑。
在login方法中,首先通过UserService类的getUserByUsername方法根据用户名获取用户信息。如果用户不存在,则返回"用户名不存在"。如果用户存在,则将用户输入的密码进行MD5加密后与数据库中的密码比较,如果不一致,则返回"密码错误"。如果密码一致,则将用户信息存入session中,并返回"success"。
在前端页面中,需要创建一个登录表单,包含用户名和密码两个输入框,以及一个提交按钮。具体代码如下:
```
<form id="login-form" action="/user/login" method="post">
<div>
<label>用户名:</label>
<input type="text" name="username" required>
</div>
<div>
<label>密码:</label>
<input type="password" name="password" required>
</div>
<button type="submit">登录</button>
</form>
```
在提交按钮的点击事件中,发送Ajax请求到UserController类的login方法中,并根据返回结果进行相应处理。具体代码如下:
```
$('#login-form').submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: '/user/login',
type: 'post',
data: formData,
success: function(data) {
if (data == 'success') {
window.location.href = '/index.html';
} else {
alert(data);
}
}
});
});
```
其中,$(this).serialize()方法将表单数据序列化为字符串,作为Ajax请求的data参数。在成功回调函数中,如果返回结果为"success",则跳转至主页,否则弹窗提示用户登录失败。