品优购-Day04

最新推荐文章于 2022-06-17 20:29:01 发布

原创最新推荐文章于 2022-06-17 20:29:01 发布 · 273 阅读

CC 4.0 BY-SA版权

学习目标

目标1：了解代码生成迅速完成基础代码
目标2：完成模板管理的CRUD操作
目标3：完成商品分类的CRUD操作

一、模版列表得显示，调整好界面，即后端及前端文件都已拷贝到项目中

1.type_template.html导入步骤一:js相关文件，步骤二:body中增加，步骤三:table下面加分页控件

    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
    <script type="text/javascript" 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>
    ...
    <body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController">
    ...
    <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>
    ...
    </table>
    <!--数据列表/-->    
    <tm-pagination conf="paginationConf"></tm-pagination>

二、模版新增的品牌下拉列表

1.type_template.html页面引入angular-select2.js文件，编辑框改为select2

    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
    <script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    
    <script type="text/javascript" src="../js/base_pagination.js"></script>
    //跟多选框相关的引用务必放在base_pagination.js下面
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../plugins/select2/angular-select2.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>
    //关联品牌的增加编辑框
    <td>关联品牌</td>
        <td>
          <input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌（可多选）" class="form-control" type="text"/>
        </td>

2.typeTemplateController.js增加测试数据，为了让页面有下拉选项**注意JSON数据格式！！！！！**

$scope.brandList = {data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'中兴'}]};

3.准备好下拉框后，准备从数据库获取brandList中得内容，在TbBrandMapper.xml文件最后增加

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

4.TbBrandMapper.java增加查询规格方法

List<Map> selectOptionList();

5.BrandService.java增加

public List<Map> selectOptionList();

6.BrandServiceImpl.java增加方法

		public List<Map> selectOptionList() {
			// TODO Auto-generated method stub
			return brandMapper.selectOptionList();
		}

7.BrandController.java增加方法

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

7.brandService.js增加

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

    8.在typeTemplateController.js中加上brandService的引入

	//读取品牌列表
	$scope.brandList={data:[]}; //可以避免页面的一些初始值错误
	$scope.findBrandList = function(){
		brandService.selectOptionList().success(
				function(response){
					$scope.brandList = {data:response};
				}
		);
	}

9.在type_template.html中引入brandService.js文件

    <script type="text/javascript" src="../js/service/brandService.js" ></script>
..//body中增加方法的调用
	<body ng-init="findBrandList()>

三、模版新增的规格下拉列表

1.TbSpecificationMapper.xml增加查询

  <select id="selectOptionList" resultType="java.util.Map">
  	select id,spec_name as text from tb_specification
  </select>

2.TbSpecificationMapper.java增加List<Map> selectOptionList();

3.SpecificationService.java增加public List<Map> selectOptionList();

4.SpecificationServiceImpl.java

	@Override
	public List<Map> selectOptionList() {
		// TODO Auto-generated method stub
		return specificationMapper.selectOptionList();
	}

5.SpecificationController.java增加

	@RequestMapping("/selectOptionList")
	public List<Map> selectOptionList(){
		return specificationService.selectOptionList();
	}

6.specificationService.js增加

	//下拉列表
	this.selectOptionList = function(){
		return $http.get('../specification/selectOptionList.do');
	}

7.在typeTemplateController.js中加上specificationService的引入

	$scope.specList={data:[]}; //可以避免页面的一些初始值错误
	//读取规格列表
	$scope.findSpecList = function(){
		specificationService.selectOptionList().success(
				function(response){
					$scope.specList = {data:response};
				}
		);
	}

8.在type_template.html页面中引入

	<script type="text/javascript" src="../js/service/specificationService.js" ></script>
	...
	<body中ng-init="findBrandList();findSpecList()">
	...
	<td>关联规格</td>
		<td>
		  <input select2  select2-model="entity.specIds" config="specList" multiple placeholder="选择规格（可多选）" class="form-control" type="text"/>
		</td>

四、增加删除扩展属性行

1.在 typeTemplateController.js

	$scope.addTableRow = function(){
		$scope.entity.customAttributeItems.push({});
	}
	
	$scope.deleTableRow = function(index){
		$scope.entity.customAttributeItems.splice(index,1);
	}

2.在type_template.html页面，

	新建按钮增加ng-click="entity = {customAttributeItems:[]}"对值进行初始化，

	新增扩展属性按钮增加ng-click="addTableRow()"，

	删除按钮增加ng-click="deleTableRow($index)"

//扩展属性删除多余的tr，修改tr为动态
<tr ng-repeat="pojo in entity.customAttributeItems">
	<td><input type="checkbox" class="icheckbox_square-blue" ></td>
	<td><input class="form-control" placeholder="属性名称" ng-model="pojo.text"></td>
	<td><button type="button" class="btn btn-default" title="删除" ng-click="deleTableRow($index)"><i class="fa fa-trash-o"></i> 删除</button></td>
</tr>

五、新增模版

1.type_template.html在商品类型输入框中增加ng-model="entity.name"

2.type_template.html在保存按钮增加ng-click="save()"

六、修改模板

1.type_template.html修改按钮增加ng-click="findOne(entity.id)";

2.typeTemplateController.js中的查询实体方法，增加三处需要将字符串转json对象的地方

	//查询实体 
	$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);
			}
		);				
	}

七、删除模版

1.type_template.html的checkbox部分增加<input  type="checkbox" ng-click="updateSelection($event,entity.id)">

2.删除按钮增加ng-click="dele()"

八、优化模版列表显示，将列表数据转成只有text的内容

1.baseController.js增加

	$scope.jsonToString=function(jsonString,key){
		var json= JSON.parse(jsonString);
		var value="";
		for(var i=0;i<json.length;i++){
			if(i>0){
				value+=",";
			}			
			value +=json[i][key];			
		}
		return value;
	}

2.页面中的属性部分加上{{jsonToString(entity.brandIds,'text')}}

九、商品分类列表实现商品分类不需要分页

	//从生成得代码中拷贝到各个目录
	itemCatService.java->sellergoods-interface
	itemCatServiceImpl.java->sellergoods-service
	itemCatController.java->manager-web
	itemCatService.js->manager-web
	itemCatController.js->manager-web

1.首先在ItemCatService.java接口增加方法

	/**
	 * 根据上级ID查询商品分类列表
	 * @param parentId
	 * @return
	 */
	public List<TbItemCat> findByParentId(Long parentId);

2.在ItemCatServiceImpl.java实现类中实现接口方法

		public List<TbItemCat> findByParentId(Long parentId) {
			// TODO Auto-generated method stub
			TbItemCatExample example = new TbItemCatExample();
			Criteria criteria = example.createCriteria();
			criteria.andParentIdEqualTo(parentId);
			return itemCatMapper.selectByExample(example);
		}

3.在ItemCatController.java类中实现方法

	@RequestMapping("/findByParentId")
	public List<TbItemCat> findByParentId(Long parentId){
		return itemCatService.findByParentId(parentId);
	}

4.前端itemCatService.js文件增加方法

	//根据上级分类查询商品分类列表
	this.findParentId=function(parentId){
		return $http.get('../itemCat/findByParentId.do?parentId='+parentId);
	}

5.前端itemCatController.js文件增加方法

	//根据上级分类ID查询列表
	$scope.findByParentId=function(parentId){
		itemCatService.findParentId(parentId).success(
				function(response){
					$scope.list = response;
				}
		)
	}

6.在item_cat.html页面中

	//1.导入js文件
    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
	<script type="text/javascript" src="../js/base.js" ></script>
    <script type="text/javascript" src="../js/service/itemCatService.js" ></script>
    <script type="text/javascript" src="../js/controller/baseController.js" ></script>
	<script type="text/javascript" src="../js/controller/itemCatController.js" ></script>
	
	//2.body中初始化
	<body ... ng-app="pinyougou" ng-controller="itemCatController" ng-init="findByParentId(0)">
	//3.修改为循环显示列表，按钮并调用显示下一级
	 <tr ng-repeat="entity in list">
			<td><input  type="checkbox" ></td>			                              
			<td>{{entity.id}}</td>
			<td>{{entity.name}}</td>									    
			<td>{{entity.typeId}}</td>									      
		    <td class="text-center">		                                     
		      <button type="button" class="btn bg-olive btn-xs" ng-click="findByParentId(entity.id)">查询下级</button> 		                                     
		      <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
		    </td>
	</tr>

7.实现面包屑跳转itemCatController.js文件增加

	$scope.grade=1;  //当前级别
	$scope.setGrade=function(value){
		$scope.grade=value;
	}
	$scope.selectType=function(p_entity){
		if($scope.grade==1){
			$scope.entity_1=null;
			$scope.entity_2=null;
		}
		if($scope.grade==2){
			$scope.entity_1=p_entity;
			$scope.entity_2=null;
		}
		if($scope.grade==3){
			$scope.entity_2=p_entity;
		}
		$scope.findByParentId(p_entity.id);
	}

页面需要修改

//面包屑点击效果
<li>
	<a href="#" ng-click="grade=1;selectType({id:0})">主分类</a> 
</li>
<li>
	<a href="#" ng-click="grade=2;selectType(entity_1)">{{entity_1.name}}</a>
</li>
<li>
	<a href="#" ng-click="grade=3;selectType(entity_2)">{{entity_2.name}}</a>
</li>

//按钮需要修改点击事件,并且判断如果是第三级就隐藏掉
<span ng-if="grade!=3">
	<button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectType(entity)">查询下级</button> 
</span>

十一、新增商品分类（学员实现,参照文档）

//item_cat.html增加select
<select ng-modele="entity.typeId" class="form-control" ng-options="type.id as type.name for type in typeTemplateList">

//itemCatController.js增加方法调用,需要引入typeTemplateService.js
$scope.findTypeTemplateList = function(){
    typeTemplateService.findAll().succcess(function(){
        $scope.typeTemplateList = response;
    })
}

//为了保存parentId需要修改itemCatController.js中的$scope.selectType方法
$scope.parentId = p_entity.id

//在add()新增方法中，将parentId赋值给$scope.entity.parentId
$scope.entity.parentId = $scope.parentId
并且将返回成功后调用的$scope.reloadList()改为，$scope.findByParentId($scope.parentId)

十二、修改商品分类（学员实现,参照文档）

十三、删除商品分类（学员实现）

.....
<button type="button" class="btn btn-default" title="删除" ng-click="dele()"><i class="fa fa-trash-o"></i> 删除</button>
.....
<td><input  type="checkbox" ng-click="updateSelection($event,entity.id)"></td>