二、crm用户登录实现

文章列表

二、crm用户登录实现

用户在登录页面,输入用户名和密码,点击"登录"按钮或者回车,完成用户登录的功能.

*用户名和密码不能为空

*用户名或者密码错误,用户已过期,用户状态被锁定,ip受限都不能登录成功

*登录成功之后,所有业务页面显示当前用户的名称

*实现10天记住密码

*登录成功之后,跳转到业务主页面

*登录失败,页面不跳转,提示信息

一、流程图

二、包结构

三、代码实现

1.UserMapper

①在UserMapper接口

    /* 根据用户名和密码查询对象*/User selectUserByLoginActAndPwd(Map<String,Object> map);

②在UserMapper映射文件

  <!-- User selectUserByLoginActAndPwd(Map<String,Object> map);--><select id="selectUserByLoginActAndPwd" parameterType="map" resultMap="BaseResultMap">select<include refid="Base_Column_List"/>from tbl_userwhere login_act=#{loginAct} and login_pwd=#{loginPwd}</select>

注意:传过来参数的map的K一定是loginAct，loginPwd

2.UserService

①在UserService接口，写上方法

public interface UserService {User queryUserByLoginActAndPwd(Map<String,Object> map);
}

②在UserServiceImpl继承接口实现方法

@Service
public class UserServiceImpl implements UserService {@Autowiredprivate UserMapper userMapper;@Overridepublic User queryUserByLoginActAndPwd(Map<String, Object> map) {return userMapper.selectUserByLoginActAndPwd(map);}
}

@Service:创建bean实例

@Autowired：实现属性注入

③在Spring的配置文件applicationContext.xml开启扫描注解

 <context:component-scan base-package="com.wzl.crm.settings.service"/>

3.UserController

①在SpringMVC配置文件扫描Controller层applicationContext-mvc.xml

 <context:component-scan base-package="com.wzl.crm.settings.web.controller"/>

②获取参数

//注入userService对象的实现类
@Autowired
private UserService userService;
@RequestMapping("settings/qx/user/login.do")
public @ResponseBody Object login(String loginAct, String loginPwd, String isRemPwd, HttpServletRequest request, HttpSession session, HttpServletResponse response) {}

因为返回的是Json对象，所以返回类型是Object，通用性高。使用@ResponseBody，转换成Json

③封装参数

		//封装参数Map<String, Object> map = new HashMap<>();map.put("loginAct", loginAct);map.put("loginPwd", loginPwd);

map这里的K要和mapper查询语句对应起来。

④调用service的方法

		//调用service层方法查询用户User user = userService.queryUserByLoginActAndPwd(map);

⑤根据查询结果生成响应信息

ⅠContants类保存常量,Json的code成功或失败

public class Contants {//保存ReturnObject的code值public static final String RETURN_OBJECT_CODE_SUCCESS = "1"; //成功public static final String RETURN_OBJECT_CODE_FAIL = "0"; //失败//保存当前用户的keypublic static final String SESSION_USER = "sessionUser"; //失败}

Ⅱ ReturnObject是Json的格式

public class ReturnObject {private String code;//成功或者失败：1成功，0失败private String message;//提示信息private Object retDate;//返回其他数据public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public Object getRetDate() {return retDate;}public void setRetDate(Object retDate) {this.retDate = retDate;}
}

ⅢDateUtils统一日期格式的工具类

public class DateUtils {public static String formateDateTime(Date date){SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");return sdf.format(date);}public static String formateDate(Date date){SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");return sdf.format(date);}
}

//根据查询结果，生成响应信息ReturnObject returnObject = new ReturnObject();//根据查询结果响应信息if (user == null) {// 登录失败，用户名或密码错误returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("用户名或密码错误");} else if (DateUtils.formateDateTime(new Date()).compareTo(user.getExpireTime()) > 0) { //时间失效了returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("账号过期");} else if ("0".equals(user.getLockState())) { //0 锁定了 失败returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("账号锁定");} else if (!user.getAllowIps().contains(request.getRemoteAddr())) { // ip地址不在范围returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("ip受限");} else {//登录成功returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);}
return returnObject;

完整的代码

@Controller
public class UserController {//注入userService对象的实现类@Autowiredprivate UserService userService;/* 点击主页跳转到登录*/@RequestMapping("settings/qx/user/toLogin.do")public String toLogin() {return "settings/qx/user/login";}/* 用户登录功能* 返回一个json* 通用性高，返回Object* ResponseBody--转换json*/@RequestMapping("settings/qx/user/login.do")public @ResponseBodyObject login(String loginAct, String loginPwd, String isRemPwd, HttpServletRequest request, HttpSession session, HttpServletResponse response) {//封装参数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 if (DateUtils.formateDateTime(new Date()).compareTo(user.getExpireTime()) > 0) { //时间失效了returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("账号过期");} else if ("0".equals(user.getLockState())) { //0 锁定了 失败returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("账号锁定");} else if (!user.getAllowIps().contains(request.getRemoteAddr())) { // ip地址不在范围returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("ip受限");} else {//登录成功returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);// 把user存放到sessionsession.setAttribute(Contants.SESSION_USER, user);//记住密码if ("true".equals(isRemPwd)) {Cookie c1 = new Cookie("loginAct", user.getLoginAct());//账号//设置生命周期c1.setMaxAge(10 * 24 * 60 * 60);//保存到浏览器response.addCookie(c1);Cookie c2 = new Cookie("loginPwd", user.getLoginPwd());//密码//设置生命周期c2.setMaxAge(10 * 24 * 60 * 60);//保存到浏览器response.addCookie(c2);}else {//删除之前cookieCookie c1 = new Cookie("loginAct","1");//账号//设置生命周期c1.setMaxAge(0);//保存到浏览器response.addCookie(c1);Cookie c2 = new Cookie("loginPwd", "1");//密码//设置生命周期c2.setMaxAge(0);//保存到浏览器response.addCookie(c2);}}return returnObject;}}

4.客户端

①用户输入账号和密码

 <form action="workbench/index.html" class="form-horizontal" role="form"><div class="form-group form-group-lg"><div style="width: 350px;"><input class="form-control" id="loginAct" type="text" value="${cookie.loginAct.value}"placeholder="用户名"></div><div style="width: 350px; position: relative;top: 20px;"><input class="form-control" id="loginPwd" type="password" value="${cookie.loginPwd.value}"placeholder="密码"></div><div class="checkbox" style="position: relative;top: 30px; left: 10px;"><label><c:if test="${not empty cookie.loginAct and not empty cookie.loginPwd}"><input type="checkbox" name="isRemPwd" checked></c:if><c:if test="${empty cookie.loginAct or empty cookie.loginPwd}"><input type="checkbox" name="isRemPwd"></c:if>十天内免登录&nbsp;&nbsp;</label><span id="msg" style="color: red"></span><button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block"style="width: 350px; position: relative;top: 45px;">登录</button></div></div></form>

通过按钮id的值绑定单击事件

            //登录按钮添加单击事件$("#loginBtn").click(function () {// 收集参数,并且去除空格var loginAct = $.trim($("#loginAct").val());var loginPwd = $.trim($("#loginPwd").val());var isRemPwd = $('input[name="isRemPwd"]').prop("checked");alert(isRemPwd)// 表单验证if (loginAct == "") {alert("用户名不为空");return;//结束}if (loginPwd == "") {alert("密码不为空");return;//结束}// 发送请求$.ajax({url: 'settings/qx/user/login.do',data: {loginAct: loginAct,loginPwd: loginPwd,isRemPwd: isRemPwd},type: 'post',//解析返回的json------dataType: 'json',success: function (data) {if (data.code == "1") {//登录成功，跳转业务主页面Controllerwindow.location.href = "workbench/index.do";} else {// 提示信息$("#msg").text(data.message);}},beforeSend: function () { //ajax往后台发送执行这个函数$("#msg").text("正在验证...");return true;}});});

跳转主页的controller

@Controller
public class WorkbenchIndexController {@RequestMapping("workbench/index.do")public String index(){return "workbench/index";}
}

②实现回车登录

        // 整个浏览器窗口添加键盘点击事件$(window).keydown(function (e) {// 回车键提交请求 13是回车if (e.keyCode == 13) {$("#loginBtn").click();// 点击登录按钮}});

③实现记住密码，使用cookie

var isRemPwd = $('input[name="isRemPwd"]').prop("checked");

value="${cookie.loginPwd.value}"

                    <label><c:if test="${not empty cookie.loginAct and not empty cookie.loginPwd}"><input type="checkbox" name="isRemPwd" checked></c:if><c:if test="${empty cookie.loginAct or empty cookie.loginPwd}"><input type="checkbox" name="isRemPwd"></c:if>十天内免登录&nbsp;&nbsp;</label>

完整的登录前端代码

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head><base href="<%=basePath%>"><meta charset="UTF-8"><link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/><script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script><script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script><script type="text/javascript">$(function () {// 整个浏览器窗口添加键盘点击事件$(window).keydown(function (e) {// 回车键提交请求 13是回车if (e.keyCode == 13) {$("#loginBtn").click();// 点击登录按钮}});//登录按钮添加单击事件$("#loginBtn").click(function () {// 收集参数,并且去除空格var loginAct = $.trim($("#loginAct").val());var loginPwd = $.trim($("#loginPwd").val());var isRemPwd = $('input[name="isRemPwd"]').prop("checked");alert(isRemPwd)// 表单验证if (loginAct == "") {alert("用户名不为空");return;//结束}if (loginPwd == "") {alert("密码不为空");return;//结束}// 发送请求$.ajax({url: 'settings/qx/user/login.do',data: {loginAct: loginAct,loginPwd: loginPwd,isRemPwd: isRemPwd},type: 'post',//解析返回的json------dataType: 'json',success: function (data) {if (data.code == "1") {//登录成功，跳转业务主页面Controllerwindow.location.href = "workbench/index.do";} else {// 提示信息$("#msg").text(data.message);}},beforeSend: function () { //ajax往后台发送执行这个函数$("#msg").text("正在验证...");return true;}});});})</script>
</head>
<body>
<div style="position: absolute; top: 0px; left: 0px; width: 60%;"><img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
</div>
<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;"><div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">&copy;2022&nbsp;动力节点</span></div>
</div><div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5"><div style="position: absolute; top: 0px; right: 60px;"><div class="page-header"><h1>用户登录</h1></div><form action="workbench/index.html" class="form-horizontal" role="form"><div class="form-group form-group-lg"><div style="width: 350px;"><input class="form-control" id="loginAct" type="text" value="${cookie.loginAct.value}"placeholder="用户名"></div><div style="width: 350px; position: relative;top: 20px;"><input class="form-control" id="loginPwd" type="password" value="${cookie.loginPwd.value}"placeholder="密码"></div><div class="checkbox" style="position: relative;top: 30px; left: 10px;"><label><c:if test="${not empty cookie.loginAct and not empty cookie.loginPwd}"><input type="checkbox" name="isRemPwd" checked></c:if><c:if test="${empty cookie.loginAct or empty cookie.loginPwd}"><input type="checkbox" name="isRemPwd"></c:if>十天内免登录&nbsp;&nbsp;</label><span id="msg" style="color: red"></span><button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block"style="width: 350px; position: relative;top: 45px;">登录</button></div></div></form></div>
</div>
</body>
</html>

二、crm用户登录实现

用户在登录页面,输入用户名和密码,点击"登录"按钮或者回车,完成用户登录的功能.

一、流程图

二、包结构

三、代码实现

1.UserMapper

2.UserService

3.UserController

4.客户端

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签

二、crm用户登录实现

用户在登录页面,输入用户名和密码,点击"登录"按钮或者回车,完成用户登录的功能.

一、流程图

二、包结构

三、代码实现

1.UserMapper

2.UserService

3.UserController

4.客户端

相关问题

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签