Spring系列(十一)- SSM+layui实现简单登录

前言:

SSM实现简单登录现有的项目已经很多了,这边主要是为了自己的回顾,使用的是IDEA
SSM整合请看系列九与系列八

完整项目结构

在这里插入图片描述

预实现功能

数据库中admin用户,页面登录,后台判断用户与密码,成功则跳转

后台代码实现

创建controller

@RestController
@RequestMapping("login")
public class LoginController {
   

    @Autowired
    private UserService userService;

    @RequestMapping("checkLogin")
    public String login(String username,String password){
   
        User user = userService.checkLogin(username,password);
        if (user!=null){
   
            return "success";
        }
        return "fail";
    }
}

model

public class User {
   
    private String id;
    private String name;
    private String password;
    ...(get  set)
}

service

@Service
public class UserService {
   
    @Autowired
    private UserMapper userMapper;

    public User checkLogin(String username, String password) {
   
        return userMapper.checkLogin(username,password);
    }
}

mapper

public interface UserMapper{
   
    
    User checkLogin(@Param("username") String username,@Param("password") String password);
}

mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- 该文件代表的是类和表的映射关系,关于表的sql语句等等写在这里 -->
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace
### 使用SSM框架与Layui实现用户登录功能 #### 后端逻辑设计 在SSM框架中,`Spring`负责依赖注入和事务管理,`Spring MVC`处理请求映射和视图渲染,而`MyBatis`则用于数据库操作。以下是实现用户登录的核心部分。 1. **Controller层** 定义一个控制器来接收前端发送的用户名和密码,并调用服务层验证用户身份。 ```java import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class LoginController { @Autowired private UserService userService; @RequestMapping(value = "/login.do", method = RequestMethod.POST, produces = "application/json;charset=UTF-8") @ResponseBody public String login(@RequestParam("username") String username, @RequestParam("password") String password) { boolean isAuthenticated = userService.authenticate(username, password); if (isAuthenticated) { return "{\"status\":\"success\",\"message\":\"登录成功\"}"; } else { return "{\"status\":\"fail\",\"message\":\"用户名或密码错误\"}"; } } } ``` 2. **Service层** 提供业务逻辑方法,通过DAO访问数据库并校验用户的合法性。 ```java import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Override public boolean authenticate(String username, String password) { User user = userMapper.getUserByUsername(username); if (user != null && user.getPassword().equals(password)) { return true; } return false; } } ``` 3. **Mapper接口** 配置SQL语句以查询指定用户名对应的用户记录。 ```java import org.apache.ibatis.annotations.Select; import org.springframework.stereotype.Repository; @Repository public interface UserMapper { @Select("SELECT * FROM users WHERE username = #{username}") User getUserByUsername(String username); } ``` 4. **实体类定义** 创建Java Bean表示表中的字段结构。 ```java public class User { private Integer id; private String username; private String password; // Getters and Setters... public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } } ``` --- #### 前端页面设计(Layui) 利用Layui构建简洁美观的登录界面,并通过Ajax提交数据至服务器端进行验证。 1. **HTML模板** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.7.6/css/layui.css"/> </head> <body> <div style="margin: 50px;"> <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> <button class="layui-btn layui-btn-normal" lay-submit lay-filter="loginForm">登 录</button> </form> </div> <!-- 引入JS --> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/layui@2.7.6/layui.js"></script> <script> layui.use(['form'], function () { var form = layui.form; // 表单提交事件监听器 form.on('submit(loginForm)', function (data) { $.ajax({ url: '/login.do', type: 'POST', data: JSON.stringify(data.field), contentType: 'application/json;charset=utf-8', success: function (res) { layer.msg(res.message, {icon: res.status === 'success' ? 1 : 2}); if (res.status === 'success') { window.location.href = './index.html'; // 跳转到主页或其他页面 } }, error: function () { layer.alert('网络异常,请稍后再试!'); } }); return false; // 阻止默认行为 }); }); </script> </body> </html> ``` --- #### 数据库表结构 为了存储用户信息,在MySQL中创建如下表: ```sql CREATE TABLE `users` ( `id` INT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID', `username` VARCHAR(50) NOT NULL UNIQUE COMMENT '用户名', `password` VARCHAR(100) NOT NULL COMMENT '密码' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表'; ``` --- #### 总结 上述方案展示了如何结合SSM框架与Layui完成用户登录的功能开发[^1]。后端采用三层架构分离关注点,提升代码可维护性和扩展性;前端借助Layui组件快速搭建交互友好的UI界面[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值