品優購 第二天
品牌管理
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入門小Demo
1.3.1 表達式
{{100+100}}
執行結果如下：
表達式的寫法是{{表達式 }} 表達式可以是變量或是運算式
ng-app 指令 作用是告訴子元素一下的指令是歸angularJs的,angularJs會識別的
ng-app 指令定義了 AngularJS 應用程序的 根元素。
ng-app 指令在網頁加載完畢時會自動引導（自動初始化）應用程序。
1.3.2 雙向綁定
請輸入你的姓名：
{{myname}},你好
運行效果如下：
ng-model 指令用於綁定變量,這樣用戶在文本框輸入的內容會綁定到變量上，而表達式可以實時地輸出變量。
1.3.3 初始化指令
我們如果希望有些變量具有初始值，可以使用ng-init指令來對變量初始化
請輸入你的姓名：
{{myname}},你好
1.3.4 控制器
var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊
//定義控制器
app.controller('myController',function($scope){
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y);
}
});
x:
y:
運算結果：{{add()}}
運行結果如下：
ng-controller用於指定所使用的控制器。
理解 $scope：
$scope 的使用貫穿整個 AngularJS App 應用,它與數據模型相關聯,同時也是表達式執行的上下文.有了$scope 就在視圖和控制器之間建立了一個通道,基於作用域視圖在修改數據時會立刻更新 $scope,同樣的$scope 發生改變時也會立刻重新渲染視圖.
1.3.5 事件指令
var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊
//定義控制器
app.controller('myController',function($scope){
$scope.add=function(){
$scope.z= parseInt($scope.x)+parseInt($scope.y);
}
});
x:
y:
結果：{{z}}
運行結果：
ng-click 是最常用的單擊事件指令，再點擊時觸發控制器的某個方法
1.3.6 循環數組
var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊
//定義控制器
app.controller('myController',function($scope){
$scope.list= [100,192,203,434 ];//定義數組
});
| {{x}} |
這裏的ng-repeat指令用於循環數組變量。
運行結果如下：
1.3.7 循環對象數組
var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊
//定義控制器
app.controller('myController',function($scope){
$scope.list= [
{name:'張三',shuxue:100,yuwen:93},
{name:'李四',shuxue:88,yuwen:87},
{name:'王五',shuxue:77,yuwen:56}
];//定義數組
});
| 姓名 | 數學 | 語文 |
| {{entity.name}} | {{entity.shuxue}} | {{entity.yuwen}} |
運行結果如下：
1.3.8 內置服務
我們的數據一般都是從後端獲取的，那麼如何獲取數據呢？我們一般使用內置服務$http來實現。注意：以下代碼需要在tomcat中運行。
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;
}
);
}
});
| 姓名 | 數學 | 語文 |
| {{entity.name}} | {{entity.shuxue}} | {{entity.yuwen}} |
建立文件 data.json
[
{"name":"張三","shuxue":100,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"趙六","shuxue":67,"yuwen":86}
]
2.品牌列表的實現
2.1需求分析
實現品牌列表的查詢（不用分頁和條件查詢）效果如下：
2.2前端代碼
2.2.1拷貝資源
將“資源/靜態原型/運營商管理後臺”下的頁面資源拷貝到pinyougou-manager-web下
其中plugins文件夾中包括了angularJS 、bootstrap、JQuery等常用前端庫，我們將在項目中用到
2.2.2引入JS
修改brand.html ，引入JS
2.2.3指定模塊和控制器
ng-app="pinyougou" ng-controller="brandController">
ng-app 指令中定義的就是模塊的名稱
ng-controller 指令用於爲你的應用添加控制器。
在控制器中，你可以編寫代碼，製作函數和變量，並使用 scope 對象來訪問。
2.2.4編寫JS代碼
var app=angular.module('pinyougou', []);//定義模塊
app.controller('brandController' ,function($scope,$http){
//讀取列表數據綁定到表單中
$scope.findAll=function(){
$http.get('../brand/findAll.do').success(
function(response){
$scope.list=response;
}
);
}
});
2.2.5循環顯示錶格數據
2.2.6初始化調用
3.品牌列表分頁的實現
3.1需求分析
在品牌管理下方放置分頁欄，實現分頁功能
3.2後端代碼
3.2.1 分頁結果封裝實體
在pinyougou-pojo工程中創建entity包，用於存放通用實體類，創建類PageResult
package entity;
import java.util.List;
/**
* 分頁結果封裝對象
* @author Administrator
*
*/
public class PageResult implements Serializable{
private long total;//總記錄數
private List rows;//當前頁結果
public PageResult(long total, List rows) {
super();
this.total = total;
this.rows = rows;
}
//getter and setter .....
}
3.2.2 服務接口層
在pinyougou-sellergoods-interface的BrandService.java 增加方法定義
/**
* 返回分頁列表
* @return
*/
public PageResult findPage(int pageNum,int pageSize);
3.2.3 服務實現層
在pinyougou-sellergoods-service的BrandServiceImpl.java中實現該方法
@Override
public PageResult findPage(int pageNum, int pageSize) {
PageHelper.startPage(pageNum, pageSize);
Page
return new PageResult(page.getTotal(), page.getResult());
}
PageHelper爲MyBatis分頁插件
3.2.4 控制層
在pinyougou-manager-web工程的BrandController.java新增方法
/**
* 返回全部列表
* @return
*/
@RequestMapping("/findPage")
public PageResult findPage(int page,int rows){
return brandService.findPage(page, rows);
}
3.3前端代碼
3.3.1 HTML
在brand.html引入分頁組件
構建app模塊時引入pagination模塊
var app=angular.module('pinyougou',['pagination']);//定義品優購模塊
頁面的表格下放置分頁組件
3.3.2 JS代碼
在brandController中添加如下代碼
//重新加載列表 數據
$scope.reloadList=function(){
//切換頁碼
$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
//分頁控件配置
$scope.paginationConf = {
currentPage: 1,
totalItems: 10,
itemsPerPage: 10,
perPageOptions: [10, 20, 30, 40, 50],
onChange: function(){
$scope.reloadList();//重新加載
}
};
//分頁
$scope.findPage=function(page,rows){
$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新總記錄數
}
);
}
在頁面的body元素上去掉ng-init指令的調用
paginationConf 變量各屬性的意義：
currentPage：當前頁碼
totalItems:總條數
itemsPerPage:
perPageOptions：頁碼選項
onChange：更改頁面時觸發事件
4.增加品牌
4.1需求分析
實現品牌增加功能
4.2後端代碼
4.2.1 服務接口層
在pinyougou-sellergoods-interface的BrandService.java新增方法定義
/**
* 增加
*/
public void add(TbBrand brand);
4.2.2 服務實現層
在com.pinyougou.sellergoods.service.impl的BrandServiceImpl.java實現該方法
@Override
public void add(TbBrand brand) {
brandMapper.insert(brand);
}
4.2.3 執行結果封裝實體
在pinyougou-pojo的entity包下創建類Result.java
package entity;
import java.io.Serializable;
/**
* 返回結果封裝
* @author Administrator
*
*/
public class Result implements Serializable{
private boolean success;
private String message;
public Result(boolean success, String message) {
super();
this.success = success;
this.message = message;
}
//getter and setter.....
}
4.2.4 控制層
在pinyougou-manager-web的BrandController.java中新增方法
/**
* 增加
* @param brand
* @return
*/
@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
品牌編輯
| 品牌名稱 | |
| 首字母 |
