实战SSM_O2O商铺_48【用户登录】用户登录Dao-Service-Controller-View层的开发

简介: 实战SSM_O2O商铺_48【用户登录】用户登录Dao-Service-Controller-View层的开发

概述

我们现在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">
    SELECT
      l.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_status
    FROM
      tb_local_auth l
    LEFT JOIN
      tb_person_info
    p ON l.user_id = p.user_id
    WHERE
      l.user_name = #{userName}
    AND
      l.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 {
  @Autowired
  LocalAuthDao localAuthDao;
  @Test
  public 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 {
  @Autowired
  private LocalAuthDao localAuthDao;
  @Override
  public 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 {
  @Autowired
  private LocalAuthService localAuthService;
  @Test
  public 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 {
  @Autowired
  private LocalAuthService localAuthService;
  @RequestMapping("localauthlogincheck")
  @ResponseBody
  public 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> <input
                id="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

三次输入密码错误,显示验证码。

20180818233725739.gif


Github地址

代码地址: https://github.com/yangshangwei/o2o

相关文章
|
11月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
11月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
搜索推荐 JavaScript Java
计算机Java项目|基于SSM的个性化商铺系统
计算机Java项目|基于SSM的个性化商铺系统
157 1
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的商铺租赁管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的商铺租赁管理系统附带文章和源代码部署视频讲解等
257 7
|
前端开发
杨校老师之基于SSM开发的校园点餐配送系统
杨校老师之基于SSM开发的校园点餐配送系统
185 0
杨校老师之基于SSM开发的校园点餐配送系统
|
JavaScript Java 测试技术
基于ssm+vue.js的小型企业办公自动化系统的设计和开发附带文章和源代码设计说明文档ppt
基于ssm+vue.js的小型企业办公自动化系统的设计和开发附带文章和源代码设计说明文档ppt
185 4
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
154 1
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
225 2
|
Java Maven Android开发
杨校老师课堂基于SSM整合之用户登录案例【Eclipse - Maven版】2
杨校老师课堂基于SSM整合之用户登录案例【Eclipse - Maven版】
192 0
|
Java 应用服务中间件 Maven
杨校老师课堂基于SSM整合之用户登录案例【Eclipse - Maven版】1
杨校老师课堂基于SSM整合之用户登录案例【Eclipse - Maven版】
161 0