CRM-登录功能实现

素心如月桠

已于 2022-05-18 22:02:10 修改

阅读量891

点赞数 2

分类专栏： CRM 文章标签： java json 开发语言

于 2022-05-18 17:52:38 首次发布

本文链接：https://blog.csdn.net/m0_47010003/article/details/124845858

版权

CRM 专栏收录该内容

19 篇文章 5 订阅

订阅专栏

接上一篇搭建Mybatis逆向工程

要实现的页面：
在这里插入图片描述

1. 登录功能实现Mapper层

上一篇在Mybatis逆向工程中配置Dao层的存放路径，放在了com.lyx.settings.mapper路径下，打开这个包，可以看到UserMapper.java类，
在类中添加selectUserByLoginActAndPwd()方法

    User selectUserByLoginActAndPwd(Map<String,Object> map);

在这里插入图片描述

因为需要两个参数，所以使用Map集合做参数
在映射文件UserMapper.xml文件中添加如下
controller层给的map参数的key值必须与#{LoginAct}和#{LoginPwd}同名

 <select id="selectUserByLoginActAndPwd" parameterType="map" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from tbl_user
        where u_login_act=#{LoginAct} and u_login_pwd=#{LoginPwd}
    </select>

2. 登录功能实现Service层

在com.lyx.settings.service下新建接口UserService，新建impl包，定义UserServiceImpl实现UserService接口
在这里插入图片描述
UserServiceImpl代码：

添加注解@Service(“userService”)
添加UserMapper属性，在UserMapper属性上添加@Autowired注解
方法返回值如下

@Service("userService")
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;
    @Override
    public User queryUserByLoginActAndPwd(Map<String, Object> map) {
        return userMapper.selectUserByLoginActAndPwd(map);
    }
}

3. 登录功能实现Controller层

3.1 判断用户名和密码

打开在com.lyx.settings.web.controller包下UserController.java

在实现首页功能时就已经创建了UserController.java
里面有个toLogin()方法跳转到login.jsp页面
添加login()方法
login()方法返回值为Object类型
在返回值前并添加@ResponseBody注解，解析为json字符串
login()方法上添加@RequestMapping(“/settings/qx/user/login.do”)
login()方法从login.jsp页面获取用户填写的用户名和密码，login.jsp页面通过$.ajax()的url="/settings/qx/user/login.do"传值给login方法
调用Service层方法去数据库里面查找该用户：添加UserService属性，在该属性上添加@Autowired注解
提前定义一个ReturnObject.java类，里面给3个属性：
判断用户名和密码是否正确，就是看能不能查到，如果查不到，把刚刚定义的returnObject的code属性设置为0，message属性设置为“用户名或密码错误”，返回returnObject

3.2 用户名密码正确，再判断

即

User user = userService.queryUserByLoginActAndPwd(map);

user不为空
说明查到了数据，下面判断user的其他值

3.2.1 是否过期

判断user的uExpireTime属性

把当前时间格式化成“yyyy-MM-dd HH:mm:ss”的形式

SimpleDateFormat sdf = new SimpleDateFormat();
String format = sdf.format(new Date());

format.compareTo(user.getuExpireTime())

3.2.2 是否失效

判断user的uLockState属性

“0”.equals(user.getuLockState())

3.2.3 ip地址是否受限

判断user的uAllowIps属性

获取当前ip地址

request.getRemoteAddr();

user.getuAllowIps().contain()是否包含当前ip地址

user.getuAllowIps().contains(request.getRemoteAddr())

在这里插入图片描述

3.2 Contants类

定义一个Contants类，把上面出现的“0”和“1”替换成变量

package com.lyx.commons.contants;

public class Contants {
    //保存ReturnObject类中的Code值
    public static final String RETURN_OBJECT_CODE_SUCCESS="1";
    public static final String RETURN_OBJECT_CODE_FAIL="0";
}

4. 实现Login.jsp页面

Username和Password输入框、登录按钮、checkbox都添加id，$(“#LoginAct”)获取
beforeSend: function () {}当ajax向后台发送请求之前，会自动执行本函数该函数的返回值能够决定ajax是否真正向后台发送请求；如果该函数返回true，则ajax会正在向后台发送请求，否则，如果该函数返回false则ajax放弃向后台发送请求

beforeSend: function () {
     $("#msg").text("正在努力验证....");
      return true;
}

在这里插入图片描述

5. 完整代码

5.1 controller层

package com.lyx.settings.web.controller;


import com.lyx.commons.contants.Contants;
import com.lyx.commons.domain.ReturnObject;
import com.lyx.settings.domain.User;
import com.lyx.settings.service.UserService;
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.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/settings/qx/user/toLogin.do")
    public String toLogin() {
        return "settings/qx/user/login";
    }

    @RequestMapping("/settings/qx/user/login.do")
    public @ResponseBody Object login(String loginAct, String loginPwd, String isRemPwd, HttpServletRequest request) {
        //封装参数
        Map<String, Object> map = new HashMap<>();
        map.put("LoginAct", loginAct);
        map.put("LoginPwd", loginPwd);
        //调用service层方法
        User user = userService.queryUserByLoginActAndPwd(map);
        ReturnObject returnObject = new ReturnObject();
        if (user == null) {
            //登录失败，用户名或密码错误
            returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
            returnObject.setMessage("用户名或密码错误");
        } else {
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            String format = simpleDateFormat.format(new Date());
            if (format.compareTo(user.getuExpireTime()) > 0) {
                //登录失败，账号已经过期了
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
                returnObject.setMessage("账号已过期");
            } else if ("0".equals(user.getuLockState())) {
                //登录失败，状态被锁定
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
                returnObject.setMessage("状态被锁定");
            } else if(!user.getuAllowIps().contains(request.getRemoteAddr())){
                //判断当前用户的ip地址是不是包含在数据库表里的u_allow_ips
               //不包含，登录失败，ip受限制
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
                returnObject.setMessage("ip受限制");
            }else{
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
                //把user保存到session作用域中
                HttpSession session = request.getSession();
                session.setAttribute(Contants.SESSION_USER,user);
            }
        }
        return returnObject;
    }
}

5.2. login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="jquery/bootstrap-3.4.1/dist/css/bootstrap.min.css"/>

    <script type="text/javascript" src="jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#loginBtn").click(function () {
                //trim()去除空格
                let loginAct1 = $.trim($("#loginAct").val());
                let loginPwd1 = $.trim($("#loginPwd").val());
                //attr获取属性值，获取不到值是true或者false的属性值，例如checkbox，selected，readonly，disabled
                // $("#isRemPwd").attr("")
                //prop()专门用来获取值是true或者false的函数
                let isRemPwd1 = $("#isRemPwd").prop("checked")
                //表单数据
                if (loginAct1 == "" || loginPwd1 == "") {
                    alert("Username or Password can't be null!!");
                    return;
                }
                $.ajax({
                    url: "settings/qx/user/login.do",
                    data: {
                        loginAct: loginAct1,
                        loginPwd: loginPwd1,
                        isRemPwd: isRemPwd1
                    },
                    type: "post",
                    dataType: "json",
                    success: function (ret) {
                        if (ret.code == "1") {
                            window.location.href = "/workbench/index.do";//跳转到controller，不能直接跳转到静态页面
                        } else {
                            $("#msg").html(ret.message);
                        }
                    },
                    beforeSend: function () {//当ajax向后台发送请求之前，会自动执行本函数该函数的返回值能够决定ajax是否真正向后台发送请求：
                        //如果该函数返回true，则ajax会正在向后台发送请求，否则，如果该函数返回false则ajax放弃向后台发送请求
                        $("#msg").text("正在努力验证....");
                        return true;

                    }
                })

            });
        })
    </script>
</head>
<body>
<div style="position: relative;background-color: black">
    <img src="image/xanadu.jpg" style="width: 50%;height: 100%;">
    <div style="position:absolute;top:10px;right:5px;width: 50%;float: right;">
        <div class="modal-dialog" role="document" style="width: 80%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">登录</h4>
                </div>
                <form class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Username</label>
                            <div class="col-sm-10">
                                <input id="loginAct" name="loginAct" type="text" class="form-control" id="inputEmail3"
                                       placeholder="Username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-10">
                                <input id="loginPwd" name="loginPwd" type="password" class="form-control"
                                       id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input id="isRemPwd" name="isRemPwd" type="checkbox"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="loginBtn" type="button" class="btn btn-default">Login in
                                </button>
                            </div>
                        </div>
                        <div><span style="color: red" id="msg"></span></div>

                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->


    </div>
</div>
</body>
</html>

素心如月桠

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CRM-登录功能实现

接上一篇搭建Mybatis逆向工程要实现的页面：点击登录，后台会判断用户名密码是否正确，1. 登录功能实现Mapper层上一篇在Mybatis逆向工程中配置Dao层的存放路径，放在了com.lyx.settings.mapper路径下，打开这个包，可以看到UserMapper.java类，在类中添加selectUserByLoginActAndPwd()方法因为需要两个参数，所以使用Map集合做参数在映射文件UserMapper.xml文件中添加如下controller层给的map参数
复制链接

扫一扫