電商專案day05(麵包屑功能實現&安全框架&商家入駐稽核)
今日目標:
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-config2.新增核心配置檔案
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>