用戶在登錄頁面,輸入用戶名和密碼,點擊"登錄"按鈕或者回車,完成用戶登錄的功能.

???????? *用戶名和密碼不能為空

???????? *用戶名或者密碼錯誤,用戶已過期,用戶狀態被鎖定,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用户登录实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。