課程目標(biāo)

目標(biāo)1：理解和運用angularJS的service

目標(biāo)2：理解和運用控制器繼承

目標(biāo)3：掌握代碼生成器的使用

目標(biāo)4：實現(xiàn)規(guī)格管理

目標(biāo)5：實現(xiàn)模板管理

1.前端分層開發(fā)

1.1 需求分析

我們在上次課學(xué)習(xí)了angularJS并完成的品牌管理的增刪改查功能。但是我們看代碼，JS和html都放在一起，并不利于我們后期的維護(hù)。我們可以在前端代碼中也運用MVC的設(shè)計模式，將代碼進(jìn)行分離，提高程序的可維護(hù)性。

1.2 自定義服務(wù)

在 AngularJS 中，服務(wù)是一個函數(shù)或?qū)ο?#xff0c;可在你的 AngularJS 應(yīng)用中使用。我們在上次課中使用了內(nèi)置服務(wù)$http .其實我們也可以自己來定義服務(wù)，而服務(wù)會封裝一些操作。我們在不同的控制器中可以調(diào)用同一個服務(wù)，這樣服務(wù)的代碼將會被重用。

我們現(xiàn)在就修改一下我們的品牌管理代碼，使用自定義服務(wù)。

var app=angular.module('pinyougou', ['pagination']);//定義模塊//品牌服務(wù)層 app.service('brandService',function($http){ //讀取列表數(shù)據(jù)綁定到表單中 this.findAll=function(){ return $http.get('../brand/findAll.do'); } //其它方法省略....... }); //品牌控制層 app.controller('brandController' ,function($scope,brandService){ //讀取列表數(shù)據(jù)綁定到表單中 $scope.findAll=function(){brandService.findAll().success(function(response){$scope.list=response;});}//其它方法省略........ });

1.3代碼分離

我們剛才已經(jīng)將與后端交互的部分放入自定義服務(wù)，目的是不同的控制層都可以重復(fù)調(diào)用服務(wù)層方法。所以我們還需要將代碼分離出來，以便調(diào)用。

1.3.1 前端基礎(chǔ)層

在pinyougou-manager-web工程js下創(chuàng)建base.js

var app=angular.module('pinyougou',[]);

創(chuàng)建base_pagination.js

var app=angular.module('pinyougou',['pagination']);

一個用于不需要分頁功能的頁面，一個用于需要分頁功能的頁面.

1.3.2 前端服務(wù)層

在pinyougou-manager-web工程js下創(chuàng)建service文件夾。創(chuàng)建brandService.js

//品牌服務(wù)層app.service('brandService',function($http){//讀取列表數(shù)據(jù)綁定到表單中this.findAll=function(){return $http.get('../brand/findAll.do');}//其它方法省略........ });

1.3.3 前端控制層

在pinyougou-manager-web的js文件夾下創(chuàng)建brandController.js

//品牌控制層 app.controller('brandController' ,function($scope,brandService){ //讀取列表數(shù)據(jù)綁定到表單中 $scope.findAll=function(){brandService.findAll().success(function(response){$scope.list=response;});} //其它方法省略........ });

1.3.4 修改頁面

去掉brand.html原來的JS代碼，引入剛才我們建立的JS

2.控制器繼承

2.1需求分析

有些功能是每個頁面都有可能用到的，比如分頁，復(fù)選等等，如果我們再開發(fā)另一個功能，還需要重復(fù)編寫。怎么能讓這些通用的功能只寫一次呢？我們通過繼承的方式來實現(xiàn)。

2.2前端代碼

2.2.1 建立父控制器

在pinyougou-manager-web的js/controller目錄下建立baseController.js

//基本控制層 app.controller('baseController' ,function($scope){ //重新加載列表 數(shù)據(jù) $scope.reloadList=function(){ //切換頁碼 $scope.search( $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.selectIds=[];//選中的ID集合 //更新復(fù)選$scope.updateSelection = function($event, id) {if($event.target.checked){//如果是被選中,則增加到數(shù)組$scope.selectIds.push( id);}else{var idx = $scope.selectIds.indexOf(id); $scope.selectIds.splice(idx, 1);//刪除 }}});

2.2.2 修改品牌控制器層

修改brandController.js

//品牌控制層 app.controller('brandController' ,function($scope,$controller,brandService){$controller('baseController',{$scope:$scope});//繼承 //讀取列表數(shù)據(jù)綁定到表單中 $scope.findAll=function(){brandService.findAll().success(function(response){$scope.list=response;});} //其它方法省略........ });

controller也是angular提供的一個服務(wù)，可以實現(xiàn)偽繼承，實際上就是與BaseController共享

controller也是angular提供的一個服務(wù)，可以實現(xiàn)偽繼承，實際上就是與BaseController共享scope

3.代碼生成器

3.1代碼生成

我們接下來使用《黑馬程序員代碼生成器2.4》來完成代碼的編寫。生成后將代碼拷貝到工程中。具體步驟如下：

(1)資源中HeimaCodeUtil_V2.4 就是代碼生成器，將其拷貝到不包含中文和空格的目錄下

(2)運行heima_code_util.exe 即可看到數(shù)據(jù)庫連接窗口

(3)選擇數(shù)據(jù)庫類型為 MYSQL ,輸入用戶名和密碼后點擊“測試連接”按鈕,提示連接成功后選擇數(shù)據(jù)庫，點擊“下一步”。

(4)選擇模板為SSM+dubbox+angularJS(服務(wù)層+WEB層)

這個模板不會生成數(shù)據(jù)訪問層和實體類，因為我們之前已經(jīng)用逆向工程完成了數(shù)據(jù)訪問層與實體類的生成。

(5)點擊生成代碼按鈕，提示成功后，到生成路徑去找生成的代碼，并拷貝到我們的工程中。

3.2代碼拷貝

將商家商品相關(guān)代碼拷貝到工程。

(1)拷貝服務(wù)接口

(2)拷貝服務(wù)實現(xiàn)類

(3)拷貝控制器

(4)拷貝JS

3.3安裝到本地倉庫

執(zhí)行maven命令install ,將最新的品優(yōu)購代碼安裝到本地倉庫

4.規(guī)格管理

4.1需求及表結(jié)構(gòu)分析

4.1.1 需求

實現(xiàn)規(guī)格管理功能

4.1.2 表結(jié)構(gòu)

tb_specification 規(guī)格表

字段類型長度含義IdBigint主鍵Spec_nameVarchar255規(guī)格名稱

tb_specification_option 規(guī)格選項表

字段類型長度含義IdBigint主鍵Option_nameVarchar200規(guī)格選項名稱Spec_idBigint30規(guī)格IDOrdersInt11排序

4.2規(guī)格列表

4.2.1 引入JS

修改pinyougou-manager-web工程的specification.html

4.2.2 放置分頁組件

4.2.3 指令與表達(dá)式

在body元素指定模塊名和控制器名

循環(huán)表格行

{{entity.id}} {{entity.specName}} 修改

4.3新增規(guī)格

4.3.1 新增行的實現(xiàn)

修改specificationController.js 新增以下代碼

//新增選項行$scope.addTableRow=function(){$scope.entity.specificationOptionList.push({});}

specification.html “新建選項”按鈕

新建

循環(huán)列表行，綁定表格內(nèi)的編輯框

注意：要修改specification.html “新建”按鈕，彈出窗口時對entity進(jìn)行初始化，否則向集合添加數(shù)據(jù)時會報錯！

新建

4.3.2 刪除行的實現(xiàn)

實現(xiàn)思路：在每一行將索引值傳遞給集合，在集合中刪除。

修改specificationController.js 新增以下代碼

//批量選項刪除 $scope.deleTableRow=function(index){$scope.entity.specificationOptionList.splice(index,1);//刪除}

修改每行的刪除按鈕

刪除

$index 用于獲取ng-repeat指令循環(huán)中的索引。

4.3.3 提交保存

實現(xiàn)思路：我們將規(guī)格和規(guī)格選項數(shù)據(jù)合并成一個對象來傳遞，這時我們需要用一個對象將這兩個對象組合起來。在業(yè)務(wù)邏輯中，得到組合對象中的規(guī)格和規(guī)格選項列表，插入規(guī)格返回規(guī)格ID，然后循環(huán)插入規(guī)格選項。

(1)我們要增加規(guī)格選項，必須要知道新增規(guī)格的ID, 所以我們在修改pinyougou-dao 的TbSpecificationMapper.xml ，在insert節(jié)點后添加如下配置

SELECT LAST_INSERT_ID() AS id insert into tb_specification (id, spec_name) values (#{id,jdbcType=BIGINT}, #{specName,jdbcType=VARCHAR})

(2)在pinyougou-pojo 建立com.pinyougou.pojogroup包，包下建立Specification類

package com.pinyougou.pojogroup;import java.io.Serializable;import java.util.List;import com.pinyougou.pojo.TbSpecification;import com.pinyougou.pojo.TbSpecificationOption;/** * 規(guī)格組合實體類 * @author Administrator * */public class Specification implements Serializable {private TbSpecification specification;private List specificationOptionList;public TbSpecification getSpecification() {return specification;}public void setSpecification(TbSpecification specification) {this.specification = specification;}public List getSpecificationOptionList() {return specificationOptionList;}public void setSpecificationOptionList(List specificationOptionList) {this.specificationOptionList = specificationOptionList;}}

(3)修改pinyougou-sellergoods-interface的SpecificationService.java

/** * 增加*/public void add(Specification specification);

(4)修改pinyougou-sellergoods-service的SpecificationServiceImpl.java

/** * 增加 */@Overridepublic void add(Specification specification) {specificationMapper.insert(specification.getSpecification());//插入規(guī)格//循環(huán)插入規(guī)格選項for(TbSpecificationOption specificationOption:specification.getSpecificationOptionList()){specificationOption.setSpecId(specification.getSpecification().getId());//設(shè)置規(guī)格IDspecificationOptionMapper.insert(specificationOption);}}

修改pinyougou-manager-web的SpecificationController.java

/** * 增加 * @param specification * @return */@RequestMapping("/add")public Result add(@RequestBody Specification specification){try {specificationService.add(specification);return new Result(true, "增加成功");} catch (Exception e) {e.printStackTrace();return new Result(false, "增加失敗");}}

(6)修改頁面specification.html

綁定規(guī)格名稱

規(guī)格名稱

綁定保存按鈕事件

保存

4.4修改規(guī)格

4.4.1 獲取規(guī)格數(shù)據(jù)

實現(xiàn)思路：通過規(guī)格ID，到后端查詢規(guī)格和規(guī)格選項列表，然后通過組合實體類返回結(jié)果

(1)修改pinyougou-sellergoods-interface的SpecificationService.java

/** * 根據(jù)ID獲取實體 * @param id * @return */public Specification findOne(Long id);

(2)修改pinyougou-sellergoods-service的SpecificationServiceImpl.java

/** * 根據(jù)ID獲取實體 * @param id * @return */@Overridepublic Specification findOne(Long id){//查詢規(guī)格TbSpecification tbSpecification = specificationMapper.selectByPrimaryKey(id);//查詢規(guī)格選項列表TbSpecificationOptionExample example=new TbSpecificationOptionExample();Criteria criteria = example.createCriteria();criteria.andSpecIdEqualTo(id);//根據(jù)規(guī)格ID查詢List optionList = specificationOptionMapper.selectByExample(example);//構(gòu)建組合實體類返回結(jié)果Specification spec=new Specification();spec.setSpecification(tbSpecification);spec.setSpecificationOptionList(optionList);return spec;}

(3)修改pinyougou-manager-web的SpecificationController.java

@RequestMapping("/findOne")public Specification findOne(Long id){return specificationService.findOne(id);}

(4)修改頁面specification.html 中列表的修改按鈕

修改

4.4.2 保存修改結(jié)果

(1)修改pinyougou-sellergoods-interface的SpecificationService.java

/** * 修改 */public void update(Specification specification);

(2)修改pinyougou-sellergoods-service的SpecificationServiceImpl.java

/** * 修改 */@Overridepublic void update(Specification specification){//保存修改的規(guī)格specificationMapper.updateByPrimaryKey(specification.getSpecification());//保存規(guī)格//刪除原有的規(guī)格選項TbSpecificationOptionExample example=new TbSpecificationOptionExample();com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();criteria.andSpecIdEqualTo(specification.getSpecification().getId());//指定規(guī)格ID為條件specificationOptionMapper.deleteByExample(example);//刪除//循環(huán)插入規(guī)格選項for(TbSpecificationOption specificationOption:specification.getSpecificationOptionList()){specificationOption.setSpecId(specification.getSpecification().getId());specificationOptionMapper.insert(specificationOption);}}

(3)修改pinyougou-manager-web的SpecificationController.java

/** * 修改 * @param specification * @return */@RequestMapping("/update")public Result update(@RequestBody Specification specification){try {specificationService.update(specification);return new Result(true, "修改成功");} catch (Exception e) {e.printStackTrace();return new Result(false, "修改失敗");}}

(4)修改specification.js的save方法

//保存 $scope.save=function(){var serviceObject;//服務(wù)層對象 if($scope.entity.specification.id!=null){//如果有IDserviceObject=specificationService.update( $scope.entity ); //修改 }else{serviceObject=specificationService.add( $scope.entity );//增加 }serviceObject.success(function(response){if(response.success){//重新查詢 $scope.reloadList();//重新加載}else{alert(response.message);}});}

4.5刪除規(guī)格

實現(xiàn)思路：我們要刪除規(guī)格的同時，還要記得將關(guān)聯(lián)的規(guī)格選項刪除掉。

4.5.1 后端代碼

修改pinyougou-sellergoods-service的SpecificationServiceImpl.java

/** * 批量刪除 */@Overridepublic void delete(Long[] ids) {for(Long id:ids){specificationMapper.deleteByPrimaryKey(id);//刪除原有的規(guī)格選項TbSpecificationOptionExample example=new TbSpecificationOptionExample();com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();criteria.andSpecIdEqualTo(id);//指定規(guī)格ID為條件specificationOptionMapper.deleteByExample(example);//刪除}}

4.5.2 前端代碼

修改pinyougou-manager-web的specification.html

列表的復(fù)選框

刪除按鈕

刪除

5.模板管理

5.1 需求及表結(jié)構(gòu)分析

5.1.1 需求分析

首選我們需要理解模板的作用。模板主要有兩個：

1是用于關(guān)聯(lián)品牌與規(guī)格

2定義擴充屬性

5.1.2 表結(jié)構(gòu)分析

tb_type_template 模板表

字段類型長度含義IdBigint主鍵nameVarchar80模板名稱Spec_idsVarchar1000關(guān)聯(lián)規(guī)格(json格式)brand_idsVarchar1000關(guān)聯(lián)品牌(json格式)custom_attribute_itemsVarchar2000擴展屬性

5.2 模板列表

5.2.1 引入JS

修改type_template.html ，引入JS

5.2.2 放置分頁組件

5.2.3 指令與表達(dá)式

{{entity.id}} {{entity.name}} {{entity.brandIds}} {{entity.specIds}} {{entity.customAttributeItems}} 修改

5.3 品牌下拉列表

在彈出窗口中有個品牌下拉列表，要求品牌是可以選擇多個，這與我們之前的單選的下拉列表是不同的。我們要想實現(xiàn)這個功能，需要使用select2 組件來完成。

5.2.1 認(rèn)識select2

我們來看例子：我們需要的就是這樣可以多選的下拉框

5.2.1 認(rèn)識select2

我們來看例子：我們需要的就是這樣可以多選的下拉框

(2)修改typeTemplateController.js ，定義品牌列表數(shù)據(jù)

$scope.brandList={data:[{id:1,text:'聯(lián)想'},{id:2,text:'華為'},{id:3,text:'小米'}]};//品牌列表

(3)在type_template.html 用select2組件實現(xiàn)多選下拉框’

multiple 表示可多選

Config用于配置數(shù)據(jù)來源

select2-model用于指定用戶選擇后提交的變量

最終實現(xiàn)效果如下：

5.2.3 后端數(shù)據(jù)支撐

我們現(xiàn)在讓這個下拉列表的數(shù)據(jù)從數(shù)據(jù)庫中提取，修改后端代碼

(1)pinyougou-dao 工程 ，在TbBrandMapper.xml中添加SQL語句配置

select id,name as text from tb_brand

(2)在pinyougou-dao 的TbBrandMapper中添加方法定義

List selectOptionList();

(3)修改pinyougou-sellergoods-interface 的BrandService.java，增加方法定義

/** * 品牌下拉框數(shù)據(jù) */List selectOptionList();

(4)修改pinyougou-sellergoods-service的BrandServiceImpl.java，增加方法

/** * 列表數(shù)據(jù) */public List selectOptionList() {return brandMapper.selectOptionList();}

(5)修改pinyougou-manager-web的BrandController.java

@RequestMapping("/selectOptionList")public List selectOptionList(){return brandService.selectOptionList();}

(6)修改pinyougou-manager-web的brandService.js

//下拉列表數(shù)據(jù)this.selectOptionList=function(){return $http.get('../brand/selectOptionList.do');}

(7)修改pinyougou-manager-web的typeTemplateController.js

因為我們在模板控制層中需要使用品牌服務(wù)層的方法，所以需要添加依賴注入

//控制層 app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplateService ,brandService){

使用品牌服務(wù)方法實現(xiàn)查詢，結(jié)果賦給變量

$scope.brandList={data:[]};//品牌列表//讀取品牌列表$scope.findBrandList=function(){brandService.selectOptionList().success(function(response){$scope.brandList={data:response};});}

(8)修改type_template.html ，添加JS引入

特別注意一下，JS引入的位置，要在typeTemplateController.js之前，因為該控制器要使用到它

(9)修改type_template.html ，添加初始化

5.4 規(guī)格下拉列表

(代碼略，參照品牌下拉列表的實現(xiàn)步驟 )

5.5 擴展屬性

5.5.1 增加行

在typeTemplateController.js中新增代碼

//新增擴展屬性行$scope.addTableRow=function(){$scope.entity.customAttributeItems.push({});}

在type_template.html中的“新建”按鈕，執(zhí)行實體的初始化操作

button type="button" class="btn btn-default" data-toggle="modal" data-target="#editModal" ng-click="entity={customAttributeItems:[]}"> 新建

修改“新增擴展屬性按鈕”

新增擴展屬性

循環(huán)表格

刪除

5.5.2 刪除行

實現(xiàn)思路：在每一行將索引值傳遞給集合，在集合中刪除。

修改typeTemplateController.js新增以下代碼

//刪除擴展屬性行$scope.deleTableRow=function(index){$scope.entity.customAttributeItems.splice(index,1);//刪除}

修改每行的刪除按鈕

刪除

$index 用于獲取ng-repeat指令循環(huán)中的索引。

5.6 新增模板

修改type_template.html ，綁定文本框

模板名稱

保存按鈕

保存

5.7 修改模板

修改typeTemplateController.js的findOne方法

//查詢實體 $scope.findOne=function(id){typeTemplateService.findOne(id).success(function(response){$scope.entity= response;$scope.entity.brandIds= JSON.parse($scope.entity.brandIds);//轉(zhuǎn)換品牌列表$scope.entity.specIds= JSON.parse($scope.entity.specIds);//轉(zhuǎn)換規(guī)格列表$scope.entity.customAttributeItems= JSON.parse($scope.entity.customAttributeItems);//轉(zhuǎn)換擴展屬性});}

從數(shù)據(jù)庫中查詢出來的是字符串，我們必須將其轉(zhuǎn)換為json對象才能實現(xiàn)信息的回顯。

5.8 刪除模板

修改type_template.html

表格中的復(fù)選框

刪除按鈕

刪除

5.9 優(yōu)化模板列表的顯示

我們現(xiàn)在完成的列表中都是以JSON格式顯示的，不利于用戶的查詢。

我們需要將信息以更友好的方式展現(xiàn)出來,如下圖形式

我們需要將一個json字符串中某個屬性的值提取出來，用逗號拼接成一個新的字符串。這樣的功能比較常用，所以我們將方法寫到baseController.js

//提取json字符串?dāng)?shù)據(jù)中某個屬性，返回拼接字符串 逗號分隔$scope.jsonToString=function(jsonString,key){var json=JSON.parse(jsonString);//將json字符串轉(zhuǎn)換為json對象var value="";for(var i=0;i0){value+= 與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的商品规格js_品优购电商系统开发 第3章 规格及模板管理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。