Java项目（一）--MyBatis实现OA系统项目实战（4）--基于LayUI实现用户登录

最新推荐文章于 2024-07-27 13:31:57 发布

其乐无涯

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量402

点赞数

分类专栏： Java项目文章标签： java layui 开发语言

本文链接：https://blog.csdn.net/qq_32091929/article/details/125054519

版权

Java项目专栏收录该内容

21 篇文章 8 订阅

订阅专栏

实现用户登录

基于LayUI开发登录页

首先，从LayUI官网首页下载
http://layui.sandbean.com/index.htm
在这里插入图片描述
把下载好的压缩包解压并放到webapp/resources包下：

在webapp目录下新建login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>办公OA系统</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <style>
        body{
            background-color: #F2F2F2;
        }
        .oa-container{
            /*background-color: white;*/
            position: absolute;
            width: 400px;
            height: 350px;
            top: 50%;
            left: 50%;
            padding: 20px;
            margin-left: -200px;
            margin-top: -175px;
        }
        #username,#password{
            text-align: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
<div class="oa-container">
    <h1 style="text-align: center;margin-bottom: 20px">办公OA系统</h1>
    <form class="layui-form">
        <div class="layui-form-item">
            <input type="text" id="username" lay-verify="required" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" >
        </div>

        <div class="layui-form-item">
            <input type="password" id="password" lay-verify="required" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" >
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
        </div>
    </form>
</div>
</body>
</html>

实现登录功能

在com.ql.oa.entity包下创建User.java实体类

public class User {
    private Long userId;
    private String username;
    private String password;
    private Long employeeId;

    public Long getUserId() {
        return userId;
    }

    public void setUserId(Long userId) {
        this.userId = userId;
    }

    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;
    }

    public Long getEmployeeId() {
        return employeeId;
    }

    public void setEmployeeId(Long employeeId) {
        this.employeeId = employeeId;
    }
}

在src/mian/resources/mapper目录下创建user.xml文件:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="usermapper">
    <!--按用户名获取用户对象-->
    <select id="selectByUsername" parameterType="String" resultType="com.ql.oa.entity.User">
        select * from sys_user where username = #{value}
    </select>
</mapper>

然后在mybatis-config.xml文件的最下面添加mapper配置

    <mappers>
        <mapper resource="mappers/user.xml"/>
    </mappers>

在com.ql.oa.dao包下创建UserDao.java文件

public class UserDao {
    /**
     * 按用户名查询用户
     * @param username 用户名
     * @return User对象包含对应的用户信息，null则代表对象不存在
     */
    public User selectByUsername(String username){
        User user = (User) MyBatisUtils.executeQuery(sqlSession -> sqlSession.selectOne("usermapper.selectByUsername", username));
        return user;
    }
}

在com.ql.oa.service.exception包下创建业务自定义异常类

package com.ql.oa.service.exception;

public class BussinessException extends RuntimeException{
    private String code;//异常编码，异常的以为标识
    private String message;//异常的具体文本消息
    public BussinessException(String code, String msg){
        super(code + ":" + msg);
        this.code = code;
        this.message = msg;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    @Override
    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

在com.ql.oa.service包下创建UserService业务类

package com.ql.oa.service;

import com.ql.oa.dao.UserDao;
import com.ql.oa.entity.User;
import com.ql.oa.service.exception.BussinessException;

public class UserService {
    private UserDao userDao = new UserDao();
    /**
     * 根据前台输入进行登录校验
     * @param username 前台输入的用户名
     * @param password 前台输入的密码
     * @return 校验通过后，包含对应用户数据的User实体类
     * @throws BussinessException L001-用户名不存在，L002-密码错误
     */
    public User checkLogin(String username, String password){
        User user = userDao.selectByUsername(username);
        if(user == null){
            throw new BussinessException("L001", "用户名不存在");
        }
        if(!password.equals(user.getPassword())){
            throw new BussinessException("L002", "密码错误");
        }
        return user;
    }
}

在UserService类上按Ctrl+Shift+T快捷键，快速生成测试类，并填写测试方法进行测试。

package com.ql.oa.service;

import com.ql.oa.entity.User;
import org.junit.Test;

public class UserServiceTest {
    private UserService userService = new UserService();

    @Test
    public void checkLogin1() {
        userService.checkLogin("uu", "123");
    }
    @Test
    public void checkLogin2() {
        userService.checkLogin("m8", "123");
    }
    @Test
    public void checkLogin3() {
        User user = userService.checkLogin("m8", "test");
        System.out.println(user);
    }
}

在pom文件中引入FastJSON JSON序列化组件（在servlet里返回前端数据时使用），并在File->Project Structure->Artifacts里把新增的依赖加入到发布的目录中。（每次新增依赖都需要这步操作）

<!--FastJSON JSON序列化组件-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.80</version>
        </dependency>

在这里插入图片描述
在com.ql.oa.controller目录下编写LoginServlet

package com.ql.oa.controller;

import com.alibaba.fastjson.JSON;
import com.ql.oa.entity.User;
import com.ql.oa.service.UserService;
import com.ql.oa.service.exception.BussinessException;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet(name = "LoginServlet", value = "/check_login")
public class LoginServlet extends HttpServlet {
    Logger logger = LoggerFactory.getLogger(LoginServlet.class);
    private UserService userService = new UserService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //接受用户输入
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        Map<String, Object> result = new HashMap<>();
        try {
            //调用业务逻辑
            User user = userService.checkLogin(username, password);
            result.put("code", "0");
            result.put("message", "success");
        } catch (BussinessException ex){
            logger.error(ex.getMessage(), ex);
            result.put("code", ex.getCode());
            result.put("message", ex.getMessage());
        }catch (Exception ex) {
            logger.error(ex.getMessage(), ex);
            result.put("code", ex.getClass().getSimpleName());
            result.put("message", ex.getMessage());
        }
        //返回对应结果
        String json = JSON.toJSONString(result);
        response.getWriter().println(json);
    }
}

最后在login.html中添加登录js

<script src="/resources/layui/layui.js"></script>
<script>
    // 表单提交事件
    layui.form.on("submit(login)" , function(formdata){//data参数包含了当前表单的数据
        console.log(formdata);
        //发送ajax请求进行登录校验
        layui.$.ajax({
            url : "/check_login",
            data : formdata.field, //提交表单数据
            type : "post",
            dataType : "json" ,
            success : function(json){
                console.log(json);
                if(json.code == "0"){ //登录校验成功
                    layui.layer.msg("登录成功");
                    //跳转url
                    //window.location.href=json.redirect_url;
                }else{
                    layui.layer.msg(json.message);
                }
            }
        })
        return false;//submit提交事件返回true则表单提交,false则阻止表单提交
    })
</script>

项目跑起来，在浏览器访问http://localhost:8080/login.html登录成功。
在这里插入图片描述

其乐无涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Java项目（一）--MyBatis实现OA系统项目实战（4）--基于LayUI实现用户登录

实现用户登录基于LayUI开发登录页首先，从LayUI官网首页下载http://layui.sandbean.com/index.htm把下载好的压缩包解压并放到webapp/resources包下：在webapp目录下新建login.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>办公OA系统</title&g
复制链接

扫一扫

专栏目录