在Javaweb项目中用MVC模式进行后端管理员RSA加密登录前后端具体代码实现,要求使用MySQL数据库,利用layUI框架和ajax接口请求
时间: 2023-05-27 16:05:52 浏览: 127
1. 定义数据库表
在MySQL数据库中创建一个名为admin的表,包含以下字段:
- id:管理员ID,主键,自增长
- username:管理员用户名,唯一
- password:管理员密码,存储加密后的密码
2. 后端代码实现
在Java项目中创建一个名为AdminController的控制器类,实现管理员登录功能。
2.1 加载页面
```
@RequestMapping("/admin/login")
public String toLogin() {
return "admin/login";
}
```
这段代码使用@RequestMapping注解映射/admin/login路径,返回admin/login视图,该视图用于显示管理员登录页面。
2.2 接收登录请求
```
@PostMapping("/admin/doLogin")
@ResponseBody
public Map<String, Object> doLogin(String username, String password) {
Map<String, Object> map = new HashMap<>();
Admin admin = adminService.getAdminByUsername(username);
if (admin == null) {
map.put("code", 1);
map.put("msg", "用户名不存在");
} else {
String decryptPwd = RSAUtils.decrypt(password, Constants.PRIVATE_KEY);
if (decryptPwd.equals(admin.getPassword())) {
map.put("code", 0);
map.put("msg", "登录成功");
} else {
map.put("code", 1);
map.put("msg", "密码错误");
}
}
return map;
}
```
这段代码使用@PostMapping注解映射/admin/doLogin路径,接收前端传来的用户名和密码,并调用adminService的getAdminByUsername方法查询数据库中的管理员信息。
如果查询结果为空,说明用户名不存在,返回code为1,msg为“用户名不存在”。
如果查询结果不为空,说明用户名存在,将前端传来的加密后的密码解密并与数据库中存储的密码进行比对。
如果密码匹配,返回code为0,msg为“登录成功”。
如果密码不匹配,返回code为1,msg为“密码错误”。
2.3 加密密码
```
Admin admin = new Admin();
admin.setUsername(username);
String encryptPwd = RSAUtils.encrypt(password, Constants.PUBLIC_KEY);
admin.setPassword(encryptPwd);
adminService.addAdmin(admin);
```
这段代码创建一个Admin对象,设置用户名和加密后的密码,并调用adminService的addAdmin方法将管理员信息添加到数据库。
3. 前端代码实现
使用LayUI框架和Ajax接口请求实现前端登录页面。
3.1 引入LayUI框架
在html代码中引入LayUI框架的CSS和JS文件:
```
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
```
3.2 显示登录页面
在html代码中添加一个form表单,用于提交用户名和密码,并使用LayUI的form组件渲染表单:
```
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="login">登录</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
```
3.3 发送登录请求
在html代码中添加一个script标签,使用Ajax发送登录请求,并根据后端返回的结果进行相应的处理:
```
<script>
//监听提交
layui.form.on('submit(login)', function(data){
$.ajax({
url: '/admin/doLogin',
type: 'post',
dataType: 'json',
data: data.field,
success: function (res) {
if (res.code === 0) {
layer.msg(res.msg, {icon: 1, time: 2000}, function () {
window.location.href = '/admin/index';
});
} else {
layer.msg(res.msg, {icon: 2, time: 2000});
}
},
error: function () {
layer.msg('请求失败', {icon: 2, time: 2000});
}
});
return false;
});
</script>
```
这段代码使用LayUI的form.on方法监听表单提交事件,使用Ajax发送登录请求,并根据后端返回的结果进行相应的处理。
如果code为0,说明登录成功,弹出提示框并跳转到管理员首页。
如果code为1,说明登录失败,弹出提示框显示错误信息。
如果请求失败,弹出提示框显示请求失败信息。
阅读全文