springboot+layui+mysql+Ajax实现用户登录
时间: 2023-05-26 17:03:27 浏览: 59
很高兴为您提供帮助。下面是一个基于SpringBoot、Layui、MySQL和Ajax技术实现用户登录的示例:
1. 创建SpringBoot项目,添加Layui、MyBatis、MySQL等依赖。
2. 在application.properties文件中配置MySQL连接信息:
```
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/dbname?useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=password
```
3. 创建User表,包含id、username和password字段。
4. 创建User类,使用Lombok注解简化代码:
```
@Data
public class User {
private Long id;
private String username;
private String password;
}
```
5. 创建UserMapper接口,使用MyBatis注解实现对User表的基本操作:
```
@Mapper
public interface UserMapper {
@Select("SELECT * FROM user WHERE username = #{username}")
User findByUsername(String username);
}
```
6. 在UserController中编写处理用户登录请求的方法,并使用Ajax提交登录表单:
```
@Controller
public class UserController {
@Autowired
private UserMapper userMapper;
@PostMapping("/login")
@ResponseBody
public Result login(User user) {
User loginUser = userMapper.findByUsername(user.getUsername());
if (loginUser == null) {
return Result.fail("该用户不存在");
}
if (!loginUser.getPassword().equals(user.getPassword())) {
return Result.fail("密码不正确");
}
return Result.ok();
}
}
```
7. 在前端页面中使用Layui的form组件实现登录表单,并使用jQuery和Ajax发送登录请求:
```
<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" autocomplete="off" placeholder="请输入用户名" 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" autocomplete="off" placeholder="请输入密码" 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>
</div>
</div>
</form>
<script>
layui.use(['form'], function(){
var form = layui.form,
$ = layui.jquery;
//监听提交
form.on('submit(login)', function(data){
$.ajax({
url: '/login',
type: 'POST',
data: data.field,
success: function(res) {
if (res.code === 0) {
layer.msg('登录成功');
} else {
layer.msg(res.msg);
}
}
});
return false;
});
});
</script>
```
这样,用户登录功能就完成了。用户输入用户名和密码后,前端使用Ajax向后端发送登录请求,后端根据用户名和密码查询User表,如果查询到了该用户,则返回登录成功的消息。如果查询不到该用户或密码不正确,则返回相应的错误消息。前端接收并提示用户。