一、增加品牌
1.1 需求分析
实现品牌增加功能
1.2 后端代码
1.2.1 执行结果封装实体
目的：进行crud时最终的返回值
在youlexuan-pojo的com.zql.entity包下创建类Result.java
package com.zql.entity;
import java.io.Serializable;
/**
* @Author:Daniel
* @Version 1.0
*
* crud时返回的结果
*/
public class Result implements Serializable {
private boolean success;
private String message;
public Result(boolean success, String message) {
this.success = success;
this.message = message;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
1.2.2 服务接口层
在youlexuan-sellergoods-interface 的 BrandService.java 新增方法定义
//新增
public void add(TbBrand brand);
1.2.3 服务实现层
在com.zql.sellergoods.service.impl 的 BrandServiceImpl.java 实现该方法
//新增
@Override
public void add(TbBrand brand) {
brandMapper.insert(brand);
}
1.2.4 控制层
在youlexuan-manager-web的BrandController.java中新增方法
//新增
@RequestMapping("/add")
public Result add(@RequestBody TbBrand brand){ //@RequestBody 返回前端一个json形式的数
try {
brandService.add(brand);
return new Result(true, "新增成功");
}catch (Exception e){
e.printStackTrace();
return new Result(false, "新增失败");
}
}
1.3 前端代码
1.3.1 JS 代码
注：同分页一个层，都在brandController内
//新增保存
$scope.save = function(){
$http.post('../brand/add.do',$scope.entity).success(function (response) {
if(response.success){
$scope.reloadList();//重新加载
}else{
alert(response.message);
}
});
}
1.3.2 HTML
绑定表单元素，我们用ng-model指令，绑定按钮的单击事件我们用 ng-click (ng-click="save()")
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>品牌名称</td>
<td><input class="form-control" placeholder="品牌名称" ng-model="entity.name">
</td>
</tr>
<tr>
<td>首字母</td>
<td><input class="form-control" placeholder="首字母" ng-model="entity.firstChar">
</td>
</tr>
</table>
为了每次打开窗口没有遗留上次的数据，我们可以修改新建按钮，对entity变量进行清空操作
解决：此处添加 ng-click="entity={}" ????
1.4 测试运行
重新安装youlexuan_parent
顺序启动以下2个服务youlexuan-sellergoods-service、youlexuan-manager-web
访问地址：http://localhost:9101/admin/index.html
点击：商品管理—》品牌管理----》点击【新建】弹出新增品牌对话框，输入品牌名称、首字母，点击【保存】按钮，即可成功保存数据
保存成功显示 ????
保存失败显示 ???? （比如你首字母写了一个之上，就会保存失败）
二、修改品牌
2.1 需求分析
点击列表的修改按钮，弹出窗口，修改数据后点“保存”执行保存操作
2.2 后端代码
2.2.1 服务接口层
在youlexuan-sellergoods-interface的BrandService.java新增修改方法定义
/*
* 更新的时候先需要查询出来，再去更新
* */
//查询
public TbBrand findOne(Long id);
//更新
public void update(TbBrand tbBrand);
2.2.2 服务实现层
在youlexuan-sellergoods-service的BrandServiceImpl.java新增方法实现
//查询 更新
@Override
public TbBrand findOne(Long id) {
return brandMapper.selectByPrimaryKey(id);
}
@Override
public void update(TbBrand tbBrand) {
brandMapper.updateByPrimaryKey(tbBrand);
}
2.2.3 控制层
在youlexuan-manager-web的BrandController.java新增方法
//查询 更新
@RequestMapping("/findOne")
public TbBrand findOne(Long id){
return brandService.findOne(id);
}
@RequestMapping("/update")
public Result update(@RequestBody TbBrand tbBrand){
try {
brandService.update(tbBrand);
return new Result(true, "更新成功");
}catch (Exception e){
e.printStackTrace();
return new Result(false, "更新失败");
}
}
2.3 前端代码
2.3.1 实现数据查询
增加JS代码
//查询 更新
$scope.findOne = function (id) {
$http.get('../brand/findOne.do?id='+id).success(function (response) {
$scope.entity = response;
})
}
修改列表中的“修改”按钮，调用此方法 ng-click="findOne(entity.id)"执行查询实体的操作 ????
2.3.2 保存数据
修改JS的save方法
//新增保存
$scope.save = function(){
var methoName = 'add';
if ($scope.entity.id != null){ //不为空就为已经有这个数据，那就只能修改或删除
methoName = 'update';
}
$http.post('../brand/'+methoName+'.do',$scope.entity).success(function (response) {
if(response.success){
$scope.reloadList();//重新加载
}else{
alert(response.message);
}
});
}
2.4 测试运行
重新安装 youlexuan_parent
顺序启动以下2个服务youlexuan-sellergoods-service、youlexuan-manager-web
访问地址：http://localhost:9101/admin/index.html
点击：商品管理—》品牌管理----》选择一个商品，点击对应的【修改】
修改前：????
修改后 ：????
遇错排错 ????
解决：返回不是 void
现在就查询到了
三、删除品牌
3.1 需求分析
点击列表前的复选框，点击删除按钮，删除选中的品牌。
3.2 后端代码
3.2.1 服务接口层
在youlexuan-sellergoods-interface的BrandService.java接口定义方法
//批量删除
public void delete(Long[] ids);
3.2.2 服务实现层
在youlexuan-sellergoods-service的BrandServiceImpl.java实现该方法
//批量删除
@Override
public void delete(Long[] ids) {
if(ids != null && ids.length > 0 ){
for(Long id: ids){
brandMapper.deleteByPrimaryKey(id);
}
}
3.2.3 控制层
在youlexuan-manager-web的BrandController.java中增加方法
//批量删除
@RequestMapping("/delete")
public Result delete(Long []ids){
try {
brandService.delete(ids);
return new Result(true, "删除成功");
}catch (Exception e){
e.printStackTrace();
return new Result(false, "删除失败");
}
}
3.3 前端代码
3.3.1 JS
/**
* 主要思路：我们需要定义一个用于存储选中ID的数组，当我们点击复选框后判断是选择还是取消选择，
* 如果是选择就加到数组中，如果是取消选择就从数组中移除。在点击删除按钮时需要用到这个存储了ID的数组。
这里我们补充一下JS的关于数组操作的知识
（1）数组的push方法：向数组中添加元素
（2）数组的splice方法：从数组的指定位置移除指定个数的元素 ，参数1为位置 ，参数2位移除的个数
（3）复选框的checked属性：用于判断是否被选中
*/
//批量删除
$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);//删除
}
}
$scope.delete = function () {
//获取选中的复选框
$http.get('../brand/delete.do?ids='+$scope.selectIds).success(function (response) {
if(response.success){
$scope.reloadList();//重新加载
}else{
alert(response.message);
}
});
}
3.3.2 HTML
（1）修改列表的复选框 ng-click="updateSelection($event,entity.id)"
（2）修改删除按钮 ng-click="delete()"
3.4 测试运行
重新安装 youlexuan_parent
顺序启动以下2个服务youlexuan-sellergoods-service、youlexuan-manager-web
访问地址：http://localhost:9101/admin/index.html
点击：商品管理—》品牌管理----》选择一个或者几个商品，点击【删除】按钮，即可删除数据。
删除前 ????
删除后 ????
四、品牌条件查询
4.1 需求分析
实现品牌条件查询功能，输入品牌名称、首字母后查询，并分页。
4.2 后端代码
4.2.1 服务接口层
在youlexuan-sellergoods-interface工程的BrandService.java方法增加方法定义
//按条件查询 查到一个是一个，查到多的按正常分页显示
public PageResult searchPage(TbBrand tbBrand,int pageNum,int pageSize);
4.2.2 服务实现层
在youlexuan-sellergoods-service工程BrandServiceImpl.java实现该方法
//按条件进行查询
@Override
public PageResult searchPage(TbBrand tbBrand, int pageNum, int pageSize) {
PageHelper.startPage(pageNum,pageSize);
TbBrandExample brandExample = new TbBrandExample();
TbBrandExample.Criteria criteria = brandExample.createCriteria();
if(tbBrand != null){
if(tbBrand.getName() != null && tbBrand.getName().length() > 0){
criteria.andNameLike("%"+tbBrand.getName()+"%");
}
if(tbBrand.getFirstChar() != null && tbBrand.getFirstChar().length() > 0){
criteria.andFirstCharEqualTo(tbBrand.getFirstChar());
}
}
Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(brandExample);
return new PageResult(page.getTotal(),page.getResult());
}
注意：需要导入如下包
import com.zql.pojo.TbBrand;
import com.zql.pojo.TbBrandExample;
4.2.3 控制层
在youlexuan-manager-web的BrandController.java增加方法
//批量查询
/*
* 查询 + 分页
* */
@RequestMapping("/search")
public PageResult search(@RequestBody TbBrand tbBrand,int page,int rows){
return brandService.searchPage(tbBrand,page,rows);
}
4.3 前端代码
4.3.1 JS
修改youlexuan-manager-web的
$scope.searchEntity={};//定义搜索对象
//批量查询
$scope.search = function (page,rows) {
$http.post('../brand/search.do?page='+page+'&rows='+rows,$scope.searchEntity).success(function (response) {
$scope.paginationConf.totalItems=response.total;//总记录数
$scope.list=response.rows;//给列表变量赋值
})
}
修改reloadList方法为 search
4.3.2 Html
修改brand.html，增加查询条件、查询按钮（应该前面就加进去啦）
<div class="box-tools pull-right">
<div class="has-feedback">品牌名称:<input ng-model="searchEntity.name">
品牌首字母:<input ng-model="searchEntity.firstChar">
<button class="btn btn-default" ng-click="reloadList()">查询</button>
</div>
</div>
4.4 测试运行
顺序启动以下2个服务youlexuan-sellergoods-service、youlexuan-manager-web
访问地址：http://localhost:9101/admin/index.html
点击：商品管理—》品牌管理----》输入品牌名称查询条件或者首字母，点击【查询】按钮，即可查询到对应数据。
查询前 无触发【查询】按钮 ????
查询后 触发【查询】按钮 ????
4.5 按条件查询 bug 解决
不出现列表信息
报错：????
解决：
再次解决：多加了一个tBrand，去掉即可 ✌✌
