品优购第三篇—规格及模板管理


阅读数: 次   

EverydayOneCat

洗！🛀img

一、前端分层开发

我们看前端代码，JS和html都放在一起，并不利于我们后期的维护。我们可以在前端代码中也运用MVC的设计模式，将代码进行分离，提高程序的可维护性。

1.自定义服务

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。我们在上次课中使用了内置服务$http .其实我们也可以自己来定义服务，而服务会封装一些操作。我们在不同的控制器中可以调用同一个服务，这样服务的代码将会被重用。

在js文件夹下创建service文件夹。创建brandService.js前端服务层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//品牌服务
app.service("brandService",function($http){
	this.findAll=function(){
		return $http.get("../brand/findAll.do");
	}
	this.findPage = function(page,rows){
		return $http.get("../brand/findPage.do?page="+page+"&rows="+rows);
	}
	this.findOne = function(id){
		return $http.get("../brand/findOne.do?id"+id);
	}
	this.add = function(entity){
		return $http.post("../brand/add.do",entity);
	}
	this.update = function(entity){
		return $http.post("../brand/update.do",entity);
	}
	this.dele = function(ids){
		return $http.get("../brand/delete.do?ids="+ids);
	}
	this.search = function(page,rows,searchEntity){
		return $http.post("../brand/search.do?page="+page+"&rows="+rows,searchEntity);
	}
});

2.代码分离

我们刚才已经将与后端交互的部分放入自定义服务，目的是不同的控制层都可以重复调用服务层方法。所以我们还需要将代码分离出来，以便调用。

2.1前端基础层

创建base.js 

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

创建base_pagination.js

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

一个用于不需要分页功能的页面，一个用于需要分页功能的页面.

2.2前端控制层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
app.controller("brandController",function($scope,$http){
	//读取列表数据绑定到表单中  
	$scope.findAll = function(){
		brandService.findAll().success(function(response){
			$scope.list = response;
		});
	}
	
	//重新加载列表 数据
	$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.findPage = function(page,rows){
		brandService.findPage(page,rows).success(function(response){
			$scope.list=response.rows;	
			$scope.paginationConf.totalItems=response.total;//更新总记录数
		});
	}
	
	//保存
	$scope.save = function(){
		/* var methodName = "add";//方法名
		if(%scope.entity.id!=null){//如果有ID
			methodName = "update";
		} */
		var object = null;
		if(%scope.entity.id!=null){//如果有ID
			object = brandService.update($scope.entity);
		}else{
			object = brandService.add($scope.entity);
		}
		//$http.post("../brand/"+methodName+".do",$scope.entity).success(function(response){
		object.success(function(response){
			if(response.success){
				$scope.reloadList();//重新加载
			}else{
				alert(response.message);
			}
		});
	}
	
	//查询实体
	$scope.findOne = function(id){
		brandService.findOne(id).success(function(response){
			$scope.entity = response;
		})
	}

	$scope.selectIds=[];//选中的ID集合 
	//更新复选
	$scope.updateSelection = function($event,id){//$event是源，$event.target是特指那个标签
		if($event.target.checked){//如果是被选中,则增加到数组
			$scope.selectIds.push(id);
		}else{
			var idx = $scope.selectIds.indexOf(id);//查找值的位置
			$scope.selectIds.splice(idx,1);//参数1：移除的位置	参数2：移除的个数
		}
	}
	//批量删除 
	$scope.dele = function(){
		//获取选中的复选框	
		brandService.dele($scope.selectIds).success(function(response){
			if(response.success){
				$scope.reloadList();//刷新列表
			}else{
				alert(response.message);
			}	
		});
	}
	
	$scope.searchEntity={};//定义搜索对象 	
	//条件查询
	$scope.search = new function(page,rows){
		brandService.search(page,rows,$scope.searchEntity).success(function(response){
			$scope.paginationConf.totalItems=response.total;//总记录数 
			$scope.list=response.rows;//给列表变量赋值 
		});
	}
});

2.3修改页面

去掉brand.html原来的JS代码，引入刚才我们建立的JS

1
2
3
<script type="text/javascript" src="../js/base_pagination.js">  </script>
<script type="text/javascript" src="../js/service/brandService.js">  </script>
<script type="text/javascript" src="../js/controller/brandController.js">  </script>

3.控制器继承

有些功能是每个页面都有可能用到的，比如分页，复选等等，如果我们再开发另一个功能，还需要重复编写。怎么能让这些通用的功能只写一次呢？我们通过继承的方式来实现。

在js/controller目录下建立baseController.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 //基本控制层 
app.controller('baseController' ,function($scope){	
        //重新加载列表 数据
        $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集合 
	//更新复选
	$scope.updateSelection = function($event, id) {		
		if($event.target.checked){//如果是被选中,则增加到数组
			$scope.selectIds.push( id);			
		}else{
			var idx = $scope.selectIds.indexOf(id);
              $scope.selectIds.splice(idx, 1);//删除 
		}
	}	
});

修改brandController.js(新增$controller)

1
2
3
app.controller('brandController' ,function($scope,$controller,brandService){	
	$controller('baseController',{$scope:$scope});//继承	
}

二、规格管理

其实还是和之前一样的增删改查附加一些逻辑，但是dubbox分层开发和之前的回顾还有AngularJs的学习还是很可以的。

1.新增规格

1.1前端

修改specificationController.js 新增以下代码

1
2
3
4
5
6
7
8
9
10
//entity(表格数据)由规格名称和规格选项list组成
//新增选项行
$scope.addTableRow=function(){
    $scope.entity.specificationOptionList.push({});
}

//选项删除 
$scope.deleTableRow=function(index){			
    $scope.entity.specificationOptionList.splice(index,1);//删除			
}

循环列表行，绑定表格内的编辑框

1
2
3
4
5
6
7
8
9
<tr ng-repeat="pojo in entity.specificationOptionList">
         <td><input  type="checkbox"></td> 
	<td>
	<input ng-model="pojo.optionName" class="form-control" placeholder="规格选项"> 
	</td>
	<td>
	<input ng-model="pojo.orders" class="form-control" placeholder="排序"> 
	</td>
</tr>

注意：要修改specification.html “新建”按钮，弹出窗口时对entity进行初始化，否则向集合添加数据时会报错！

1
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={'specificationOptionList':[]}"><i class="fa fa-file-o"></i> 新建</button>

修改每行的删除按钮

1
<button type="button" class="btn btn-default" title="删除"  ng-click="deleTablenRow($index)"><i class="fa fa-file-o"></i> 删除</button>

$index 用于获取ng-repeat指令循环中的索引。

绑定规格名称

1
2
3
4
5
<td>规格名称</td>
<td>
    <input ng-model="entity.specification.specName"  class="form-control" placeholder="规格名称" >  
</td>

1.2后端

实现思路：我们将规格和规格选项数据合并成一个对象来传递，这时我们需要用一个对象将这两个对象组合起来。在业务逻辑中，得到组合对象中的规格和规格选项列表，插入规格返回规格ID，然后循环插入规格选项。

（1）我们要增加规格选项，必须要知道新增规格的ID, 所以我们在修改pinyougou-dao 的TbSpecificationMapper.xml ，在insert节点后添加如下配置

1
2
3
<selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id">
    SELECT LAST_INSERT_ID() AS id
</selectKey>

这样我们插入的对象会set属性一个对应的id

在pinyougou-pojo 建立com.pinyougou.pojogroup包，包下建立Specification类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * 规格组合实体类 
 * @author Administrator
 *
 */
public class Specification implements Serializable {	
	private TbSpecification specification;
	private List<TbSpecificationOption> specificationOptionList;
	
	public TbSpecification getSpecification() {
		return specification;
	}
	public void setSpecification(TbSpecification specification) {
		this.specification = specification;
	}
	public List<TbSpecificationOption> getSpecificationOptionList() {
		return specificationOptionList;
	}
	public void setSpecificationOptionList(List<TbSpecificationOption> specificationOptionList) {
		this.specificationOptionList = specificationOptionList;
	}	
}

修改Service层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
	 * 增加
	 */
@Override
public void add(Specification specification) {
    //获取规格实体
    TbSpecification tbspecification = specification.getSpecification();				
    specificationMapper.insert(tbspecification);	

    //获取规格选项集合
    List<TbSpecificationOption> specificationOptionList = specification.getSpecificationOptionList();
    for( TbSpecificationOption option:specificationOptionList){
        option.setSpecId(tbspecification.getId());//设置规格ID
        specificationOptionMapper.insert(option);//新增规格
    }
}

2.修改规格

2.1后端

我们点开修改首先要获得数据显示出来

实现思路：通过规格ID，到后端查询规格和规格选项列表，然后通过组合实体类返回结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
	 * 根据ID获取实体
	 * @param id
	 * @return
	 */
@Override
public Specification findOne(Long id){

    Specification specification=new Specification();
    //获取规格实体
    TbSpecification tbSpecification = specificationMapper.selectByPrimaryKey(id);
    specification.setSpecification(tbSpecification);

    //获取规格选项列表	

    TbSpecificationOptionExample example=new TbSpecificationOptionExample();
    com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();
    criteria.andSpecIdEqualTo(id);
    List<TbSpecificationOption> specificationOptionList = specificationOptionMapper.selectByExample(example);

    specification.setSpecificationOptionList(specificationOptionList);

    return specification;//组合实体类
}

保存修改结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
	 * 修改
	 */
@Override
public void update(Specification specification){

    //获取规格实体
    TbSpecification tbspecification = specification.getSpecification();				
    specificationMapper.updateByPrimaryKey(tbspecification);	

    //删除原来规格对应的规格选项	

    TbSpecificationOptionExample example=new TbSpecificationOptionExample();
    com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();
    criteria.andSpecIdEqualTo(tbspecification.getId());
    specificationOptionMapper.deleteByExample(example);

    //获取规格选项集合
    List<TbSpecificationOption> specificationOptionList = specification.getSpecificationOptionList();
    for( TbSpecificationOption option:specificationOptionList){
        option.setSpecId(tbspecification.getId());//设置规格ID
        specificationOptionMapper.insert(option);//新增规格
    }

}

2.2前端

修改specification.js的save方法

1
2
3
if($scope.entity.specification.id!=null){//如果有ID
    ……
}

3.删除规格

实现思路：我们要删除规格的同时，还要记得将关联的规格选项删除掉。

3.1后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
	 * 批量删除
	 */
@Override
public void delete(Long[] ids) {
    for(Long id:ids){
        specificationMapper.deleteByPrimaryKey(id);			
        //删除原有的规格选项		
        TbSpecificationOptionExample example=new TbSpecificationOptionExample();
        com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();
        criteria.andSpecIdEqualTo(id);//指定规格ID为条件
        specificationOptionMapper.deleteByExample(example);//删除
    }		
}

3.2前端

列表的复选框

1
<input  type="checkbox" ng-click="updateSelection($event,entity.id)">

删除按钮

1
<button type="button" class="btn btn-default" title="删除" ng-click="dele()" ><i class="fa fa-trash-o"></i> 删除</button>

三、模板管理

首选我们需要理解模板的作用。模板主要有两个：

一是用于关联品牌与规格，二是定义扩充属性

1.表结构分析

tb_type_template 模板表

字段 类型 长度 含义
Id Bigint 主键
name Varchar 80 模板名称
Spec_ids Varchar 1000 关联规格（json格式）
brand_ids Varchar 1000 关联品牌（json格式）
custom_attribute_items Varchar 2000 扩展属性

2.模板列表

修改type_template.html ，引入JS

1
2
3
4
5
6
7
<script type="text/javascript" src="../plugins/angularjs/angular.min.js">  </script>
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script type="text/javascript" src="../js/base_pagination.js">  </script>
<script type="text/javascript" src="../js/service/typeTemplateService.js">  </script>
<script type="text/javascript" src="../js/controller/baseController.js">  </script>
<script type="text/javascript" src="../js/controller/typeTemplateController.js">  </script>

放置分页组件

1
<tm-pagination conf="paginationConf"></tm-pagination>
1
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" >
1
2
3
4
5
6
7
8
9
10
11
<tr ng-repeat="entity in list">
    <td><input  type="checkbox"></td>			                              
    <td>{{entity.id}}</td>
    <td>{{entity.name}}</td>
    <td>{{entity.brandIds}}</td>
    <td>{{entity.specIds}}</td>									 
    <td>{{entity.customAttributeItems}}</td>		                                                                  
    <td class="text-center">                                           
        <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
    </td>
</tr>

3.select2组件

在弹出窗口中有个品牌下拉列表，要求品牌是可以选择多个，这与我们之前的单选的下拉列表是不同的。我们要想实现这个功能，需要使用select2 组件来完成。

image-20200629233748236

我们来看例子：我们需要的就是这样可以多选的下拉框

image-20200629233803437

4.品牌下拉列表

4.1后端

我们需要select2支持的json格式——id:xx,text:”xx”。让这个下拉列表的数据从数据库中提取，修改后端代码

（1）pinyougou-dao 工程 ，在TbBrandMapper.xml中添加SQL语句配置

1
2
3
<select id="selectOptionList"  resultType="java.util.Map" >
    select id,name as text from tb_brand
</select>

（2）在pinyougou-dao 的TbBrandMapper中添加方法定义

1
List<Map> selectOptionList();

（3）修改pinyougou-sellergoods-service的BrandServiceImpl.java，增加方法

1
2
3
4
5
6
/**
	 * 列表数据
	 */
public List<Map> selectOptionList() {
    return brandMapper.selectOptionList();
}

（4）修改pinyougou-manager-web的BrandController.java

1
2
3
4
@RequestMapping("/selectOptionList")
public List<Map> selectOptionList(){
    return brandService.selectOptionList();
}

image-20200629234426225

4.2前端

（1）修改 type_template.html 引入JS

1
2
3
4
<link rel="stylesheet" href="../plugins/select2/select2.css" />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/angular-select2.js">  </script>

（2）修改pinyougou-manager-web的brandService.js

1
2
3
4
//下拉列表数据
this.selectOptionList=function(){
    return $http.get('../brand/selectOptionList.do');
}

（3）修改pinyougou-manager-web的typeTemplateController.js

因为我们在模板控制层中需要使用品牌服务层的方法，所以需要添加依赖注入，一旦出现依赖注入要赶紧添加js引入

1
2
 //控制层 
app.controller('typeTemplateController' ,function($scope,$controller   ,typeTemplateService ,brandService)
1
2
3
4
5
6
7
8
9
$scope.brandList={data:[]};//品牌列表
//读取品牌列表
$scope.findBrandList=function(){
    brandService.selectOptionList().success(
        function(response){
            $scope.brandList={data:response};	
        }
    );		
}

（4）修改type_template.html ，添加JS引入——由于这里有依赖注入

1
<script type="text/javascript" src="../js/service/brandService.js">  </script>

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

（5）在type_template.html 用select2组件实现多选下拉框

1
<input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌（可多选）" class="form-control" type="text"/>

multiple 表示可多选

Config用于配置数据来源

select2-model用于指定用户选择后提交的变量

（6）修改type_template.html ，添加初始化

1
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" ng-init="findBrandList()">

效果

image-20200629234643806

5.扩展属性

实现增加减少行，和之前基本一样，这里回归一下增强记忆。

在typeTemplateController.js中新增代码

1
2
3
4
5
6
7
8
//新增扩展属性行
$scope.addTableRow=function(){	
    $scope.entity.customAttributeItems.push({});		
}
//删除扩展属性行
$scope.deleTableRow=function(index){			
    $scope.entity.customAttributeItems.splice(index,1);//删除			
}

在type_template.html中的“新建”按钮，执行实体的初始化操作

1
2
3
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" 
        ng-click="entity={customAttributeItems:[]}"
        ><i class="fa fa-file-o"></i> 新建</button>

循环表格

1
2
3
4
5
6
<tr ng-repeat="pojo in entity.customAttributeItems">							
<td><input class="form-control" ng-model="pojo.text" placeholder="属性名称" ></td>
<td>
    <button type="button" ng-click="deleTableRow($index)" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
    </td>
</tr>

$index 用于获取ng-repeat指令循环中的索引。

6.修改模板

修改模板时先显示模板对象的内容，但由于品牌和规格还有扩展属性都是json格式的数据，我们读出来后不能之间显示，得先把json转成对象(集合)

修改typeTemplateController.js的findOne方法

1
2
3
4
5
6
7
8
9
10
11
//查询实体 
$scope.findOne=function(id){				
    typeTemplateService.findOne(id).success(
        function(response){
            $scope.entity= response;					
            $scope.entity.brandIds=  JSON.parse($scope.entity.brandIds);//转换品牌列表
            $scope.entity.specIds=  JSON.parse($scope.entity.specIds);//转换规格列表
            $scope.entity.customAttributeItems= JSON.parse($scope.entity.customAttributeItems);//转换扩展属性
        }
    );				
}

7.优化模板列表的显示

我们现在完成的列表中都是以JSON格式显示的，不利于用户的查询。

image-20200630003638542

我们需要将信息以更友好的方式展现出来,如下图形式

image-20200630003650644

我们需要将一个json字符串中某个属性的值提取出来，用逗号拼接成一个新的字符串。这样的功能比较常用，所以我们将方法写到baseController.js

1
2
3
4
5
6
7
8
9
10
11
12
//提取json字符串数据中某个属性，返回拼接字符串 逗号分隔
$scope.jsonToString=function(jsonString,key){
    var json=JSON.parse(jsonString);//将json字符串转换为json对象
    var value="";
    for(var i=0;i<json.length;i++){		
        if(i>0){
            value+=","
        }
        value+=json[i][key];			
    }
    return value;
}

页面上使用该函数进行转换

1
2
3
4
5
6
7
8
9
10
 <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>{{jsonToString(entity.brandIds,'text')}}</td>
	 <td>{{jsonToString(entity.specIds,'text')}}</td>								 <td>{{jsonToString(entity.customAttributeItems,'text')}}</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>

结语

无内鬼，来点网抑云

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家