本次练习项目采用Spring+SpringMV+myBatis框架前端集成VUE、ElementUI、EasyUI

一、注册登录模块

1.前端页面先期布局

获取页面绝对居中定位，
设定一个透明div盒子为基本登录注册区域。

2.基础组件创建

规划字段创建数据库用户表
利用mybatis-generator插件
逆向工程生成domain mapper
搭建service层

3.前端页面完善

加入各种按钮以及logo
Css实现不同模块的切换动画
4.实现注册功能
引入表单验证插件
输入框失去焦点触发验证
所有验证通过才能提交表单

5.集成shiro权限框架

配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd"><bean id="securityManager" class="org.apache.shiro.web.mgt.DefaultWebSecurityManager"><property name="authenticator" ref="authenticator"/><property name="realms"><list><ref bean="pornhubRealm"></ref><ref bean="UserPhoneRealm"></ref></list></property><property name="rememberMeManager" ref="rememberMeManager"/><property name="cacheManager" ref="cacheManager"/></bean><bean id="authenticator" class="org.apache.shiro.authc.pam.ModularRealmAuthenticator"><property name="authenticationStrategy" ><bean class="org.apache.shiro.authc.pam.AtLeastOneSuccessfulStrategy"/></property></bean><bean id="pornhubRealm" class="com.pornhub.salesystem.realm.PornhubRealm"><property name="credentialsMatcher" ref="credentialsMatcher"/></bean><bean id="UserPhoneRealm" class="com.pornhub.salesystem.realm.UserPhoneRealm"><property name="credentialsMatcher" ref="credentialsMatcher"/></bean>
<!--配置cookie--><bean id="cookieRememberMe" class="org.apache.shiro.web.servlet.SimpleCookie"><constructor-arg name="name" value="rememberMeAfter"/><!--cookie的存活时间--><property name="maxAge" value="2592000"/><!--请求是否为htt请求,防止恶意攻击--><property name="httpOnly" value="true"/></bean><bean id="rememberMeManager" class="org.apache.shiro.web.mgt.CookieRememberMeManager"><property name="cookie" ref="cookieRememberMe"/><property name="cipherKey"value="#{T(org.apache.shiro.codec.Base64).decode('4AvVhmFLUs0KTA3Kprsdag==')}"/></bean><bean id="shiroFilter" class="org.apache.shiro.spring.web.ShiroFilterFactoryBean"><property name="securityManager" ref="securityManager"/><property name="loginUrl" value="/login"/><property name="successUrl" value="/s/success.jsp"/><property name="unauthorizedUrl" value="/unauthorized.jsp"/><property name="filterChainDefinitionMap" ref="filterChainDefinitionMap"/><!--自定义过滤器--><property name="filters"><map><entry key="MyPerms" ><bean class="com.pornhub.salesystem.realm.MyPermissionsAuthorizationFilter"/></entry><entry key="kickout" value-ref="kickoutSessionControlFilter"/></map></property></bean><!--从自定义工厂类创建map--><bean id="filterChainDefinitionMap" factory-bean="MyfilterChainDefinitionMapFactory" factory-method="createMap"/><!--自定义map工厂类--><bean id="MyfilterChainDefinitionMapFactory" class="com.pornhub.salesystem.realm.MyFilterChainDefinitionMapFactory"/><bean id="credentialsMatcher"class="com.pornhub.salesystem.realm.CustomCredentialsMatcher"><constructor-arg ref="cacheManager" /><!--加密方式--><property name="hashAlgorithmName" value="MD5"/><!--加密次数--><property name="hashIterations" value="10"/></bean><bean id="sessionManager" class="org.apache.shiro.web.session.mgt.DefaultWebSessionManager"><property name="globalSessionTimeout" value="1600000"/><!-- 删除失效的session --><property name="deleteInvalidSessions" value="true"/><!-- 是否开启会话验证器，默认是开启的 --><property name="sessionValidationSchedulerEnabled" value="true"/></bean><!--配置cache管理器--><bean id="cacheManager" class="org.apache.shiro.cache.ehcache.EhCacheManager"><property name="cacheManagerConfigFile" value="classpath:ehcache.xml"/></bean><bean id="kickoutSessionControlFilter"class="com.pornhub.salesystem.realm.KickoutSessionControlFilter"><property name="cacheManager" ref="cacheManager"/><property name="kickoutAfter" value="false"/><property name="maxSession" value="1"/><property name="kickoutUrl" value="/login.do"/></bean>
</beans>

6.实现账号密码登录

Shiro实现登录验证，
多次错误输入冻结一段时间账号，
账号重复登录踢出，
自定义token与验证实现免密登录

public class CustomCredentialsMatcher extends HashedCredentialsMatcher {private Cache<String, AtomicInteger> passwordRetryCache;public CustomCredentialsMatcher(CacheManager cacheManager) {passwordRetryCache = cacheManager.getCache("passwordRetryCache");}@Overridepublic boolean doCredentialsMatch(AuthenticationToken token,AuthenticationInfo info) {String username = (String) token.getPrincipal();AtomicInteger retryCount = passwordRetryCache.get(username);if (retryCount == null) {retryCount = new AtomicInteger(0);passwordRetryCache.put(username, retryCount);}if (retryCount.incrementAndGet() > 3) {throw new ExcessiveAttemptsException();}MyToken tk= (MyToken) token;if(tk.getType().equals(LoginType.NOPWD)){return true;}boolean matches = super.doCredentialsMatch(token, info);if (matches) {passwordRetryCache.remove(username);}return matches;}public Cache<String, AtomicInteger> getPasswordRetryCache() {return passwordRetryCache;}public void setPasswordRetryCache(Cache<String, AtomicInteger> passwordRetryCache) {this.passwordRetryCache = passwordRetryCache;}
}

7.实现第三方短信登录

两种实现方式：
①自定义realm ，实现多realm验证码认证
②自己判断验证码，完成判断后调用免密登录

8.实现第三方微信登录

1.登录页面准备微信登录按钮
2.发起获取微信二维码的请求
3.获得二维码给用户展示
4.用户扫描同意授权
5.编写获取授权码的重定向的接口获取授权码
6.根据授权码code+appid+appsecret 去换取 token
7.根据token去换取用户资源

import cn.porn.domain.Employee;
import cn.porn.service.IEmployeeService;
import cn.porn.util.AjaxResult;
import cn.porn.utils.MyToken;
import cn.porn.utils.UserUtil;
import cn.porn.web.util.HttpClientUtil;
import cn.porn.web.util.WxConstants;
import com.alibaba.fastjson.JSON;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authc.*;
import org.apache.shiro.subject.Subject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.springframework.web.servlet.support.RequestContextUtils;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.Map;@Controller
@RequestMapping("/wechat")
public class WeChatController {@Autowiredprivate IEmployeeService employeeService;@RequestMapping("/login")public String login(HttpServletRequest request, Model model){Map<String,?> map = RequestContextUtils.getInputFlashMap(request);if (map != null) {model.addAttribute("headImg",map.get("headImg").toString());model.addAttribute("nickName",map.get("nickName").toString());model.addAttribute("sex",map.get("sex").toString());return "wechat/wechatLogin";}else{return "login";}}@RequestMapping("/callback")public String callback(String code, String state, RedirectAttributes model, HttpSession session){//可以先判断state状态码String getTokenUrl =  WxConstants.ACCESSTOKEURL.replace("APPID",WxConstants.APPID).replace("SECRET",WxConstants.APPSECRET).replace("CODE",code);String tokenResultStr = HttpClientUtil.doGet(getTokenUrl);Map<String,String> tokenResultMap = JSON.parseObject(tokenResultStr,Map.class);String tokenString = tokenResultMap.get("access_token");String openId = tokenResultMap.get("openid");String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token="+tokenString+"&openid="+openId;String userResultStr = HttpClientUtil.doGet(userInfoUrl);Map<String,String> userInfoResultMap = JSON.parseObject(userResultStr,Map.class);model.addFlashAttribute("headImg",userInfoResultMap.get("headimgurl"));model.addFlashAttribute("nickName",userInfoResultMap.get("nickname"));model.addFlashAttribute("sex", userInfoResultMap.get("sex"));Employee byOpenid = employeeService.findByOpenid(openId);if (byOpenid != null) {MyToken token = new MyToken(byOpenid.getUsername());Subject subject = SecurityUtils.getSubject();if (!subject.isAuthenticated()){subject.login(token);}UserUtil.setUser(byOpenid);return "main";}else{session.setAttribute("usersk", openId);return "redirect:/wechat/login";}}
}

9.实现人脸识别登录

接入百度API
获取accesstoken
前端获取摄像头权限
Canvas画布动态获取图像
转为BASE64格式编码
后台controller接收编码
传值过程很多坑，BASE64数据容易丢失
两种解决方法：1.tomcat配置文件设置post传输最大长度maxPostSize2.前端传值前先转为byte数组传输，后台接收后转码
后台接收后根据api设置各项参数
发送识别请求
接收返回值并转换json数据为对象
对数据进行处理并判断

    @RequestMapping(value = "/facelogin", method = RequestMethod.POST)@ResponseBodypublic AjaxResult facelogin(String faceInfo) {try {String search = FaceCheck.search(faceInfo);JSONObject jsonObject = JSON.parseObject(search);String errorMsg = jsonObject.getString("error_msg");JSONArray jsonArray = jsonObject.getJSONObject("result").getJSONArray("user_list");JSONObject result = jsonArray.getJSONObject(0);double scoreRes = result.getDouble("score");String username = result.getString("user_id");if (scoreRes > 80.0) {Subject subject = SecurityUtils.getSubject();MyToken token = new MyToken(username);if (!subject.isAuthenticated()) {subject.login(token);}return new AjaxResult();}else if (!errorMsg.equals("SUCCESS")){return AjaxResult.error(errorMsg);} else {return AjaxResult.error("OMG，这不是你的脸");}} catch (Exception e) {e.printStackTrace();return AjaxResult.error("网络异常" + e.getMessage());}}

public static String search(String faceInfo) {// 请求urlString url = "https://aip.baidubce.com/rest/2.0/face/v3/search";try {Map<String, Object> map = new HashMap<>();map.put("image", faceInfo);map.put("liveness_control", "NORMAL");map.put("group_id_list", "group1");map.put("image_type", "BASE64");map.put("quality_control", "LOW");String param = GsonUtils.toJson(map);String result = HttpUtil.post(url, accessToken, "application/json", param);System.out.println(result);return result;} catch (Exception e) {e.printStackTrace();}return null;}

FileUtil,Base64Util,HttpUtil,GsonUtils工具类下载地址：
https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3

二、项目主体外框

1.布局分为北侧西侧以及中间

2.西侧为可收缩导航栏

3.北侧为菜单栏

菜单栏显示Logo图标、用户头像信息以及下拉菜单(信息详情与退出登录功能)

4.中间部分为内容展示部分，动态获取导航栏节点数据展示页面

三、收银模块

1.收银模块前端布局

2.elementUI 实现前端功能

3.模拟会员、库存、订单、商品接口数据进行测试

4.前端后台数据交互完成

心得总结

经过本次学习开发，对VUE的技术运用更熟练了，后台mybatis以及shiro框架的功能掌握更好。
框架集成与配置愈发熟练了，在排错方面的能力得到了长足的提升。基本能在短时间内判断出大概错误的方向与范围，能够更有针对性的进行排错工作。
多模块集成遭遇了很多bug，多数是重复引用，或是jar包损坏等模块之间配置文件的引用也是一个大坑
感谢这次开发，让我的能力更上一层楼

店铺管理系统项目总结相关推荐

xml信息管理系统_WPF信息管理系统项目实战教程二：使用XAML实现页面布局
首页面布局设计 XAML(Extensible Application Markup Language),可扩展应用程序标记语言的使用使得C#桌面应用程序开发前后端实现真正分离.前端人员可使用该标记语 ...
Bootstrap4+MySQL前后端综合实训-Day08-PM【ajax获取表单标签内容、根据“栏目信息”添加“新闻信息”、新闻管理系统-项目展示】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 ajax获取表单标签内容 ajax根据数据库加载select下来列 ...
c#erp项目源码 mysql_Jsp+Ssm+Mysql实现图书馆预约占座管理系统项目源码（可带论文文档）...
JSP+SSM+MYSQL实现图书馆预约占座管理系统项目源码(可带论文文档). 一款ssm图书馆预约占座管理系统,此系统有论文文档,需单独购买,此商品只为项目源码. 提前预定的好处:一开始我们这边有大 ...
ip地址管理系统_门禁监控管理系统项目总结
门禁监控管理系统项目总结 1.门禁管理设备(IFACE802) 16台 ,都有独立的网线到控制的房间.IP地址从 192.168.1.101--192.168.1.116.(地下一层新家的最后一间是 ...
java swing mysql实现的员工工资管理系统项目
下载链接https://download.csdn.net/download/RONNIE_Zz/12675313 项目功能随着经济的发展,企业正向着大型化.规模化发展,而对于大中型企业,员工.职称 ...
ssm旅游管理系统项目介绍_基于jsp的网络相册管理系统的设计与实现
好程序设计擅长JAVA(SSM,SSH,SPRINGBOOT).PYTHON(DJANGO/FLASK).THINKPHP.C#.安卓.微信小程序.MYSQL.SQLSERVER等,欢迎咨询每天都要 ...
督办管理系统项目总结
督办管理系统项目总结这个项目是个后台管理系统的项目,更像是ERP类型的项目,用到的技术点有太行(行内).KendoUI.Bootstrap.jQuery这些前端常用框架和JS库,页面是动态生成的,这 ...
pythonweb图书管理系统_部署图书管理系统项目
部署准备部署图书管理项目你将使用以下软件 nginx uWSGI CentOS7 部署图书管理项目文件 virtualenv supervisor WSGI.uWSGI python web服务器开 ...
Java Web项目源代码|CRM客户关系管理系统项目实战（Struts2+Spring+Hibernate）解析+源代码+教程
客户关系管理 (CRM) CRM一般指客户关系管理客户关系管理是指企业为提高核心竞争力,利用相应的信息技术以及互联网技术协调企业与顾客间在销售.营销和服务上的交互,从而提升其管理方式,向客户提供创新 ...

店铺管理系统项目总结