文章目錄

• 概述
• Dao層
• • 接口
  • mapper映射文件 LocalAuthDao.xml
  • 單元測試
• Service層
• • 接口
  • 實現類
  • MD5密碼加密工具類
  • 單元測試
• Controller層
• • LocalAuthController.java
  • 單元測試
• View層
• • localauthlogin.html
  • localauthlogin.js
  • 添加路由
  • 聯調
• Github地址

概述

我們現在tb_local_auth表中模擬幾條數據，先將用戶登錄（本地賬號）的功能從后端到前端開發一下

---

Dao層

接口

package com.artisan.o2o.dao;import org.apache.ibatis.annotations.Param;import com.artisan.o2o.entity.LocalAuth;public interface LocalAuthDao {/*** * * @Title: queryLocalByUserNameAndPwd* * @Description: 根據用戶名和密碼查詢用戶* * @param userName* @param password* * @return: LocalAuth*/LocalAuth queryLocalByUserNameAndPwd(@Param("userName") String userName, @Param("password") String password); }

---

mapper映射文件 LocalAuthDao.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="com.artisan.o2o.dao.LocalAuthDao"><resultMap id="localAuthResultMap" type="LocalAuth"><id column="local_auth_id" property="localAuthId" /><result column="user_name" property="userName" /><result column="password" property="password" /><result column="create_time" property="createTime" /><result column="last_edit_time" property="lastEditTime" /><association property="personInfo" column="user_id"javaType="com.artisan.o2o.entity.PersonInfo"><id column="user_id" property="userId" /><result column="name" property="name" /><result column="profile_img" property="profileImg" /><result column="gender" property="gender" /><result column="email" property="email" /><result column="user_type" property="userType" /><result column="create_time" property="createTime" /><result column="last_edit_time" property="lastEditTime" /><result column="enable_status" property="enableStatus" /></association></resultMap><select id="queryLocalByUserNameAndPwd" parameterType="java.lang.String" resultMap="localAuthResultMap">SELECTl.local_auth_id,l.user_id,l.user_name,l.password,l.create_time,l.last_edit_time,p.user_id,p.name,p.gender,p.email,p.profile_img,p.user_type,p.create_time,p.last_edit_time,p.enable_statusFROMtb_local_auth lLEFT JOINtb_person_infop ON l.user_id = p.user_idWHEREl.user_name = #{userName}ANDl.password = #{password}</select></mapper>

---

單元測試

package com.artisan.o2o.dao;import java.util.Date;import org.junit.Assert; import org.junit.Test; import org.springframework.beans.factory.annotation.Autowired;import com.artisan.o2o.BaseTest; import com.artisan.o2o.entity.LocalAuth; import com.artisan.o2o.entity.PersonInfo; import com.artisan.o2o.util.MD5;public class LocalAuthDaoTest extends BaseTest {@AutowiredLocalAuthDao localAuthDao;@Testpublic void testQueryLocalByUserNameAndPwd() {LocalAuth localAuth = localAuthDao.queryLocalByUserNameAndPwd("artisan", MD5.getMd5("123456"));System.out.println(localAuth.toString());} }

確保邏輯正確，單元測試通過。 比較簡單，這里不粘貼日志和數據了。

---

Service層

接口

package com.artisan.o2o.service;import com.artisan.o2o.entity.LocalAuth;public interface LocalAuthService {LocalAuth queryLocalAuthByUserNameAndPwd(String userName, String password); }

---

實現類

package com.artisan.o2o.service.impl;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service;import com.artisan.o2o.dao.LocalAuthDao; import com.artisan.o2o.entity.LocalAuth; import com.artisan.o2o.service.LocalAuthService;@Service public class LocalAuthServiceImpl implements LocalAuthService {@Autowiredprivate LocalAuthDao localAuthDao;@Overridepublic LocalAuth queryLocalAuthByUserNameAndPwd(String userName, String password) {return localAuthDao.queryLocalByUserNameAndPwd(userName, password);}}

---

MD5密碼加密工具類

package com.artisan.o2o.util;import java.security.MessageDigest;public class MD5 {public static final String getMd5(String s) {char hexDigits[] = { '5', '0', '5', '6', '2', '9', '6', '2', '5', 'q', 'b', 'l', 'e', 's', 's', 'y' };try {char str[];byte strTemp[] = s.getBytes();MessageDigest mdTemp = MessageDigest.getInstance("MD5");mdTemp.update(strTemp);byte md[] = mdTemp.digest();int j = md.length;str = new char[j * 2];int k = 0;for (int i = 0; i < j; i++) {byte byte0 = md[i];str[k++] = hexDigits[byte0 >>> 4 & 0xf];str[k++] = hexDigits[byte0 & 0xf];}return new String(str);} catch (Exception e) {return null;}}public static void main(String[] args) {System.out.println(MD5.getMd5("artisan"));} }

---

單元測試

package com.artisan.o2o.service;import org.junit.Assert; import org.junit.Test; import org.springframework.beans.factory.annotation.Autowired;import com.artisan.o2o.BaseTest; import com.artisan.o2o.entity.LocalAuth; import com.artisan.o2o.util.MD5;public class LocalAuthServiceImplTest extends BaseTest {@Autowiredprivate LocalAuthService localAuthService;@Testpublic void testQueryLocalAuthByUserNameAndPwd() {LocalAuth localAuth = localAuthService.queryLocalAuthByUserNameAndPwd("Artisan", MD5.getMd5("123456"));Assert.assertEquals("Artisan", localAuth.getUserName());System.out.println(localAuth.toString());} }

---

Controller層

LocalAuthController.java

package com.artisan.o2o.web.shopadmin;import java.util.HashMap; import java.util.Map;import javax.servlet.http.HttpServletRequest;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.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody;import com.artisan.o2o.entity.LocalAuth; import com.artisan.o2o.service.LocalAuthService; import com.artisan.o2o.util.HttpServletRequestUtil; import com.artisan.o2o.util.MD5; import com.artisan.o2o.util.VerifyCodeUtil;@Controller @RequestMapping(value = "/shop", method = { RequestMethod.GET, RequestMethod.POST }) public class LocalAuthController {@Autowiredprivate LocalAuthService localAuthService;@RequestMapping("localauthlogincheck")@ResponseBodypublic Map<String, Object> localAuthLoginCheck(HttpServletRequest request) {Map<String, Object> modelMap = new HashMap<String, Object>();// 是否需要校驗的標志boolean needVerify = HttpServletRequestUtil.getBoolean(request, "needVerify");// 驗證碼校驗if (needVerify && !VerifyCodeUtil.verifyCode(request)) {modelMap.put("success", false);modelMap.put("errMsg", "驗證碼不正確,請重新輸入");return modelMap;}// 獲取用戶輸入的用戶名+密碼String userName = HttpServletRequestUtil.getString(request, "userName");String password = HttpServletRequestUtil.getString(request, "password");if (userName != null && password != null) {// 數據庫中的密碼是MD加密的，所以需要先將密碼加密，然后再調用后臺的接口password = MD5.getMd5(password);LocalAuth localAuth = localAuthService.queryLocalAuthByUserNameAndPwd(userName, password);if (localAuth != null) {// 將personInfo寫入session中request.getSession().setAttribute("user", localAuth.getPersonInfo());modelMap.put("success", true);modelMap.put("errMsg", "登錄成功");} else {modelMap.put("success", false);modelMap.put("errMsg", "用戶名或密碼不正確");}} else {modelMap.put("success", false);modelMap.put("errMsg", "用戶名和密碼不能為空");}return modelMap;}}

---

單元測試

待View層實現后，一并聯調

---

View層

localauthlogin.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>登錄</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/o2o/favicon.ico"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet"href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <link rel="stylesheet"href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> </head> <body><header class="bar bar-nav"><h1 class="title">登錄</h1></header><div class="content"><div class="list-block"><ul><li><div class="item-content"><div class="item-media"><i class="icon icon-form-name"></i></div><div class="item-inner"><div class="item-title label">用戶名</div><div class="item-input"><input type="text" id="username" placeholder="用戶名"></div></div></div></li><li><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><div class="item-title label">密 碼</div><div class="item-input"><input type="password" id="psw" placeholder="密碼"></div></div></div></li><li id="verifyPart" hidden="true"><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><label for="j_captcha" class="item-title label">驗證碼</label> <inputid="j_captcha" name="j_captcha" type="text"class="form-control in" placeholder="驗證碼" /><div class="item-input"><img id="captcha_img" alt="點擊更換" title="點擊更換"onclick="changeVerifyCode(this)" src="../Kaptcha"/></div></div></div></li></ul></div><div class="content-block"><div class="row"><div class="col-50"><a href="#" class="button button-big button-fill button-success"id="register">注冊</a></div><div class="col-50"><a href="#" class="button button-big button-fill" id="submit">登錄</a></div></div></div></div><script type='text/javascript'src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script><script type='text/javascript'src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script><script type='text/javascript'src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script><script type='text/javascript' src='../resources/js/shop/localauthlogin.js'charset='utf-8'></script><script type='text/javascript'src='../resources/js/common/common.js' charset='utf-8'></script> </body> </html>

localauthlogin.js

$(function() {var loginUrl = '/o2o/shop/localauthlogincheck';var loginCount = 0;$('#submit').click(function() {var userName = $('#username').val();var password = $('#psw').val();var verifyCodeActual = $('#j_captcha').val();var needVerify = false;if (loginCount >= 3) {if (!verifyCodeActual) {$.toast('請輸入驗證碼！');return;} else {needVerify = true;}}$.ajax({url : loginUrl,async : false,cache : false,type : "post",dataType : 'json',data : {userName : userName,password : password,verifyCodeActual : verifyCodeActual,needVerify : needVerify},success : function(data) {if (data.success) {$.toast(data.errMsg);window.location.href = '/o2o/shopadmin/shoplist';} else {$.toast(data.errMsg);loginCount++;if (loginCount >= 3) {$('#verifyPart').show();}}}});});$('#register').click(function() {window.location.href = '/o2o/shop/register';}); });

---

添加路由

@RequestMapping(value = "/localauthlogin", method = RequestMethod.GET)public String localAuthLogin() {return "shop/localauthlogin";}

---

聯調

啟動tomcat， 輸入http://localhost:8080/o2o/shopadmin/localauthlogin

三次輸入密碼錯誤，顯示驗證碼。

---

Github地址

代碼地址： https://github.com/yangshangwei/o2o

總結

以上是生活随笔為你收集整理的实战SSM_O2O商铺_48【用户登录】用户登录Dao-Service-Controller-View层的开发的全部內容，希望文章能夠幫你解決所遇到的問題。

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