品优购项目记录：day02

今日目标：

        （1）运用Angular JS 前端框架的常用指令。

        （2）完成品牌管理的列表功能

        （3）完成品牌管理的分页列表功能

        （4）完成品牌管理的增加、修改、删除、条件查询功能

目录

1、品牌管理的列表功能
<https://blog.csdn.net/qq1031893936/article/details/80937789#1%E3%80%81%E5%93%81%E7%89%8C%E7%AE%A1%E7%90%86%E7%9A%84%E5%88%97%E8%A1%A8%E5%8A%9F%E8%83%BD>

2、品牌列表的分页
<https://blog.csdn.net/qq1031893936/article/details/80937789#2%E3%80%81%E5%93%81%E7%89%8C%E5%88%97%E8%A1%A8%E7%9A%84%E5%88%86%E9%A1%B5>

2.1 后端代码
<https://blog.csdn.net/qq1031893936/article/details/80937789#2.1%20%E5%90%8E%E7%AB%AF%E4%BB%A3%E7%A0%81>

2.2 前端代码
<https://blog.csdn.net/qq1031893936/article/details/80937789#2.2%20%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81>

3、新增品牌
<https://blog.csdn.net/qq1031893936/article/details/80937789#3%E3%80%81%E6%96%B0%E5%A2%9E%E5%93%81%E7%89%8C>

3.1 后端代码
<https://blog.csdn.net/qq1031893936/article/details/80937789#3.1%20%E5%90%8E%E7%AB%AF%E4%BB%A3%E7%A0%81>

3.2 前端
<https://blog.csdn.net/qq1031893936/article/details/80937789#3.2%20%E5%89%8D%E7%AB%AF>

4、修改品牌
<https://blog.csdn.net/qq1031893936/article/details/80937789#4%E3%80%81%E4%BF%AE%E6%94%B9%E5%93%81%E7%89%8C>

4.1 后端代码
<https://blog.csdn.net/qq1031893936/article/details/80937789#4.1%20%E5%90%8E%E7%AB%AF%E4%BB%A3%E7%A0%81>

4.2 前端
<https://blog.csdn.net/qq1031893936/article/details/80937789#4.2%20%E5%89%8D%E7%AB%AF>

5、删除品牌
<https://blog.csdn.net/qq1031893936/article/details/80937789#5%E3%80%81%E5%88%A0%E9%99%A4%E5%93%81%E7%89%8C>

5.1 后端代码
<https://blog.csdn.net/qq1031893936/article/details/80937789#5.1%20%E5%90%8E%E7%AB%AF%E4%BB%A3%E7%A0%81>

5.2 前端
<https://blog.csdn.net/qq1031893936/article/details/80937789#5.2%20%E5%89%8D%E7%AB%AF>

6、品牌的条件查询
<https://blog.csdn.net/qq1031893936/article/details/80937789#6%E3%80%81%E5%93%81%E7%89%8C%E7%9A%84%E6%9D%A1%E4%BB%B6%E6%9F%A5%E8%AF%A2>

6.1 后端代码
<https://blog.csdn.net/qq1031893936/article/details/80937789#6.1%20%E5%90%8E%E7%AB%AF%E4%BB%A3%E7%A0%81>

6.2 前端
<https://blog.csdn.net/qq1031893936/article/details/80937789#6.2%20%E5%89%8D%E7%AB%AF>

 

1、品牌管理的列表功能

 

1.1 引入angular js文件



1.2 指定自定义模块和自定义控制器，并设置初始化调用



 

1.3 编写 JS 代码
// 自定义模块 var app = angular.module('pinyougou', []); //自定义控制器
app.controller('brandController', function ($scope, $http) { /* 查询品牌列表 */
$scope.findAll = function () { $http.get('../brand/findAll.do').success(
function (rtn) { $scope.brandList = rtn; } ); } });
 

1.4 修改页面，使用ng-repeat指令遍历brandList



 

1.5 测试



 

 

2、品牌列表的分页

 

 

2.1 后端代码

（1）服务层接口（sellergoods-interface），新增方法
/** * 分页查询品牌列表 * * @param pageNum 当前页码 * @param pageSize 每页记录数 * @return
entity.PageResult */ PageResult findByPage(int pageNum, int pageSize);
 

（2）服务层实现（sellergoods-service），新增实现
@Override public PageResult findByPage(int pageNum, int pageSize) { // 封装分页参数
PageHelper.startPage(pageNum, pageSize); // 执行查询 Page<TbBrand> pageInfo =
(Page<TbBrand>) brandMapper.selectByExample(null); // 封装分页结果对象 PageResult
result = new PageResult(); result.setTotal(pageInfo.getTotal());
result.setRows(pageInfo.getResult()); return result; }
 

（3）控制层，新增方法
/** * 获取品牌列表，分页显示 * * @param page 当前页码 * @param size 每页显示记录数 * @return
entity.PageResult */ @RequestMapping("/findByPage") public PageResult
findByPage(@RequestParam(defaultValue = "1") int page,
@RequestParam(defaultValue = "10") int size) { return
brandService.findByPage(page, size); }
 

（4）测试



 

 

2.2 前端代码

（1）引入分页插件的js和css文件



 

 

（2）在自定义模块中，引用分页插件，并在页面中添加分页，添加在table结束标签后



 



 

（3）新增 JS 代码
//分页控件配置 $scope.paginationConf = { //当前页 currentPage: 1, //总记录数 totalItems:
10, //每页记录数 itemsPerPage: 10, //可以选择的每页记录数 perPageOptions: [10, 20, 30, 40,
50], //选择每页记录数事件 onChange: function () { $scope.reloadList(); } }; //重新加载
$scope.reloadList = function () {
$scope.findByPage($scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage); }; /* 分页查询品牌列表 */ $scope.findByPage =
function (page, size) { $http.get('../brand/findByPage.do?page=' + page +
'&size=' + size).success( function (rtn) { //显示当前页的数据 $scope.brandList =
rtn.rows; //修改总记录数 $scope.paginationConf.totalItems = rtn.total; } ); };
 

（4）去掉 ng-init 指令

 

（5）测试



 

 

 

 

 

 

3、新增品牌

 

 

3.1 后端代码

（1）服务层接口（sellergoods-interface），新增方法
/** * 新增品牌 * * @param brand 品牌对象 */ void add(TbBrand brand);
 

（2）服务层实现（sellergoods-service），新增实现
@Override public void add(TbBrand brand) { // 封装查询条件 TbBrandExample example =
new TbBrandExample(); example.createCriteria().andNameEqualTo(brand.getName());
// 查询 List<TbBrand> list = brandMapper.selectByExample(example); if(list !=
null && list.size() > 0) { throw new PinyougouException("该品牌已存在"); }
brandMapper.insert(brand); }
 

 

 

（3）控制层
/** * 新增品牌 * * @param brand 品牌数据 * @return entity.Result */ public Result
add(@RequestBody TbBrand brand) { try { brandService.add(brand); return
Result.success("新增成功"); }catch (Exception e){ e.printStackTrace(); return
Result.error("新增失败"); } }
 

3.2 前端

（1）绑定变量，绑定保存按钮的单击事件



 

（2）新增 JS 代码
/* 新增品牌 */ $scope.add = function () { $http.post('../brand/add.do',
$scope.brand).success( function (rtn) { alert(rtn.message); if(rtn.success) {
//重新加载数据 $scope.reloadList(); } } ); };
 

（3）每次点击新增时，清空表单中的数据



 

 

 

4、修改品牌

 

4.1 后端代码

（1）服务层接口（sellergoods-interface），新增方法
/** * 按 id 获取品牌 * * @param id 品牌id * @return com.pinyougou.pojo.TbBrand */
TbBrand findOne(long id); /** * 更新品牌 * * @param brand 要更新的品牌 */ void
update(TbBrand brand);
 

（2）服务层实现（sellergoods-service），新增实现
@Override public TbBrand findOne(long id) { return
brandMapper.selectByPrimaryKey(id); } @Override public void update(TbBrand
brand) { // 封装查询条件 TbBrandExample example = new TbBrandExample();
example.createCriteria().andNameEqualTo(brand.getName()); // 查询 List<TbBrand>
list = brandMapper.selectByExample(example); if(list != null && list.size() >
0) { throw new PinyougouException("该品牌已存在"); }
brandMapper.updateByPrimaryKey(brand); }
 

（3）控制层（manager-web）
/** * 加载指定id的品牌 * * @param id 品牌id * @return com.pinyougou.pojo.TbBrand */
@RequestMapping("/findOne") public TbBrand findOne(long id) { return
brandService.findOne(id); } /** * 修改品牌 * * @param brand 品牌数据 * @return
entity.Result */ @RequestMapping("/update") public Result update(@RequestBody
TbBrand brand) { try { brandService.update(brand); return
Result.success("修改成功"); }catch (Exception e){ if(e instanceof
PinyougouException) { return Result.error(e.getMessage()); }
e.printStackTrace(); return Result.error("修改失败"); } }
 

4.2 前端

（1）修改按钮绑定单击事件



 

（2）编写 JS 代码加载要修改的品牌信息
/* 加载要修改的品牌到编辑品牌表单 */ $scope.findOne = function (id) {
$http.get('../brand/findOne.do?id=' + id).success( function (rtn) {
$scope.brand = rtn; } ); }
 

（3）改造保存按钮的单击事件


/* 新增品牌、修改品牌 */ $scope.save = function () { var method = ''; if
($scope.brand.id == null) { method = 'add'; } else { method = 'update'; }
$http.post('../brand/' + method + '.do', $scope.brand).success( function (rtn)
{ alert(rtn.message); if (rtn.success) { //重新加载数据 $scope.reloadList(); } } ); };
 

 

 

 

5、删除品牌

 

 

5.1 后端代码

（1）服务层接口（sellergoods-interface），新增方法
/** * 删除品牌 * * @param ids 被删除品牌的品牌id */ void delete(long[] ids);
 

（2）服务层实现（sellergoods-service），新增实现
@Override public void delete(long[] ids) { for (long id : ids){
brandMapper.deleteByPrimaryKey(id); } }
 

（3）控制层（manager-web）
/** * 删除品牌 * * @param ids 被删除品牌的品牌id * @return entity.Result */
@RequestMapping("/delete") public Result delete(long[] ids) { try {
brandService.delete(ids); return Result.success("删除成功"); }catch (Exception e){
if(e instanceof PinyougouException) { return Result.error(e.getMessage()); }
e.printStackTrace(); return Result.error("删除失败"); } }
 

5.2 前端

（1）删除按钮绑定事件



 

（2）复选框事件



 

（3）编写 JS 代码
//记录被勾选的id值 $scope.selectIds = []; /* 更新被勾选的id值 */ $scope.updateSelection =
function ($event,id) { if($event.target.checked) {//选中状态 //将id值加入selectIds
$scope.selectIds.push(id); } else {//取消选中 //获取id值的下标 var index =
$scope.selectIds.indexOf(id); //移除id $scope.selectIds.splice(index, 1); } } /*
删除操作 */ $scope.deleteBrandList = function () {
$http.get('../brand/delete.do?ids=' + $scope.selectIds).success( function (rtn)
{ alert(rtn.message); if(rtn.success) { //重新加载数据 $scope.reloadList(); } } ); }
 

 

 

6、品牌的条件查询

 

 

6.1 后端代码

（1）服务层接口（sellergoods-interface），新增方法
/** * 按条件查询品牌列表 * * @param brand 查询条件 * @param page 当前页码 * @param size
每页显示记录数 * @return entity.PageResult */ PageResult findByPage(TbBrand brand, int
page, int size);
 

（2）服务层实现（sellergoods-service），新增实现
@Override public PageResult findByPage(TbBrand brand, int page, int size) {
// 封装分页参数 PageHelper.startPage(page, size); // 创建查询条件 TbBrandExample example =
new TbBrandExample(); // 封装查询条件 if(brand != null) { TbBrandExample.Criteria
criteria = example.createCriteria(); if(brand.getName() != null &&
brand.getName().trim().length() > 0) { criteria.andNameLike("%" +
brand.getName() + "%"); } if(brand.getFirstChar() != null &&
brand.getFirstChar().trim().length() > 0) { criteria.andFirstCharLike("%" +
brand.getFirstChar() + "%"); } } // 执行查询 Page<TbBrand> pageInfo =
(Page<TbBrand>) brandMapper.selectByExample(example); // 封装分页结果对象 PageResult
result = new PageResult(); result.setTotal(pageInfo.getTotal());
result.setRows(pageInfo.getResult()); return result; }
 

（3）控制层（BrandController）
/** * 按条件获取品牌列表，分页显示 * * @param brand 查询条件 * @param page 当前页码 * @param size
每页显示记录数 * @return entity.PageResult */ @RequestMapping("/search") public
PageResult search(@RequestBody TbBrand brand, @RequestParam(defaultValue = "1")
int page, @RequestParam(defaultValue = "10") int size) { return
brandService.findByPage(brand, page, size); }
 

 

 

 

6.2 前端

（1）在页面添加查询输入框和按钮





 

（2）为查询输入框和按钮绑定变量和单击事件



 

（3）编写 JS 代码，改造 reloadList 方法
/* 条件查询 */ //初始化queryParam $scope.queryParam = {}; $scope.search = function
(page, size) { $http.post('../brand/search.do?page=' + page + '&size=' +
size,$scope.queryParam).success( function (rtn) { //显示当前页的数据 $scope.brandList =
rtn.rows; //修改总记录数 $scope.paginationConf.totalItems = rtn.total; } ); };


 

 

 

（4）测试



 

• « 上一篇：从万会之王到比特币中国CEO,赵昌宇和他的区块链收割之旅
• » 下一篇：Linux find常用用法示例