- 体现angularJS的依赖注入
为什么需要将js分层开发？
JS和html都放在一起，并不利于我们后期的维护。我们可以在前端代码中也运用MVC的设计模式，将代码进行分离，提高程序的可维护性。
所以分为前端基础层、前端业务层、前端控制层。
1.1基础层
1.2业务层
原则：只和后台交互，不和html交互 不需要出现$scope
创建js文件
app.service("brandService",function ($http) {
// 只和后台交互，不和html交互 不需要出现$scope
this.findPage=function (pageNo,pageSize) {
return $http.get("../brand/findPage?pageNo="+pageNo+"&pageSize="+pageSize);
}
。。。。。。。1.3表现层 （控制层）
原则：只和html交互，交互的数据调用业务层 不需要出现$http
创建js文件
app.controller("brandController",function ($scope,brandService) { //brandService 把brandService直接注入到了brandController中
// 分页组件对象
$scope.paginationConf={
currentPage: 1, //当前页码
totalItems: 10, //总记录数 总条数 从后台查询 赋值
itemsPerPage: 10, //每页显示条数
perPageOptions: [10, 20, 30, 40, 50], //每页显示条数的选择
onChange: function(){ // onChange事件
$scope.reloadList();//重新加载
}
}
$scope.reloadList=function () {
// 分页查询 向后台传人的参数：
// 当前页码 $scope.paginationConf.currentPage 每页显示的条数 $scope.paginationConf.itemsPerPage
// $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}
$scope.findPage=function (pageNo,pageSize) {
brandService.findPage(pageNo,pageSize).success(function (response) {
// response : 总条数 当前页的数据list 要求 response的格式{total:100,rows:[{},{},{}]}
$scope.paginationConf.totalItems = response.total;
$scope.list = response.rows;
})
}。。。。。。。。
-
- 表现层（控制层）的继承
第一步：创建一个baseController.js 里面的代码如下：
把controller中公共的部分抽取出来了
app.controller("baseController",function ($scope) {
// 分页组件对象
$scope.paginationConf={
currentPage: 1, //当前页码
totalItems: 10, //总记录数 总条数 从后台查询 赋值
itemsPerPage: 10, //每页显示条数
perPageOptions: [10, 20, 30, 40, 50], //每页显示条数的选择
onChange: function(){ // onChange事件
$scope.reloadList();//重新加载
}
}
$scope.searchEntity={};
$scope.reloadList=function () {
// 分页查询 向后台传人的参数：
// 当前页码 $scope.paginationConf.currentPage 每页显示的条数 $scope.paginationConf.itemsPerPage
// $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
} // 准备一个数组接收即将删除的对象的id
$scope.selectIds=[];
$scope.updateSelection=function (event,id) {
// 从event中获取当前对象 event.target 是一个CheckBox
if(event.target.checked){//勾选
// 向数组中添加数据的方法是：push
$scope.selectIds.push(id);
}else{
// 取消勾选
// 从数组中移除数据方法是：splice(需要移除数据在数组中的索引值,需要移除的数量)
// "asdfgh" 获取g在字符串的索引 var index = "asdfgh".indexOf("g");
var index=$scope.selectIds.indexOf(id);
$scope.selectIds.splice(index,1);
}
}
})
第二步：让brandController继续baseController
2.Mybatis逆向工程
可以帮助我们自动生成pojo类+mapper接口+mapper映射文件
基于表生成
第一步：创建一个maven工程
第二步：向工程的resources文件夹中添加一个文件
第三步：添加依赖和插件
<dependencies>
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.3</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.2.8</version>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
</dependencies>
<build>
<finalName>zsxt</finalName>
<plugins>
<plugin>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-maven-plugin</artifactId>
<version>1.3.2</version>
<configuration>
<verbose>true</verbose>
<overwrite>true</overwrite>
</configuration>
</plugin>
</plugins>
</build>
如果jar没有正常下载
第四步：修改resources下的配置文件
第五步：执行插件的命令
生成的内容如下：
第六步：把生成的内容放到相应的pyg模块中
第七步：为每一个pojo实现序列化接口
第八步：在BrandServiceImpl中调用的方法改成调用逆向工程的方法
@Service
public class BrandServiceImpl implements BrandService {
@Autowired
private TbBrandMapper brandMapper;
@Override
public List<TbBrand> findAll() {
return brandMapper.selectByExample(null);
}
@Override
public PageResult findPage(int pageNo, int pageSize) {
PageHelper.startPage(pageNo,pageSize);
Page page = (Page) brandMapper.selectByExample(null);
return new PageResult(page.getTotal(),page.getResult());
}
@Override
public void add(TbBrand brand) {
brandMapper.insert(brand);
}
@Override
public TbBrand findOne(Long id) {
return brandMapper.selectByPrimaryKey(id);
}
@Override
public void update(TbBrand brand) {
brandMapper.updateByPrimaryKey(brand);
}
@Override
public void dele(Long[] ids) {
for (Long id : ids) {
brandMapper.deleteByPrimaryKey(id);
}
}
@Override
public PageResult findPage(int pageNo, int pageSize, TbBrand brand) {
PageHelper.startPage(pageNo,pageSize);
TbBrandExample example = new TbBrandExample();
TbBrandExample.Criteria criteria = example.createCriteria();
if(StringUtils.isNotBlank(brand.getName())){ //如果不为空 brand.getName()！=null&&!rand.getName().equals("")
criteria.andNameLike("%"+brand.getName()+"%");
}
if(StringUtils.isNotBlank(brand.getFirstChar())){
criteria.andFirstCharEqualTo(brand.getFirstChar());
}
Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(example);
return new PageResult(page.getTotal(),page.getResult());
}
3.规格管理
什么是规格：描述商品的数据。
3.1规格分页显示
第一步：根据brand创建规格的service结口和实现类
第二步：根据brand创建规格的controller
可以把controller中的每个方法上的@ResponseBody去掉，
再把类上的@Controller改成@RestController
3.2添加
第一步：分析
第二步：在pojo中创建一个组合类，体现出一对多的关系
第三步：在页面中双向绑定时注意 entity代表的是组合类
1、修改新建按钮上初始化代码
2、完成js中的动态添加行的代码
$scope.addTbSpecificationOptions=function(){
$scope.entity.tbSpecificationOptionList.push({});
}
3、完成js中的动态删除行的代码
$scope.deleTbSpecificationOptions=function(index){
$scope.entity.tbSpecificationOptionList.splice(index,1);
}
第四步：修改后台controller和service中接收的对象 TbSpecificationàSpecification
Service实现类的新增方法代码:
@Override
public void add(Specification specification) {
// specification：组合类
TbSpecification tbSpecification = specification.getTbSpecification();
specificationMapper.insert(tbSpecification); //主表 注意：插入数据时返回id
List<TbSpecificationOption> tbSpecificationOptionList = specification.getTbSpecificationOptionList();
for (TbSpecificationOption tbSpecificationOption : tbSpecificationOptionList) {
// 设置外键：
tbSpecificationOption.setSpecId(tbSpecification.getId());
specificationOptionMapper.insert(tbSpecificationOption); // 从表
}
}注意：修改插入方法
-
- 修改
第一步：数据回显
根据id查询，返回的是组合类
修改service中的findOne方法
@Override
public Specification findOne(Long id) {
TbSpecification tbSpecification = specificationMapper.selectByPrimaryKey(id); //查询主表
// select * from tb_specifiction_option where spec_id=?
TbSpecificationOptionExample example = new TbSpecificationOptionExample();
example.createCriteria().andSpecIdEqualTo(id);
List<TbSpecificationOption> tbSpecificationOptionList = specificationOptionMapper.selectByExample(example); //查询从表
Specification specification = new Specification(); //把查询到的数据放到组合类中
specification.setTbSpecification(tbSpecification);
specification.setTbSpecificationOptionList(tbSpecificationOptionList);
return specification;
}
第二步：修改update方法 注意：规格小项采用先删除后新增的方案
public void update(Specification specification) {
TbSpecification tbSpecification = specification.getTbSpecification();
specificationMapper.updateByPrimaryKey(tbSpecification);
// 根据规格id删除所有此规格下的的规格小项
// delete from tb_specification_option where spec_id=?
TbSpecificationOptionExample example = new TbSpecificationOptionExample();
example.createCriteria().andSpecIdEqualTo(tbSpecification.getId());
specificationOptionMapper.deleteByExample(example);
// 然后再重新新增
List<TbSpecificationOption> tbSpecificationOptionList = specification.getTbSpecificationOptionList();
for (TbSpecificationOption tbSpecificationOption : tbSpecificationOptionList) {
tbSpecificationOption.setSpecId(tbSpecification.getId()); //注意还需要重新设置规格id
specificationOptionMapper.insert(tbSpecificationOption);
}
}
-
- 删除 删除两个表的数据
修改service中的方法
public void dele(Long[] ids) {
for (Long id : ids) {
specificationMapper.deleteByPrimaryKey(id);
//只是删除主表 delete from tb_specification where id=?
//只是删除主表 delete from tb_specification_option where spec_id=?
TbSpecificationOptionExample example = new TbSpecificationOptionExample();
example.createCriteria().andSpecIdEqualTo(id);
specificationOptionMapper.deleteByExample(example);
}
}400错误：bad request，是参数有问题！
@controller+@ResponseBody=@RestController
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
