目录 🌻🌻
一、商家申请入驻
1.1 需求分析
商家申请入驻，需要填写商家相关的信息。待运营商平台审核通过后即可使用。
1.2 准备工作
（1）拷贝资源 ： 将 / 静态原型 / 商家管理后台下的页面拷贝到 youlexuan_shop_web工程 webapp下面
（2）参照“运营商后台”构建 js 分别将 youlexuan_manager_web 下面的 js 👇🏾👇🏾copy到youlexuan_shop_web ② ③ ④
（3）拷贝 后端控制层代码 ：将 youlexuan_manager_web 对应 👇🏾👇🏾 copy到 youlexuan_shop_web 下面 👇🏾👇🏾
1.3 前端代码
修改 youlexuan_shop_web 下面 register.html 引入JS 并添加指令 👇🏾👇🏾
<script type="text/javascript" src="plugins/angularjs/angular.min.js"> </script>
<script type="text/javascript" src="js/base.js"> </script>
<script type="text/javascript" src="js/service/sellerService.js"> </script>
<script type="text/javascript" src="js/controller/baseController.js"> </script>
<script type="text/javascript" src="js/controller/sellerController.js"> </script>
<body ng-app="youlexuan" ng-controller="sellerController">
绑定表单 register.html（部分代码）
推荐快速高效绑定 ：
- 打开数据库找到对应表 tb_seller
- 根据表字段备注对应实体
- 将对应的实体copy到register.html中
绑定“申请入驻”按钮 ng-click="save()"
1.4 后端代码
修改后端代码 youlexuan-sellergoods-service的SellerServiceImpl 类的 add 方法，设置默认状态为0
（1） 在 youlexuan_shop_web 中添加安全依赖 pom.xml
<!--spring security相关依赖包-->
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-web</artifactId>
<version>4.1.0.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-config</artifactId>
<version>4.1.0.RELEASE</version>
</dependency>
（2）添加 密码加密（先加入这段代码下面会详细总结哈）到 SellerController.java中 👇🏾👇🏾
//密码加密
BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
String password = passwordEncoder.encode(seller.getPassword());
seller.setPassword(password);
seller.setStatus("0"); //看下面 0 代表未审核状态
最终显示 ：http://127.0.0.1:9102/register.html
（1） Daniel 还没未注册
（2）Daniel正在注册中
（3） Daniel 注册成功
数据库同步显示 👇🏾👇🏾
二、商家审核
2.1 需求分析
商家申请入驻后，需要网站运营人员在运营商管理后台进行审核，审核后商家才可以登陆系统。
状态值： 0：未审核 1：已审核 2：审核未通过 3：关闭
2.2 商家待审核列表
查询商家注册信息
2.2.1 需求分析
动态获取数据库注册列查询并分页
2.2.2 动态查询商家注册信息
（1） 在数据库中全部设置为 “未审核”
UPDATE tb_seller SET STATUS = '0'
浏览器入口： http://localhost:9101/login.html
（2）修改模块：youlexuan_manager_web 的页面 seller_1.html
引入JS
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script>
<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->
<script type="text/javascript" src="../js/base_pagination.js"> </script>
<script type="text/javascript" src="../js/service/sellerService.js"> </script>
<script type="text/javascript" src="../js/controller/baseController.js"> </script>
<script type="text/javascript" src="../js/controller/sellerController.js"> </script>
<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan" ng-controller="sellerController" ng-init="searchEntity={status:'0'}">
（3） 加入分页控件并动态循环获取 👇🏾👇🏾
从数据库中循环
<tr ng-repeat="entity in list">
<td><input type="checkbox"></td>
<td>{{entity.sellerId}}</td>
<td>{{entity.name}}</td>
<td>{{entity.nickName}}</td>
<td>{{entity.linkmanName}}</td>
<td>{{entity.telephone}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#sellerModal" >详情</button>
</td>
</tr>
分页控件
<!--分页控件-->
<tm-pagination conf="paginationConf"></tm-pagination>
2.2.3 按条件查询
<!--模糊查询-->
<div class="box-tools pull-right">
<div class="has-feedback">
公司名称：<input ng-model="searchEntity.name" >
店铺名称： <input ng-model="searchEntity.nickName">
<button class="btn btn-default" ng-click="reloadList()">查询</button>
</div>
</div>
seller_1.html 暂且完整代码：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商家审核</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->
<script type="text/javascript" src="../js/base_pagination.js"></script>
<script type="text/javascript" src="../js/service/sellerService.js"></script>
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/sellerController.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan" ng-controller="sellerController"
ng-init="searchEntity={status:'0'}">
<!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">商家审核</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<!--模糊查询-->
<div class="box-tools pull-right">
<div class="has-feedback">
公司名称：<input ng-model="searchEntity.name">
店铺名称： <input ng-model="searchEntity.nickName">
<button class="btn btn-default" ng-click="reloadList()">查询</button>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">商家ID</th>
<th class="sorting">公司名称</th>
<th class="sorting">店铺名称</th>
<th class="sorting">联系人姓名</th>
<th class="sorting">公司电话</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox"></td>
<td>{{entity.sellerId}}</td>
<td>{{entity.name}}</td>
<td>{{entity.nickName}}</td>
<td>{{entity.linkmanName}}</td>
<td>{{entity.telephone}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal"
data-target="#sellerModal">详情
</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
<!--分页控件-->
<tm-pagination conf="paginationConf"></tm-pagination>
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- 商家详情 -->
<div class="modal fade" id="sellerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">商家详情</h3>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">基本信息</a></li>
<li><a href="#linkman" data-toggle="tab">联系人</a></li>
<li><a href="#certificate" data-toggle="tab">证件</a></li>
<li><a href="#ceo" data-toggle="tab">法定代表人</a></li>
<li><a href="#bank" data-toggle="tab">开户行</a></li>
</ul>
<!-- 选项卡开始 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<br>
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>公司名称</td>
<td>美琪数码经营店</td>
</tr>
<tr>
<td>公司手机</td>
<td>13900221212</td>
</tr>
<tr>
<td>公司电话</td>
<td>010-20112222</td>
</tr>
<tr>
<td>公司详细地址</td>
<td>北京市朝阳区五方桥基地88号</td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="linkman">
<br>
<table class="table table-bordered table-striped">
<tr>
<td>联系人姓名</td>
<td>王美琪</td>
</tr>
<tr>
<td>联系人QQ</td>
<td>78223322</td>
</tr>
<tr>
<td>联系人手机</td>
<td>13500223322</td>
</tr>
<tr>
<td>联系人E-Mail</td>
<td>78223322@qq.com</td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="certificate">
<br>
<table class="table table-bordered table-striped">
<tr>
<td>营业执照号</td>
<td>330106000109206</td>
</tr>
<tr>
<td>税务登记证号</td>
<td>0292039393011</td>
</tr>
<tr>
<td>组织机构代码证号</td>
<td>22320320302421</td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="ceo">
<br>
<table class="table table-bordered table-striped">
<tr>
<td>法定代表人</td>
<td>王小聪</td>
</tr>
<tr>
<td>法定代表人身份证号</td>
<td>211030198503223122</td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="bank">
<br>
<table class="table table-bordered table-striped">
<tr>
<td>开户行名称</td>
<td>中国建设银行北京市分行</td>
</tr>
<tr>
<td>开户行支行</td>
<td>海淀支行</td>
</tr>
<tr>
<td>银行账号</td>
<td>999000111222</td>
</tr>
</table>
</div>
</div>
<!-- 选项卡结束 -->
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">审核通过</button>
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">审核未通过</button>
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">关闭商家</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
2.3 商家详情
2.3.1 最终效果
关闭商家 ：相当于拉黑（卖违法商品）
2.3.2 代码实现
（1）绑定页面弹出窗口 youlexuan_manager_web /webapp / admin / seller_1.html
<!-- 选项卡开始 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<br>
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>公司名称</td>
<td>{{entity.name}}</td>
</tr>
<tr>
<td>公司手机</td>
<td>{{entity.linkmanMobile}}</td>
</tr>
<tr>
<td>公司电话</td>
<td>{{entity.telephone}}</td>
</tr>
<tr>
<td>公司详细地址</td>
<td>{{entity.addressDetail}}</td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="linkman">
<br>
<table class="table table-bordered table-striped">
<tr>
<td>联系人姓名</td>
<td>{{entity.linkmanName}}</td>
</tr>
<tr>
<td>联系人QQ</td>
<td>{{entity.linkmanQq}}</td>
</tr>
<tr>
<td>联系人手机</td>
<td>{{entity.linkmanMobile}}</td>
</tr>
<tr>
<td>联系人E-Mail</td>
<td>{{entity.linkmanEmail}}</td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="certificate">
<br>
<table class="table table-bordered table-striped">
<tr>
<td>营业执照号</td>
<td>{{entity.licenseNumber}}</td>
</tr>
<tr>
<td>税务登记证号</td>
<td>{{entity.taxNumber}}</td>
</tr>
<tr>
<td>组织机构代码证号</td>
<td>{{entity.orgNumber}}</td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="ceo">
<br>
<table class="table table-bordered table-striped">
<tr>
<td>法定代表人</td>
<td>{{entity.legalPerson}}</td>
</tr>
<tr>
<td>法定代表人身份证号</td>
<td>{{entity.legalPersonCardId}}</td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="bank">
<br>
<table class="table table-bordered table-striped">
<tr>
<td>开户行名称</td>
<td>{{entity.bankName}}</td>
</tr>
<tr>
<td>银行账号</td>
<td>{{entity.bankUser}}</td>
</tr>
</table>
</div>
</div>
<!-- 选项卡结束 -->
（2）列表的“详情”按钮 ng-click="findOne(entity.sellerId)"
（3）修改sellerService.js 的findOne方法的请求参数名称由id换成 sellerId
2.4 商家审核
2.4.1 后端代码
（1）在youlexuan_sellergoods_interface 工程的 SellerService.java 服务接口新增方法定义
/**
* 商家审核
* 更改状态
* @param
* @param status
*/
public void updateStatus(String sellerId,String status);
（2）在youlexuan_sellergoods_service的SellerServiceImpl.java新增方法
//商家审核
@Override
public void updateStatus(String sellerId, String status) {
TbSeller tbSeller = sellerMapper.selectByPrimaryKey(sellerId);
tbSeller.setStatus(status);
sellerMapper.updateByPrimaryKey(tbSeller);
}
（3）在youlexuan_manager_web的 SellerController.java新增方法
@RequestMapping("/updateStatus")
public Result updateStatus(String sellerId, String status){
try {
sellerService.updateStatus(sellerId,status);
return new Result(true,"更行成功");
}catch (Exception e){
e.printStackTrace();
return new Result(false,"更新失败");
}
}
2.4.2 前端代码
修改youlexuan_manager_web 的 sellerService.js
//商家入驻审核 更新状态
this.updateStatus=function (sellerId,status) {
return $http.get('../seller/updateStatus.do?sellerId='+sellerId+'&status='+status);
}
修改youlexuan_manager_web的 sellerController.js
//商家入驻审核
$scope.updateStatus=function (sellerId,status) {
sellerService.updateStatus(sellerId,status).success(function(response){
if(response.success){
$scope.reloadList();//刷新列表
alert(response.message);
}else {
alert(response.message)
}
});
}
youlexuan_manager_web / webapp / admin / seller_1.html 修改按钮，调用方法
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click= "updateStatus(entity.sellerId,'1')">审核通过</button>
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true" ng-click="updateStatus(entity.sellerId,'2')">审核未通过</button>
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true" ng-click="updateStatus(entity.sellerId,'3')">关闭商家</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true" >关闭</button>
</div>
最终测试 http://localhost:9101/admin/index.html
① 审核通过
② 审核未通过
③ 关闭商家
由①②③ 审核后数据库显示 👇🏾👇🏾
问题：👉🏾👉🏾为啥是null
解决：👉🏾👉🏾 不要忘记这个等号哦 👇🏾👇🏾
三、商家系统登录与安全控制
3.1 需求分析
完成商家系统登陆与安全控制，商家账号来自数据库，并实现密码加密
3.2 自定义认证类
（1）模块youlexuan_shop_web 的pom.xml 增加如下依赖包
<!--spring security相关依赖包-->
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-web</artifactId>
<version>4.1.0.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-config</artifactId>
<version>4.1.0.RELEASE</version>
</dependency>
（2）youlexuan_shop_web 的web.xml 中配置SpringSecurity安全过滤器
<!--SpringSecurity过滤器-->
<filter>
<filter-name>springSecurityFilterChain</filter-name>
<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
</filter>
<filter-mapping>
<filter-name>springSecurityFilterChain</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
直接从 youlexuan_manager_web 下面 copy 后修改 如下
（3）shoplogin.html
shoplogin.html 完整代码： 👇🏾👇🏾
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>优乐选，欢迎登录</title>
<link rel="icon" href="assets/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/webbase.css" />
<link rel="stylesheet" type="text/css" href="css/pages-shoplogin.css" />
</head>
<body>
<div class="login-box">
<!--head-->
<div class="py-container logoArea">
<a href="" class="logo"></a>
</div>
<!--loginArea-->
<div class="loginArea">
<div class="login ">
<div class="py-container">
<div class="loginform">
<ul class="sui-nav nav-tabs tab-wraped">
<li>
<a href="#index" data-toggle="tab">
<h3>扫描登录</h3>
</a>
</li>
<li class="active">
<a href="#profile" data-toggle="tab">
<h3>账户登录</h3>
</a>
</li>
</ul>
<div class="tab-content tab-wraped">
<div id="index" class="tab-pane">
<p>二维码登录，暂为官网二维码</p>
<img src="img/wx_cz.jpg" />
</div>
<div id="profile" class="tab-pane active">
<form id="loginForm" class="sui-form" action="/login" method="post">
<div class="input-prepend"><span class="add-on loginname"></span>
<input id="prependedInput" name="username" type="text" placeholder="邮箱/用户名/手机号" class="span2 input-xfat">
</div>
<div class="input-prepend"><span class="add-on loginpwd"></span>
<input id="prependedInput" name="password" type="password" placeholder="请输入密码" class="span2 input-xfat">
</div>
<div class="setting">
<label class="checkbox inline"><input name="m1" type="checkbox" value="2" checked="">自动登录</label>
<span class="forget">忘记密码？</span>
</div>
<div class="logined">
<a class="sui-btn btn-block btn-xlarge btn-danger" target="_blank" onclick="document:loginForm.submit()">登 录</a>
</div>
</form>
<div class="otherlogin">
<div class="types">
<ul>
<li><img src="img/qq.png" width="35px" height="35px" /></li>
<li><img src="img/sina.png" /></li>
<li><img src="img/ali.png" /></li>
<li><img src="img/weixin.png" /></li>
</ul>
</div>
<span class="register"><a href="register.html" target="_blank">立即注册</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--foot-->
<div class="py-container copyright">
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>联系客服</li>
<li>商家入驻</li>
<li>营销中心</li>
<li>手机优乐选</li>
<li>销售联盟</li>
<li>优乐选社区</li>
</ul>
<div class="address">地址：深圳市福田区泰然科技园</div>
<div class="beian"><a href="https://beian.miit.gov.cn/#/Integrated/index">粤 ICP备2022521724311号-501</a> 京公网安备2022521724311号
</div>
</div>
</div>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/pages/shoplogin.js"></script>
</body>
</html>
浏览器输入 ：http://127.0.0.1:9102/shoplogin.html 用户名 ：zql 密码 ：123
（4）修改 youlexuan_shop_web下的 spring-security.xml
spring-security.xml 完整代码：
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/security"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security.xsd http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
<!-- 配置 favicon.ico不进行安全拦截-->
<http pattern="/favicon.ico" security="none"/>
<!-- 以下页面不被拦截 -->
<http pattern="/shoplogin.html" security="none"></http>
<http pattern="/css/**" security="none"></http>
<http pattern="/img/**" security="none"></http>
<http pattern="/js/**" security="none"></http>
<http pattern="/plugins/**" security="none"></http>
<!-- 页面拦截规则 -->
<http use-expressions="false">
<intercept-url pattern="/**" access="ROLE_SELLER" />
<form-login login-page="/shoplogin.html"
default-target-url="/admin/index.html" always-use-default-target="true"
authentication-failure-url="/shoplogin.html"/>
<csrf disabled="true"></csrf>
<headers>
<frame-options policy="SAMEORIGIN"/>
</headers>
<logout/>
</http>
<!-- 认证管理器 -->
<authentication-manager>
<authentication-provider user-service-ref="UserDetailsServiceImpl">
<!-- <user-service>
<user name="zql" password="123" authorities="ROLE_SELLER"/>
</user-service>-->
<!--加密配置②-->
<password-encoder ref="bcryptEncoder"></password-encoder>
</authentication-provider>
</authentication-manager>
<!-- 引用dubbo 服务 -->
<dubbo:application name="youlexuan_shop_web"/>
<dubbo:registry address="zookeeper://192.168.188.180:2181"/>
<dubbo:reference id="sellerService" interface="com.zql.sellergoods.service.SellerService"/>
<beans:bean id="UserDetailsServiceImpl" class="com.zql.service.UserDetailsServiceImpl">
<beans:property name="sellerService" ref="sellerService"/>
</beans:bean>
<!--密码加密配置 ①-->
<beans:bean id="bcryptEncoder"
class="org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder" />
</beans:beans>
（4）在 youlexuan_shop_web 创建 com.zql.service包，包下创建类 UserDetailsServiceImpl.java 实现SpringSecurity 的 UserDetailsService 接口，重写loadUserByUsername方法
注：UserDetailsService 是 spring security 中的类哦 ！！！
package com.zql.service;
import com.zql.pojo.TbSeller;
import com.zql.sellergoods.service.SellerService;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import java.util.ArrayList;
import java.util.List;
/**
* @Author:Daniel
* @Version 1.0
*/
public class UserDetailsServiceImpl implements UserDetailsService {
//因为要从zookeeper中获取所以无法使用注解
private SellerService sellerService;
public void setSellerService(SellerService sellerService) {
this.sellerService = sellerService;
}
@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
//定义一个角色集合
List<GrantedAuthority> grantedAuthorities = new ArrayList<>();
//声明一个ROLE_SELLER角色并将这个角色添加到集合中
grantedAuthorities.add(new SimpleGrantedAuthority("ROLE_SELLER")); //ROLE_SELLER 为spring security配置中的角色
//第一个用户名 第二个为密码 第三个为角色权限
//return new User(username,"123456",grantedAuthorities);
//从数据库中获取用户
TbSeller seller = sellerService.findOne(username);
if(username != null){
//获得状态，如果为 1 则为审核通过
if("1".equals(seller.getStatus())){
return new User(username,seller.getPassword(),grantedAuthorities);
}
}
return null;
}
}
3.3 密码加密
上面已经实现了再细细了解哈就 ok🤞🤞
3.3.1 BCrypt加密算法
用户表的密码通常使用MD5等不可逆算法加密后存储，为防止彩虹表破解更会先使用一个特定的字符串（如域名）加密，然后再使用一个随机的salt（盐值）加密。 特定字符串是程序代码中固定的，salt是每个密码单独随机，一般给用户表加一个字段单独存储，比较麻烦。 BCrypt算法将salt随机并混入最终加密后的密码，验证时也无需单独提供之前的salt，从而无需单独处理salt问题。
3.3.2 商家入驻密码加密
前面总结中已经开发了
商家申请入驻的密码要使用BCrypt算法进行加密存储，修改SellerController.java的add方法
//密码加密
BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
String password = passwordEncoder.encode(seller.getPassword());
seller.setPassword(password);
3.3.3 加密配置
（ 看3.2 （4）截图)
修改youlexuan_shop_web 的 spring-security.xml ，添加如下配置
<beans:bean id="bcryptEncoder"
class="org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder" />
修改认证管理器的配置
<password-encoder ref="bcryptEncoder"></password-encoder>
3.4 显示登录名
3.4.1 copy 上节实现代码
copy 2.3 主界面显示登陆人 到如下相应位置即可
3.4.2 页面admin/index.html上引入JS
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/service/loginService.js"></script>
<script type="text/javascript" src="../js/controller/indexController.js"></script>
ng-app="youlexuan" ng-controller="indexController" ng-init="showLoginName ()">
将页面上的测试用户 替换成 {{loginName}}
3.5 退出登录
参考 2.4 退出登录
开启三服务进行测试： http://127.0.0.1:9102/shoplogin.html
登录成功显示：👇🏾👇🏾
3.6 完整源码
register.html 完整代码 👇🏾👇🏾
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>商家入驻申请</title>
<link rel="stylesheet" type="text/css" href="css/webbase.css" />
<link rel="stylesheet" type="text/css" href="css/pages-register.css" />
<script type="text/javascript" src="plugins/angularjs/angular.min.js"> </script>
<script type="text/javascript" src="js/base.js"> </script>
<script type="text/javascript" src="js/service/sellerService.js"> </script>
<script type="text/javascript" src="js/controller/baseController.js"> </script>
<script type="text/javascript" src="js/controller/sellerController.js"> </script>
</head>
<body ng-app="youlexuan" ng-controller="sellerController">
<div class="register py-container ">
<!--head-->
<div class="logoArea">
<a href="" class="logo"></a>
</div>
<!--register-->
<div class="registerArea">
<h3>商家入驻申请<span class="go">我有账号，去<a href="shoplogin.html" target="_blank">登陆</a></span></h3>
<div class="info">
<form class="sui-form form-horizontal">
<div class="control-group">
<label class="control-label">登陆名（不可修改）：</label>
<div class="controls">
<input type="text" placeholder="登陆名" ng-model="entity.sellerId" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">登陆密码：</label>
<div class="controls">
<input type="password" placeholder="登陆密码" ng-model="entity.password" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">店铺名称：</label>
<div class="controls">
<input type="text" placeholder="店铺名称" ng-model="entity.nickName" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">公司名称：</label>
<div class="controls">
<input type="text" placeholder="公司名称" ng-model="entity.name" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">公司电话：</label>
<div class="controls">
<input type="text" placeholder="公司电话" ng-model="entity.telephone" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">公司详细地址：</label>
<div class="controls">
<input type="text" placeholder="公司详细地址" ng-model="entity.addressDetail" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">联系人姓名：</label>
<div class="controls">
<input type="text" placeholder="联系人姓名" ng-model="entity.linkmanName" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">联系人QQ：</label>
<div class="controls">
<input type="text" placeholder="联系人QQ" ng-model="entity.linkmanQq" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">联系人手机：</label>
<div class="controls">
<input type="text" placeholder="联系人手机" ng-model="entity.linkmanMobile" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">联系人EMAIL：</label>
<div class="controls">
<input type="text" placeholder="联系人EMAIL" ng-model="entity.linkmanEmail" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">营业执照号：</label>
<div class="controls">
<input type="text" placeholder="营业执照号" ng-model="entity.licenseNumber" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">税务登记证号：</label>
<div class="controls">
<input type="text" placeholder="税务登记证号" ng-model="entity.taxNumber" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">组织机构代码证：</label>
<div class="controls">
<input type="text" placeholder="组织机构代码证" ng-model="entity.orgNumber" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">法定代表人：</label>
<div class="controls">
<input type="text" placeholder="法定代表人" ng-model="entity.legalPerson" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">法定代表人身份证号：</label>
<div class="controls">
<input type="text" placeholder="法定代表人身份证号" ng-model="entity.legalPersonCardId" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">开户行名称：</label>
<div class="controls">
<input type="text" placeholder="开户行名称" ng-model="entity.bankUser" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">开户行支行：</label>
<div class="controls">
<input type="text" placeholder="开户行支行" ng-model="entity.bankName" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">银行账号：</label>
<div class="controls">
<input type="text" placeholder="银行账号" ng-model="entity.serialVersionUID" class="input-xfat input-xlarge">
</div>
</div>
<div class="control-group">
<label for="inputPassword" class="control-label"> </label>
<div class="controls">
<input name="m1" type="checkbox" value="2" checked=""><span>同意协议并注册 <a href="sampling.html">《优乐选商家入驻协议》</a></span>
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls btn-reg">
<a class="sui-btn btn-block btn-xlarge btn-danger" target="_blank" ng-click="save()">申请入驻</a> <!--href="./admin/home.html"-->
</div>
</div>
</form>
<div class="clearfix"></div>
</div>
</div>
<!--foot-->
<div class="py-container copyright">
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>联系客服</li>
<li>商家入驻</li>
<li>营销中心</li>
<li>手机优乐选</li>
<li>销售联盟</li>
<li>优乐选社区</li>
</ul>
<div class="address">地址：深圳市福田区泰然科技园</div>
<div class="beian"><a href="https://beian.miit.gov.cn/#/Integrated/index">粤 ICP备2022521724311号-501</a> 京公网安备2022521724311号
</div>
</div>
</div>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/pages/register.js"></script>
</body>
</html>
index.html 完整代码 👇🏾👇🏾
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商家后台管理系统</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 页面meta /-->
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/service/loginService.js"></script>
<script type="text/javascript" src="../js/controller/indexController.js"></script>
<script type="text/javascript">
function SetIFrameHeight() {
var iframeid = document.getElementById("iframe"); //iframe id
if (document.getElementById) {
iframeid.height = document.documentElement.clientHeight;
}
}
</script>
</head>
<body class="hold-transition skin-blue sidebar-mini" ng-app="youlexuan" ng-controller="indexController"
ng-init="showLoginName()">
<div class="wrapper">
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>优乐选</b></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>优乐选</b>商家后台</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">你有4个邮件</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<!-- start message -->
<a href="#">
<div class="pull-left">
<img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
系统消息
<small><i class="fa fa-clock-o"></i> 5 分钟前</small>
</h4>
<p>欢迎登录系统?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="../img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
团队消息
<small><i class="fa fa-clock-o"></i> 2 小时前</small>
</h4>
<p>你有新的任务了</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Developers
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Sales Department
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Reviewers
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">你有10个新消息</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<li>
<a href="#">
<i class="fa fa-warning text-yellow"></i> Very long description here that
may not fit into the page and may cause design problems
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users text-red"></i> 5 new members joined
</a>
</li>
<li>
<a href="#">
<i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user text-red"></i> You changed your username
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks: style can be found in dropdown.less -->
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">你有9个新任务</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%"
role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li>
<!-- Task item -->
<a href="#">
<h3>
Create a nice theme
<small class="pull-right">40%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%"
role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li>
<!-- Task item -->
<a href="#">
<h3>
Some task I need to do
<small class="pull-right">60%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-red" style="width: 60%"
role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li>
<!-- Task item -->
<a href="#">
<h3>
Make beautiful transitions
<small class="pull-right">80%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-yellow" style="width: 80%"
role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100">
<span class="sr-only">80% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="../img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">{{loginName}}</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
{{loginName}}
<small>最后登录 11:20AM</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a>
</div>
<div class="pull-right">
<a href="/logout" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>{{loginName}}</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a></li>
<!-- 菜单 -->
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i>
<span>基本管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="admin-login">
<a href="seller.html" target="iframe">
<i class="fa fa-circle-o"></i> 修改资料
</a>
</li>
<li id="admin-login">
<a href="password.html" target="iframe">
<i class="fa fa-circle-o"></i> 修改密码
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i>
<span>商品管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="admin-login">
<a href="goods_edit.html" target="iframe">
<i class="fa fa-circle-o"></i> 新增商品
</a>
</li>
<li id="admin-login">
<a href="goods.html" target="iframe">
<i class="fa fa-circle-o"></i> 商品管理
</a>
</li>
</ul>
</li>
<!-- 菜单 /-->
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<iframe width="100%" id="iframe" name="iframe" onload="SetIFrameHeight()"
frameborder="0" src="home.html"></iframe>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2022-2099 <a href="https://blog.csdn.net/weixin_42171159?spm=1010.2135.3001.5343">Welcome
to Daniel's blog</a>.</strong> All rights reserved.
</footer>
<!-- 底部导航 /-->
</div>
</body>
</html>
开发到当前的整个项目代码：8节及之前项目源码数据库
本文含有隐藏内容，请 开通VIP 后查看