課程目標
- 目標1：運用AngularJS前端框架的常用指令
- 目標2：完成品牌管理的列表功能
- 目標3：完成品牌管理的分頁列表功能
- 目標4：完成品牌管理的增加功能
- 目標5：完成品牌管理的修改功能
- 目標6：完成品牌管理的刪除功能
- 目標7：完成品牌管理的條件查詢功能
–
1. 前端框架AngularJS入門
1.1 AngularJS簡介
AngularJS 誕生於2009年，由Misko Hevery 等人建立，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC、模組化、自動化雙向資料繫結、依賴注入等等。
1.2 AngularJS四大特徵
1.2.1 MVC模式
Angular遵循軟體工程的
MVC模式，並鼓勵展現，資料，和邏輯元件之間的鬆耦合，通過依賴注入（Dependency Injection），Angular為客戶端的Web應用帶來了傳統服務端的服務，例如獨立於檢視的控制。因此，後端減少了許多負擔，產生了更輕的Web應用。
Model：資料，其實就是angular變數($scope.XX)
View：資料的呈現，Html+Directive(指令)
Controller：運算元據，就是function，資料的增刪改查
1.2.2 雙向繫結
AngularJS 是建立在這樣的信念上的：即
宣告式程式設計應該用於構建使用者介面以及編寫軟體構建，而指令式程式設計非常適合來表示業務邏輯。框架採用並擴充套件了傳統HTML，通過雙向的資料繫結來適應動態內容，雙向的資料繫結允許模型和檢視之間的自動同步。因此，AngularJS使得對DOM的操作不再重要並提升了可測試性。
1.2.3 依賴注入
依賴注入(Dependency Injection,簡稱DI)是一種設計模式，指某個物件依賴的其他物件無需手工建立，只需要“吼一嗓子”，則此物件在建立時，其依賴的物件由框架來自動建立並注入進來，其實就是最少知識法則，模組中所有的service和provider兩類物件，都可以根據形參名稱實現DI。
1.2.4 模組化設計
高內聚低耦合法則
1) 官方提供的模組 — ng、ngRoute、ngAnimate
2) 使用者自定義的模組 — angular.module(`模組名`,[ ])
1.3 AngularJS入門小Demo
1.3.1 表示式指令
<html>
<head>
<title>AngularJS入門小Demo-1 表示式指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
執行結果如下：
表示式的寫法是{{表示式}} 表示式可以是變數或是運算式
ng-app 指令作用是告訴子元素指令是歸angularJs的，angularJs會識別的。
ng-app 指令定義了 AngularJS 應用程式的根元素。
ng-app 指令在網頁載入完畢時會自動引導（自動初始化）應用程式。
1.3.2 雙向繫結指令
<html>
<head>
<title>AngularJS入門小Demo-2 雙向繫結指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
請輸入你的姓名：<input ng-model="myname">
<br>
請輸入你的別名：<input ng-model="myname">
<br>
{{myname}},你好！
</body>
</html>
執行效果如下：
ng-model 指令用於繫結變數，這樣使用者在文字框輸入的內容會繫結到變數上，而表示式可以實時地輸出變數。
1.3.3 初始化指令
我們如果希望有些變數具有初始值，可以使用ng-init指令來對變數初始化。
<html>
<head>
<title>AngularJS入門小Demo-3 初始化指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="myname=`陳大海`">
請輸入你的姓名：<input ng-model="myname">
<br>
請輸入你的別名：<input ng-model="myname">
<br>
{{myname}},你好！
</body>
</html>
執行效果如下：
1.3.4 控制器指令
<html>
<head>
<title>AngularJS入門小Demo-4 控制器指令</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module(`myApp`,[]); // 定義了一個名叫myApp的模組
// 建立控制器
app.controller(`myController`,function($scope){
$scope.add=function(){
return parseInt($scope.x) + parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x">
y:<input ng-model="y">
運算結果：{{add()}}
</body>
</html>
執行結果如下：
ng-controller 用於指定所使用的控制器。
理解$scope：$scope的使用貫穿整個 AngularJS App 應用，它與資料模型相關聯，同時也是表示式執行的上下文。有了$scope就在檢視和控制器之間建立了一個通道，基於作用域檢視在修改資料時會立刻更新$scope，同樣的$scope發生改變時也會立刻重新渲染檢視。
1.3.5 事件指令
<html>
<head>
<title>AngularJS入門小Demo-5 事件指令</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module(`myApp`,[]); // 定義了一個名叫myApp的模組
// 建立控制器$scope.z
app.controller(`myController`,function($scope){
$scope.add=function(){
$scope.z = parseInt($scope.x) + parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x">
y:<input ng-model="y">
<button ng-click="add()">運算</button>
結果：{{z}}
</body>
</html>
執行結果：
ng-click 是最常用的單擊事件指令，再點選時觸發控制器的某個方法。
1.3.6 迴圈陣列
<html>
<head>
<title>AngularJS入門小Demo-6 迴圈陣列</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module(`myApp`,[]); // 定義了一個名叫myApp的模組
// 建立控制器$scope.z
app.controller(`myController`,function($scope){
$scope.list= [100,192,203,434]; // 定義陣列
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
執行結果如下：
這裡的ng-repeat指令用於迴圈陣列變數。
1.3.7 迴圈物件陣列
<html>
<head>
<title>AngularJS入門小Demo-7 迴圈物件陣列</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module(`myApp`,[]); // 定義了一個名叫myApp的模組
// 建立控制器$scope.z
app.controller(`myController`,function($scope){
$scope.list= [
{name:`張三`,shuxue:99,yuwen:93},
{name:`李四`,shuxue:88,yuwen:87},
{name:`王五`,shuxue:77,yuwen:56}
]; // 定義陣列
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>數學</td>
<td>語文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
執行結果如下：
1.3.8 內建服務
我們的資料一般都是從後端獲取的，那麼如何獲取資料呢？我們一般使用內建服務$http來實現。注意：以下程式碼需要在tomcat中執行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS入門小Demo-8 內建服務</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module(`myApp`,[]); // 定義了一個名叫myApp的模組
// 定義控制器
app.controller(`myController`,function($scope,$http){
$scope.findAll=function(){
$http.get(`data.json`).success(
function(response){
$scope.list=response;
}
);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<table>
<tr>
<td>姓名</td>
<td>數學</td>
<td>語文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
建立檔案 data.json，注意json檔案格式，key必須有雙引號，末尾沒有逗號。
[
{"name":"張三","shuxue":99,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"趙六","shuxue":59,"yuwen":70}
]
執行結果如下：
2. 品牌列表的實現
2.1 需求分析
實現品牌列表的查詢（不用分頁和條件查詢）效果如下：
2.2 前端程式碼
2.2.1 拷貝頁面資源
將“資源/靜態原型/運營商管理後臺”下的頁面資源拷貝到pinyougou-manager-web下：
其中plugins資料夾中包括了angularjs、bootstrap、jQuery等常用前端庫，我們將在專案中用到。
2.2.2 引入JS
修改brand.html ，引入JS
<!-- 引入angularjs檔案 -->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
2.2.3 指定模組和控制器
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController">
ng-app 指令中定義的就是模組的名稱。
ng-controller 指令用於為你的應用新增的控制器。
在控制器中，你可以編寫程式碼，製作函式和變數，並使用 scope 物件來訪問。
2.2.4 編寫JS程式碼
<script type="text/javascript">
var app=angular.module(`pinyougou`,[]); // 定義品優購模組
app.controller(`brandController`,function($scope,$http){ // 定義控制器
// 讀取品牌列表資料繫結到表單中
$scope.finAll=function(){
$http.get(`../brand/findAll.do`).success(
function(response){
$scope.list=response;
}
);
}
});
</script>
2.2.5 迴圈顯示錶格資料
<!--資料列表-->
<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="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改</button>
</td>
</tr>
</tbody>
</table>
2.2.6 初始化呼叫
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" ng-init="findAll()">
3. 品牌列表分頁的實現
3.1 需求分析
在品牌管理下方放置分頁欄，實現品牌分頁功能
3.2 後端程式碼
後端給前端的資料有：
1）total：總記錄數。
2）rows：當前頁記錄的集合。
json資料格式：{"total":100,"rows":[{"id":1,"name":"張三"},{"id":2,"name":"李四"}]}
方法一：在後端將查詢到的資料封裝成Map集合
Map map = new HashMap();
map.put("total",1000);
map.put("rows",list);
return map;
fastjson會自動轉換Map集合資料。
方法二：建立分頁查詢時返回的結果類（包裝類）來進行接收，該類包含total和rows屬性。
3.2.1 將從資料庫查詢的分頁結果封裝實體
在 pinyougou-pojo 工程中建立 entity包，用於存放通用實體類，建立類PageResult
package entity;
import java.io.Serializable;
import java.util.List;
/**
* 資料庫分頁查詢時返回的結果類（包裝類）
* @author chenmingjun
* @date 2019年1月14日
*/
public class PageResult implements Serializable {
private Long total; // 總記錄數
private List<?> rows; // 當前頁記錄的集合
private static final long serialVersionUID = 1L;
public PageResult() {
super();
}
public PageResult(Long total, List<?> rows) {
super();
this.total = total;
this.rows = rows;
}
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public List<?> getRows() {
return rows;
}
public void setRows(List<?> rows) {
this.rows = rows;
}
@Override
public String toString() {
return "EasyUIDataGridResult [total=" + total + ", rows=" + rows + "]";
}
}
3.2.2 服務介面層
在 pinyougou-sellergoods-interface 的 BrandService.java 增加方法定義
/**
* 分頁查詢全部品牌列表
* @param pageNum 當前頁的頁碼
* @param pageSize 每頁要顯示的記錄數
* @return PageResult
*/
PageResult findPage(Integer pageNum, Integer pageSize);
3.2.3 服務實現層
在 pinyougou-sellergoods-service 的 BrandServiceImpl.java 中實現該方法
@Override
public PageResult findPage(Integer pageNum, Integer pageSize) {
// 設定分頁資訊，使用PageHelper分頁外掛
PageHelper.startPage(pageNum, pageSize);
// 執行查詢，不需要設定查詢條件，即查詢所有
TbBrandExample example = new TbBrandExample();
List<TbBrand> list = brandMapper.selectByExample(example);
// 取出分頁資訊，分頁後，實際返回的結果list型別是Page<E>，如果想取出分頁資訊
// 方式一：需要強制轉換為Page<E>後，使用Page物件進行處理
// Page<TbBrand> page = (Page<TbBrand>) list;
// return new PageResult(page.getTotal(), page.getResult());
// 方式二：我們使用PageInfo物件對查詢出來的結果進行包裝，由於PageInfo中包含了非常全面的分頁屬性，推薦使用方式二
PageInfo<TbBrand> pageInfo = new PageInfo<>(list);
// 建立分頁查詢時返回的結果類物件
PageResult result = new PageResult();
// 給返回的查詢結果物件設定值(即封裝資料)
result.setTotal(pageInfo.getTotal());
result.setRows(list);
return result;
}
PageHelper為MyBatis分頁外掛。
3.2.4 控制層
在 pinyougou-manager-web 工程的 BrandController.java 新增方法
@RequestMapping("/findPage")
public PageResult findPage(int page, int rows) {
PageResult result = brandService.findPage(page, rows);
return result;
}
3.3 前端程式碼
前端給後端的資料有：
1）page：當前頁的頁碼，從1開始。
2）rows：每頁要顯示的記錄數。
注意：此處的rows與上處的rows的含義區別。
3.3.1 HTML
在brand.html引入分頁元件
<!-- 分頁元件開始 -->
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script src="../plugins/angularjs/pagination.js"></script>
<!-- 分頁元件結束 -->
引入分頁模組
var app=angular.module(`pinyougou`,[`pagination`]); // 定義品優購模組、引入分頁模組
頁面的表格下放置分頁控制元件
<!--分頁控制元件-->
<tm-pagination conf="paginationConf"></tm-pagination>
3.3.2 JS程式碼
在控制器 brandController 中新增如下程式碼
// 分頁控制元件初始化配置
$scope.paginationConf={
currentPage: 1, // currentPage:當前頁 (初始化)
totalItems: 10, // totalItems:總記錄數(初始化)
itemsPerPage: 10, // itemsPerPage:每頁記錄數(初始化)
perPageOptions: [10, 20, 30, 40, 50], // perPageOptions:分頁選項(初始化)
onChange: function(){ // onChange:當頁碼變更後自動觸發的方法
$scope.reloadList();
}
};
// 重新整理列表方法
$scope.reloadList=function(){
$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}
// 分頁方法，作用是請求後端資料
$scope.findPage=function(page,rows){ // 方法名findPage可以自定義
$http.get(`../brand/findPage.do?page=`+page+`&rows=`+rows).success(
function(response){ // 注意：請求引數中的rows與響應資料的rows的區別
$scope.list=response.rows; // 顯示當前頁資料
$scope.paginationConf.totalItems=response.total; // 更新總記錄數
}
);
}
在頁面的body元素上去掉ng-init指令的呼叫。
4. 增加品牌
4.1 需求分析
實現品牌增加功能
4.2 後端程式碼
4.2.1 服務介面層
在 pinyougou-sellergoods-interface 的 BrandService.java 新增方法定義
/**
* 增加品牌
* @param brand
*/
void add(TbBrand brand);
4.2.2 服務實現層
在 com.pinyougou.sellergoods.service.impl 的 BrandServiceImpl.java 實現該方法
@Override
public void add(TbBrand brand) {
// 判斷品牌名稱是否重複：方法一：程式碼邏輯上判斷，如下；方法二：資料庫設定品牌表的name屬性為唯一約束
TbBrandExample example = new TbBrandExample();
Criteria criteria = example.createCriteria();
criteria.andNameEqualTo(brand.getName());
List<TbBrand> list = brandMapper.selectByExample(example);
// 判斷查詢結果
if (list == null || list.size() == 0) {
// 品牌不存在，則新增品牌
brandMapper.insert(brand);
} else {
// 品牌已存在，則丟擲自定義異常資訊“品牌已存在”
}
}
4.2.3 將控制層執行的結果封裝實體
在 pinyougou-pojo 的 entity包下建立類Result.java
/**
* 自定義的返回結果
* @author chenmingjun
* @date 2019年1月15日
*/
public class Result implements Serializable{
private static final long serialVersionUID = 1L;
private Boolean success; // 是否成功
private String message; // 返回資訊
public Result(Boolean success, String message) {
super();
this.success = success;
this.message = message;
}
public Boolean getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
@Override
public String toString() {
return "Result [success=" + success + ", message=" + message + "]";
}
}
4.2.4 控制層
在 pinyougou-manager-web 的 BrandController.java 中新增方法
@RequestMapping("/add")
public Result add(@RequestBody TbBrand brand){
try {
brandService.add(brand);
return new Result(true, "增加品牌成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "增加品牌失敗");
}
}
4.3 前端程式碼
4.3.1 JS程式碼
// 新增品牌方法
$scope.save=function(){
$http.post(`../brand/add.do`,$scope.entity).success(
function(response){
if(response.success){
$scope.reloadList(); // 重新整理列表方法
}else{
alert(response.message);
}
}
);
}
4.3.2 HTML
繫結表單元素，我們用ng-model指令，繫結按鈕的單擊事件我們用ng-click指令
<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">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>品牌名稱</td>
<td><input class="form-control" placeholder="品牌名稱" ng-model="entity.name"></td>
</tr>
<tr>
<td>首字母</td>
<td><input class="form-control" placeholder="首字母" ng-model="entity.firstChar"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">儲存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">關閉</button>
</div>
</div>
為了每次開啟視窗沒有遺留上次的資料，我們可以修改新建按鈕，對entity變數進行清空操作
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={}">
<i class="fa fa-file-o"></i> 新建
</button>
5. 修改品牌
5.1 需求分析
點選列表的修改按鈕，彈出視窗，修改資料後點“儲存”執行儲存操作
5.2 後端程式碼
5.2.1 服務介面層
在 pinyougou-sellergoods-interface 的 BrandService.java 新增方法定義
/**
* 根據品牌ID查詢品牌實體
* @param id
* @return
*/
TbBrand findOne(Long id);
/**
* 修改（更新）品牌
* @param brand
*/
void update(TbBrand brand);
5.2.2 服務實現層
在 pinyougou-sellergoods-service 的 BrandServiceImpl.java 新增方法實現
@Override
public TbBrand findOne(Long id) {
TbBrand brand = brandMapper.selectByPrimaryKey(id);
return brand;
}
@Override
public void update(TbBrand brand) {
brandMapper.updateByPrimaryKey(brand);
}
5.2.3 控制層
在 pinyougou-manager-web 的 BrandController.java 新增方法
@RequestMapping("/findOne")
public TbBrand findOne(Long id) {
TbBrand brand = brandService.findOne(id);
return brand;
}
@RequestMapping("/update")
public Result update(@RequestBody TbBrand brand){
try {
brandService.update(brand);
return new Result(true, "修改品牌成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "修改品牌失敗");
}
}
5.3 前端程式碼
5.3.1 實現資料查詢
增加JS程式碼
// 根據品牌ID查詢某一個品牌實體方法，用於回顯資料
$scope.findOne=function(id){
$http.get(`../brand/findOne.do?id=`+id).success(
function(response){
$scope.entity=response;
}
);
}
修改列表中的“修改”按鈕，呼叫此方法執行查詢實體的操作
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
</td>
5.3.2 儲存資料
修改JS的save方法
// 新增/修改品牌方法
$scope.save=function(){
// 方式一：可以在前端判斷是新增方法還是修改方法，方式二：可以在後端判斷是新增方法還是修改方法
var methodName=`add`;
if($scope.entity.id!=null){ // 如果有ID
methodName=`update`; // 則執行修改方法
}
$http.post(`../brand/`+methodName+`.do`,$scope.entity).success(
function(response){
if(response.success){
$scope.reloadList(); // 重新整理列表方法
}else{
alert(response.message);
}
}
);
}
6. 刪除品牌
6.1 需求分析
點選列表前的核取方塊，點選刪除按鈕，刪除選中的品牌。
6.2 後端程式碼
6.2.1 服務介面層
在 pinyougou-sellergoods-interface 的 BrandService.java 介面定義方法
/**
* 根據品牌ID批量刪除品牌
* @param ids
*/
void delete(Long[] ids);
6.2.2 服務實現層
在 pinyougou-sellergoods-service 的 BrandServiceImpl.java 實現該方法
@Override
public void delete(Long[] ids) {
for (Long id : ids) {
brandMapper.deleteByPrimaryKey(id);
}
}
6.2.3 控制層
在 pinyougou-manager-web 的 BrandController.java 中增加方法
@RequestMapping("/delete")
public Result delete(Long[] ids) {
try {
brandService.delete(ids);
return new Result(true, "刪除品牌成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "刪除品牌失敗");
}
}
6.3 前端程式碼
6.3.1 JS程式碼
主要思路：我們需要定義一個用於儲存選中ID的陣列，當我們點選核取方塊後判斷是選擇還是取消選擇，如果是選擇就加到陣列中，如果是取消選擇就從陣列中移除。再點選刪除按鈕時需要用到這個儲存了ID的陣列。
這裡我們補充一下JS的關於陣列操作的知識
（1）陣列的push方法：向陣列中新增元素
（2）陣列的splice方法：從陣列的指定位置移除指定個數的元素 ，引數1為移除元素的開始位置，引數2為移除的個數
（3）核取方塊的checked屬性：用於判斷是否被選中
// 獲取使用者點選品牌ID的方法
$scope.selectIds=[]; // 使用者勾選的ID集合
$scope.updateSelection=function($event,id){
if($event.target.checked){ // 被勾選的元素
$scope.selectIds.push(id); // 才向陣列中新增
}else{
var index = $scope.selectIds.indexOf(id); // 查詢陣列中元素的指定位置，索引從0開始
$scope.selectIds.splice(index,1); // 引數1為移除元素的開始位置，引數2為移除的個數
}
}
// 刪除品牌的方法
$scope.dele=function(){
$http.get(`../brand/delete.do?ids=`+$scope.selectIds).success(
function(response){
if(response.success){
$scope.reloadList(); // 重新整理列表方法
}else{
alert(response.message);
}
}
);
}
6.3.2 HTML
（1）修改列表的核取方塊
<td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td>
（2）修改刪除按鈕
<button type="button" class="btn btn-default" title="刪除" ng-click="dele()">
<i class="fa fa-trash-o"></i> 刪除
</button>
7. 品牌分頁條件查詢的實現
7.1 需求分析
實現品牌條件查詢功能，輸入品牌名稱、首字母后查詢，並分頁。
7.2 後端程式碼
7.2.1 服務介面層
在 pinyougou-sellergoods-interface 工程的 BrandService.java 方法增加方法定義
/**
* 分頁條件查詢全部品牌列表
* @param brand 品牌實體類（查詢條件）
* @param pageNum 當前頁的頁碼
* @param pageSize 每頁要顯示的記錄數
* @return PageResult
*/
PageResult findPage(TbBrand brand, Integer pageNum, Integer pageSize);
7.2.2 服務實現層
在pinyougou-sellergoods-service工程BrandServiceImpl.java實現該方法
@Override
public PageResult findPage(TbBrand brand, Integer pageNum, Integer pageSize) {
// 設定分頁資訊，使用PageHelper分頁外掛
PageHelper.startPage(pageNum, pageSize);
// 執行查詢，需要設定查詢條件，即條件查詢
TbBrandExample example = new TbBrandExample();
Criteria criteria = example.createCriteria();
if (brand != null) {
if (brand.getName() != null && brand.getName().length() > 0) {
criteria.andNameLike("%" + brand.getName() + "%");
}
if (brand.getFirstChar() != null && brand.getFirstChar().length() > 0) {
criteria.andFirstCharLike("%" + brand.getFirstChar() + "%");
}
}
List<TbBrand> list = brandMapper.selectByExample(example);
// 取出分頁資訊，分頁後，實際返回的結果list型別是Page<E>，如果想取出分頁資訊
// 方式一：需要強制轉換為Page<E>後，使用Page物件進行處理
// Page<TbBrand> page = (Page<TbBrand>) list;
// return new PageResult(page.getTotal(), page.getResult());
// 方式二：我們使用PageInfo物件對查詢出來的結果進行包裝，由於PageInfo中包含了非常全面的分頁屬性，推薦使用方式二
PageInfo<TbBrand> pageInfo = new PageInfo<>(list);
// 建立分頁查詢時返回的結果類物件
PageResult result = new PageResult();
// 給返回的查詢結果物件設定值(即封裝資料)
result.setTotal(pageInfo.getTotal());
result.setRows(list);
return result;
}
7.2.3 控制層
在 pinyougou-manager-web 的 BrandController.java 增加方法
@RequestMapping("/search")
public PageResult search(@RequestBody TbBrand brand, Integer page, Integer rows) {
PageResult result = brandService.findPage(brand, page, rows);
return result;
}
7.3 前端程式碼
JS中新增品牌條件查詢的方法
$scope.searchEntity={}; // 初始化搜尋物件
// 品牌條件查詢的方法
$scope.search=function(page,rows){
$http.post(`../brand/search.do?page=`+page+`&rows=`+rows,$scope.searchEntity).success(
function(response){ // 注意：請求引數中的rows與響應資料的rows的區別
$scope.list=response.rows; // 顯示當前頁資料
$scope.paginationConf.totalItems=response.total; // 更新總記錄數
}
);
}
修改 reloadList() 方法
// 重新整理列表方法
$scope.reloadList=function(){
$scope.search($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
將查詢按鈕繫結的方法search()修改為reloadList()方法
<div class="has-feedback">
品牌名稱：<input ng-model="searchEntity.name"> 品牌首字母：<input ng-model="searchEntity.firstChar">
<button class="btn btn-default" ng-click="reloadList()">查詢</button>
</div>
8. 附錄
完整的前端JS程式碼 brand.html
檔案位置：/pinyougou-manager-web/src/main/webapp/admin/brand.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>品牌管理</title>
<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>
<!-- 引入angularjs檔案 -->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<!-- 分頁元件開始 -->
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script src="../plugins/angularjs/pagination.js"></script>
<!-- 分頁元件結束 -->
<script type="text/javascript">
var app=angular.module(`pinyougou`,[]); // 定義品優購模組
app.controller(`brandController`,function($scope,$http){ // 定義控制器
// 讀取品牌列表資料繫結到表單中
$scope.finAll=function(){
$http.get(`../brand/findAll.do`).success(
function(response){
$scope.list=response;
}
);
}
});
// 分頁控制元件初始化配置
$scope.paginationConf={
currentPage: 1, // currentPage:當前頁 (初始化)
totalItems: 10, // totalItems:總記錄數(初始化)
itemsPerPage: 10, // itemsPerPage:每頁記錄數(初始化)
perPageOptions: [10, 20, 30, 40, 50], // perPageOptions:分頁選項(初始化)
onChange: function(){ // onChange:當頁碼變更後自動觸發的方法
$scope.reloadList();
}
};
// 重新整理列表方法
$scope.reloadList=function(){
$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}
// 分頁方法，作用是請求後端資料
$scope.findPage=function(page,rows){ // 方法名findPage可以自定義
$http.get(`../brand/findPage.do?page=`+page+`&rows=`+rows).success(
function(response){ // 注意：請求引數中的rows與響應資料的rows的區別
$scope.list=response.rows; // 顯示當前頁資料
$scope.paginationConf.totalItems=response.total; // 更新總記錄數
}
);
}
// 新增/修改品牌方法
$scope.save=function(){
// 方式一：可以在前端判斷是新增方法還是修改方法，方式二：可以在後端判斷是新增方法還是修改方法
var methodName=`add`;
if($scope.entity.id!=null){ // 如果有ID
methodName=`update`; // 則執行修改方法
}
$http.post(`../brand/`+methodName+`.do`,$scope.entity).success(
function(response){
if(response.success){
$scope.reloadList(); // 重新整理列表方法
}else{
alert(response.message);
}
}
);
}
// 根據品牌ID查詢某一個品牌實體方法，用於回顯資料
$scope.findOne=function(id){
$http.get(`../brand/findOne.do?id=`+id).success(
function(response){
$scope.entity=response;
}
);
}
// 獲取使用者點選品牌ID的方法
$scope.selectIds=[]; // 使用者勾選的ID集合
$scope.updateSelection=function($event,id){
if($event.target.checked){ // 被勾選的元素
$scope.selectIds.push(id); // 才向陣列中新增
}else{
var index = $scope.selectIds.indexOf(id); // 查詢陣列中元素的指定位置，索引從0開始
$scope.selectIds.splice(index,1); // 引數1為移除元素的開始位置，引數2為移除的個數
}
}
// 刪除品牌的方法
$scope.dele=function(){
$http.get(`../brand/delete.do?ids=`+$scope.selectIds).success(
function(response){
if(response.success){
$scope.reloadList(); // 重新整理列表方法
}else{
alert(response.message);
}
}
);
}
$scope.searchEntity={}; // 初始化搜尋物件
// 品牌條件查詢的方法
$scope.search=function(page,rows){
$http.post(`../brand/search.do?page=`+page+`&rows=`+rows,$scope.searchEntity).success(
function(response){ // 注意：請求引數中的rows與響應資料的rows的區別
$scope.list=response.rows; // 顯示當前頁資料
$scope.paginationConf.totalItems=response.total; // 更新總記錄數
}
);
}
</script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController">
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">品牌管理</h3>
</div>
<div class="box-body">
<!-- 資料表格 -->
<div class="table-box">
<!--工具欄-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={}">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title="刪除" ng-click="dele()">
<i class="fa fa-trash-o"></i> 刪除
</button>
<button type="button" class="btn btn-default" title="重新整理" onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 重新整理
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
品牌名稱：<input ng-model="searchEntity.name"> 品牌首字母：<input ng-model="searchEntity.firstChar">
<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="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
</td>
</tr>
</tbody>
</table>
<!--資料列表/-->
<!-- {{selectIds}} -->
<!--分頁控制元件-->
<tm-pagination conf="paginationConf"></tm-pagination>
</div>
<!-- 資料表格 /-->
</div>
<!-- /.box-body -->
<!-- 編輯視窗 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<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">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>品牌名稱</td>
<td><input class="form-control" placeholder="品牌名稱" ng-model="entity.name"></td>
</tr>
<tr>
<td>首字母</td>
<td><input class="form-control" placeholder="首字母" ng-model="entity.firstChar"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">儲存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">關閉</button>
</div>
</div>
</div>
</div>
</body>
</html>