电商项目日总结(第三天)

1. 新增模糊查询的功能:思路:在原来的sellergoods_service包下的BrandServcieImp的实现类中新增了findByPage方法上多传递了一个TbBrand类型的参数,这个参数是从页面的搜索框中传递过来的一个对象,修改这个findByPage的方法,把模糊查询完之后的结果封装成Page对象,然后返回PageResult对象

   @Override
       public PageResult findByPage(int pageNum, int pageSize,TbBrand tbBrand) {
           PageHelper.startPage(pageNum, pageSize);
   //        List<TbBrand> list = tbBrandMapper.findAll();
   //        Page page = new Page();
           Page<TbBrand> page = (Page<TbBrand>) tbBrandMapper.search(tbBrand);
           PageResult pageResult = new PageResult(page.getResult(), page.getTotal());
   
           return pageResult;
       }

   同时,在TbBrandMapper接口里添加一个模糊查询的方法,在映射文件里也加上模糊查询的Sql语句.

   在brand.html部分中初始化$scope.searchEntity={}对象,并将原来的发送的get异步请求改成post,在发送路径的后面把对$scope.serchEntity对象传递过去

   $http.post('../brand/findByPage.do?pageSize=' + pageSize + '&pageNum=' + pageNum,searchEntity)

   这种格式第一次见:post请求也可以在地址栏中传递参数

2. 将所有angualrJs的代码全部提取出去,实现了分离(实现了angualrJS的MVC模式),提取到js目录下,提取思路:在js目录下建立一个service目录,将发送异步请求的代码全部提取到service目录下的TbBrandService.js文件夹下

   app.service('brandService',function ($http) {
   
       this.findByPage=function (pageSize,pageNum,searchEntity) {
           return $http.post('../brand/findByPage.do?pageSize=' + pageSize + '&pageNum=' + pageNum,searchEntity)
       };
       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/dele.do?ids=' + ids)
       }
   });

   在原来的brand.html页面中引入这个js文件,注意:js中调用顺序无所谓,声明一定要放在前面(如上图js文件,一定要将其引入到声明app的js语句下面才能通过运行)

   接着又提取出了BrandController.js文件放在路controller目录下,并将其中共有的部分如分页等信息又提取了一个baseController.js文件.然后又把定义app模块的'var app = angular.module('pinyougou', ['pagination']);'这句话提取到base_pagination.js文件下,把其放到了js目录下,最后brand.html页面变成了这样:

注意:别忘了在最下方引入分页组件

3. 使用了逆向工程(生成pojo对象和dao接口以及对应的映射文件的,可以将生成的代码一次性全部复制过去)和代码生成器(生成interface接口和service实现类和controller类和前端js/controller和js/service两个目录的js文件和base.js和base_pagation.js文件的,这个用哪个文件就复制哪个)

注意使用代码生成器时修改brand.html中的模糊查询搜索方法改为search,因为生成的brandController.js文件中的搜索方法是search(pageNum,pageSize),并且还要传递两个当前页面的参数,除此之外还要保证其他方法名保持一致

<div class="has-feedback">
                品牌名称:<input ng-model="searchEntity.name">
                品牌首字母:<input ng-model="searchEntity.firstChar">
                <button class="btn btn-default" ng-click="search(paginationConf.currentPage,paginationConf.itemsPerPage)">查询</button>
            </div>

4.实现规格的展示和规格的添加,添加比较重要,因为与规格表相关联的还有一个规格选项表(一对多的关系):  

首先要考虑,如果添加一个规格,那么就要添加与之对应的规格选项,这样才能构成两个表之间的关联,但是html页面只能传递一个对象,那么就要在后端entity目录下建立一个对象Specification对象,就让页面给后端传递这个对象,这个对象的结构是:

public class Specification implements Serializable {
    private TbSpecification specification;
    private List<TbSpecificationOption> specificationOptionList;
...
}

接着修改service层的add方法,改变传递的参数类型为Specification对象,

@Override
	public void add(Specification specification) {
		specificationMapper.insert(specification.getSpecification());
		for (TbSpecificationOption tbSpecificationOption : specification.getSpecificationOptionList()) {
			tbSpecificationOption.setSpecId(specification.getSpecification().getId());
			tbSpecificationOptionMapper.insert(tbSpecificationOption);
		}
	}

同时,在TbSpecificationOption.xml的映射文件里的insert方法中添加一个标签(目的是为了插入一条数据后将last_insert_id赋值给id属性(很重要,否则就获取不到规格的id,就不能给规格选项的spec_id赋值,这样规格和规格选项就产生不了对应关系!)

<selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id">
    	select last_insert_id() as id
</selectKey>

还要修改Controller层的add方法,改变其中TbSpecification的类型为Specification,这样页面就可以传递过来一个Specification类型的对象了,接着就要修改前台页面了,修改前台页面时首先去specificationService.js文件中去查看,先看里面发送异步请求的add方法中传递的对象名是啥,比如下方,这个就叫entity

//增加 
	this.add=function(entity){
		return  $http.post('../specification/add.do',entity );
	}

所以,在specification.html的body里entity就代替要传递给后端的Specification对象了,注意要修改specificationController.js中save()的判断条件(这一点告诉我们了代码生成器生成的代码是没有灵魂的,生成完还要不断的进行修改)

原来是这样的

if($scope.entity.id!=null)

改成这样 

if($scope.entity.specification.id!=null)

还要在specificationController.js中添加代码

//初始化集合,首先要初始化对象
$scope.entity={specificationOptionList:[]};
//添加空白规格选项
$scope.addTableRow=function () {
	$scope.entity.specificationOptionList.push({});
}
//删除当前规格选项($index就类似行号一样,是AngularJs中的函数,body中调用此方法时传递的参数也要写成$index这种格式,格式是固定的)
$scope.deleTableRow=function ($index) {
	$scope.entity.specificationOptionList.splice($index,1);
}