今日目标:
1、实现面包屑功能
2、运营商添加spring-security安全框架
3、运营商登录显示名字,登出实现
4、商家是审核功能实现
一、面包屑功能实现
1、分析:首先我们通过自关联,根据parent_id找到了与之对应的下一个级数据,这样做的好处是,能够更好的管理表,不涉及外键,这是主流电商平台的建表思路。
如图我们通过上图可以分析出,通过点击下一个查询下一级,可以把当前id传过去,作为面包屑的父id,依次展示出这个商品的分类。
前台实现:通过自定义grade=1,让也页面刚开始就显示顶级分类,然后每次点击查询下一级,将当前的grade+1传到前台controller层,在面包屑上添加点击事件,通过点击显示当前分类下的子分类
导航栏数据结构:{id:"",name:""}
前台代码实现:
//定义级别 注意我们面包屑的存储数据结构是{id:"name"} key:value的形式
//首先定义一个grade=1
$scope.grade=1;
//对级别进行 赋值 通过传过来的grade值
$scope.setGrade=function (grade) {
$scope.grade=grade;
}
//对面包屑导航栏的级别和grade有关
//entity_p 为父分类的对象
$scope.selectCatList=function (entity_p) {
//如果是一级分类
if ($scope.grade==1){
$scope.entity_1=null;
$scope.entity_2=null;
}
//如果是二级分类
if ($scope.grade==2){
$scope.entity_1=entity_p;
$scope.entity_2=null;
}
//如果是一级分类
if ($scope.grade==3){
$scope.entity_2=entity_p;
}
//调用父id查询子分类 这个方法是通过顶级面包屑导航,查询子分类
$scope.findByParentId(entity_p.id);
}
页面添加点击事件,绑定参数
查询下级,我们通过调用两个方法
<button type="button" ng-if="grade!=3" ng-click="setGrade(grade+1);selectCatList(pojo)" class="btn bg-olive btn-xs" >查询下级</button>
在面包屑上添加点击事件:
<li>
<a href="#" ng-click="grade=1;selectCatList({id:0})">顶级分类列表</a>
</li>
<li>
<a href="#" ng-click="grade=2;selectCatList(entity_1)">{{entity_1.name}}</a>
</li>
<li>
<a href="#" ng-click="grade=3;selectCatList(entity_2)">{{entity_2.name}}</a>
</li>
selectCatList传递的是当前的实体类,我们需要根据实体类的name作为显示导航栏,id也存储在map集合种,因为,我们下次点击这个,就可以通过当前id找到查询的子类。
还有一个功能就是,当我们点击到第三级的时候,没有下一级了,我们如何让“查询下一级”不显示?
通过angularjs的命令 : ng-if(grade!=3) 作为判断条件
2、新增功能实现:
思路:通过一个变量记录上级的id,在保存的时候通过这个id来新增分类
前台页面:通过ng-if(grade>=2) 作为判断
<td>
顶级分类列表 <span ng-if="grade>=2"> >> </span> {{entity_1.name}} <span ng-if="grade==3"> >> </span> {{entity_2.name}}
</td>
实现分类的下拉列表的实现:
思路:通过调用findAll方法,查询所有的模板。
循环遍历下拉列表选项语法:
ng-options="type.id as type.name for type in typeTemplateList"
type.id:是下拉列表选项提交值
type.name:是下拉列表选项显示值
在这我们调用findAll方法,查询模板数据
//查找分类模板的关联的模板数据
$scope.findTemplateList=function () {
typeTemplateService.findAll().success(function (response) {
$scope.templateList=response;
})
}
注意一定要把typeTemplateService注入进来,在页面进行初始化,
ng-init="findByParentId(0);findTemplateList()"
注意在有一个非常重要的错误就是 添加
ng-model="entity.typeId" 如果不添加,则不会显示下拉列表 ,这个错误也不会报错,非常难调
<select placeholder="商品类型模板" ng-model="entity.typeId" class="form-control" ng-options="template.id as template.name for template in templateList"></select>
保存时,我们可以通过初始化父id ,通过页面传过来的值,赋值为父id
//记录当前分类的父id
$scope.parentId=0;
保存是赋值为parentId
//新增分类是;指定该跟类的父id
$scope.entity.parentId=$scope.parentId;
serviceObject=itemCatService.add( $scope.entity );//增加
注意:清空新建的里面的值ng-click=“entity={}”
3.修改功能是实现
直接添加findOne(pojo.id) 方法
4.删除功能的实现
注意:在servic判断如果有下一级则不能删除
service层的业务逻辑:
/**
* 批量删除
*/
@Override
public void delete(Long[] ids) {
//通过判断 id是否有下一级,如果有则不能删除,抛出异常
for(Long id:ids){
//查询出分类表的一条数据
TbItemCat tbItemCat = itemCatMapper.selectByPrimaryKey(id);
//获取父id
Long parentId = tbItemCat.getParentId();
TbItemCatExample example = new TbItemCatExample();
Criteria criteria = example.createCriteria();
criteria.andParentIdEqualTo(parentId);
//查询所有为父id的数据
List<TbItemCat> tbItemCats = itemCatMapper.selectByExample(example);
//如果大于一则不能删除,有下一级数据
if(tbItemCats.size()>1){
throw new RuntimeException("存在下一级数据不能删除");
}else{
itemCatMapper.deleteByPrimaryKey(id);
}
}
}
前台实现:
添加复选框的点击事件
<td><input type="checkbox" ng-click="updateSelection($event,pojo.id)" ></td>
添加删除的点击实现ng-click=delete()
二、安全框架
shiro 安全框架
两件事:1、认证 (登录) 你是谁? who are you?
2、授权 你能干什么? what can you do?
安全数据相关表设计:至少5张
用户、角色、权限 三张基础表
用户角色关联表
角色权限关联表
spring-security的使用步骤:
集成安全框架springsecurity
1、到导入相关依赖jar包 spring-security-web spring-security-config
2、编写核心配置文件 web.xml spring-security.xml
3、编写认证服务类 完成认证(登录)、授权操作
三、运营商登录
1.添加spring-security的jar包
spring-security-web
spring-security-config
2.添加核心配置文件
web.xml
spring-security.xml
四、商家入驻B2B2C模式
1.商家入驻
分析:首先映入我们所需要的资源,sellerController和sellerService还有baseController,商家所用到的所有静态资源.
后台:复制运营商的sellerController到商家中,因为后台的是同一个接口和service,所以后台已经写好了
前台:主要是数据的组装,在register页面映入需要的angularjs资源等.
绑定要提交的数据,添加点击事件.
前台:页面绑定
ng-model="entity.linkmanEmail"等等所有要提交的实体类
2.运营商审核
分析:通过查询status=0的展示列表 并通过详情对它进行设置审核的状态
后台:条件查询,把status=0的查询出来,返回给前台
前台:通过列表查询,并展示
一切资源映入后,进行绑定初始化方法,
ng-init="searchEntity={status:'0'}"进行调用,选项卡进行展示.
点击审核的进行修改状态,1表示通过,2表示未通过3.表示关闭,通过update的方法修改 更新状态值
后台编写:我们从新编写一个updteStatus方法进行更改,注意传递的参数有两个:一个是商家的id,一个是status的状态
后端核心代码:
//通过商家id跟新商家的状态
@Override
public void updateStatus(String sellerId, String status) {
//通过id查找该商家的实体类
TbSeller tbSeller = sellerMapper.selectByPrimaryKey(sellerId);
//设置状态
tbSeller.setStatus(status);
//跟新商家的状态
sellerMapper.updateByPrimaryKey(tbSeller);
}
前台核心代码:
//service层
//根据id修改商家status
this.updateStatus=function(sellerId,status){
return $http.get('../seller/updateStatus.do?sellerId='+sellerId+"&status="+status);
}
//controller层
//根据id跟新状态值
$scope.updateStatus=function(status){
//通过详情的实体类,获得id,因为实体类中已经存在了,
sellerService.updateStatus( $scope.entity.sellerId,status ).success(
function(response){
if(response.success){
$scope.reloadList();//刷新列表
}else{
alert(response.message);
}
}
);
}
//页面seller_1添加点击事件,通过传递一个status参数就行,因为点击详情的时候已经把该商家的所有信息都查找分装到实体类里了,所以直接在实体类中获得就行
<div class="modal-footer">
<button class="btn btn-success" ng-click="updateStatus('1')" data-dismiss="modal" aria-hidden="true">审核通过</button>
<button class="btn btn-danger" ng-click="updateStatus('2')" data-dismiss="modal" aria-hidden="true">审核未通过</button>
<button class="btn btn-danger" ng-click="updateStatus('3')" data-dismiss="modal" aria-hidden="true">关闭商家</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
五、常见错误条件
1.在配置文件没有添加
跨域请求伪造
<csrf disabled="true" />
出现错误如下:
因为是html页面不是jsp也页面所以找不到session页面
2.在spring-sccurity.xml种添加
always-use-default-target="true"
<!--always-use-default-target指定了是否在身份验证通过后总是跳转到 default-target-url 属性指
定的 URL。-->
3.添加html <iframe>框架标签,做页面布局。
同源 http://localhost:8081/admin/index.html
域:域名 协议、服务器IP地址、端口号
六、总结
1.面包屑功能的实现原理:通过点击下一级,传递当前id作为父id查询子id, 在页面初始化的时候,通过通过指定grade=1,让其默认显示顶级分类的以及列表,注意绑定的主句是key:value的形式,因为在点击导航的时候可以根据key值,查询其子分类的列表.
2.根据后台传递过来的数字,判断status,转化为中文显示
<span ng-if="pojo.status==0">待审核</span> <span ng-if="pojo.status==1">已审核</span> <span ng-if="pojo.status==3">审核未通过</span>