-
十六、商城 - 品牌管理-CRUD（4）
一、增加品牌
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
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
1.2.2 服务接口层
在youlexuan-sellergoods-interface 的 BrandService.java 新增方法定义
//新增 public void add(TbBrand brand);- 1
- 2
1.2.3 服务实现层
在com.zql.sellergoods.service.impl 的 BrandServiceImpl.java 实现该方法
//新增 @Override public void add(TbBrand brand) { brandMapper.insert(brand); }- 1
- 2
- 3
- 4
- 5
- 6
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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
为了每次打开窗口没有遗留上次的数据，我们可以修改新建按钮，对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);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
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); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
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, "更新失败"); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
2.3 前端代码
2.3.1 实现数据查询
增加JS代码
//查询 更新 $scope.findOne = function (id) { $http.get('../brand/findOne.do?id='+id).success(function (response) { $scope.entity = response; }) }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
修改列表中的“修改”按钮，调用此方法
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); } }); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
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);- 1
- 2
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); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
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, "删除失败"); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
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); } }); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
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);- 1
- 2
- 3
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()); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
注意：需要导入如下包
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); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
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;//给列表变量赋值 }) }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
修改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>- 1
- 2
- 3
- 4
- 5
- 6
4.4 测试运行
顺序启动以下2个服务youlexuan-sellergoods-service、youlexuan-manager-web
访问地址：
http://localhost:9101/admin/index.html点击：商品管理—》品牌管理----》输入品牌名称查询条件或者首字母，点击【查询】按钮，即可查询到对应数据。
查询前 无触发【查询】按钮 👇🏾👇🏾
查询后 触发【查询】按钮 👇🏾👇🏾
4.5 按条件查询品牌管理 bug 解决
👉🏾👉🏾 五、按条件查询品牌管理 bug 解决
4.6 附完整代码 👉🏾👉🏾 admin/brand.html 👇🏾👇🏾
DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>品牌管理title> <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"> <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css"> <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css"> <link rel="stylesheet" href="../css/style.css"> <script src="../plugins/jQuery/jquery-2.2.3.min.js">script> <script src="../plugins/bootstrap/js/bootstrap.min.js">script> <script src="../plugins/angularjs/angular.min.js">script> <script src="../plugins/angularjs/pagination.js">script> <link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <script> //构建app模块时引入pagination模块 var app = angular.module('brandApp',['pagination']);//定义优乐选模块，增加分页模块 app.controller('brandController',function ($scope,$http) { $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;//给列表变量赋值 }) }; $scope.findBrandAll = function(){ $http.get('../brand/findAll.do').success(function(response){ $scope.list = response; }) }; //重新加载列表 数据 $scope.reloadList=function(){ //切换页码 $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage); }; //分页控件配置 $scope.paginationConf = { //变量各属性的意义： currentPage: 1, //当前页码 totalItems: 5, //总条数 itemsPerPage: 5, perPageOptions: [5, 10, 15, 20, 30], //页码选项 onChange: function(){ //更改页面时触发的事件 $scope.reloadList();//重新加载 } }; /*分页*/ $scope.findPage = function(page,rows){ $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(function(response){ $scope.list = response.rows; $scope.paginationConf.totalItems = response.total;//更新总记录数 }) }; //新增保存 $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); } }); }; //查询 更新 $scope.findOne = function (id) { $http.get('../brand/findOne.do?id='+id).success(function (response) { $scope.entity = response; }) }; /** * 主要思路：我们需要定义一个用于存储选中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); } }) } }); script> head> <body class="hold-transition skin-red sidebar-mini" ng-app="brandApp" ng-controller="brandController" ng-init="reloadList()"> <div class="box-header with-border"> <h3 class="box-title">品牌管理h3> div> <div class="box-body"> <div class="table-box"> <div class="pull-left"> <div class="form-group form-inline"> <div class="btn-group"> <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={}" ><i class="fa fa-file-o">i> 新建button> <button type="button" class="btn btn-default" title="删除" ng-click="delete()"><i class="fa fa-trash-o">i> 删除button> <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh">i> 刷新button> div> div> div> <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> <div class="box-tools pull-right"> <div class="has-feedback"> div> div> <table id="dataList" class="table table-bordered table-striped table-hover dataTable"> <thead> <tr> <th class="" style="padding-right:0px"> <input id="selall" type="checkbox" class="icheckbox_square-blue"> th> <th class="sorting_asc">品牌IDth> <th class="sorting">品牌名称th> <th class="sorting">品牌首字母th> <th class="text-center">操作th> tr> thead> <tbody> <tr ng-repeat="entity in list" ng-click="updateSelection($event,entity.id)" > <td><input type="checkbox" >td> <td>{{entity.id}}td> <td>{{entity.name}}td> <td>{{entity.firstChar}}td> <td class="text-center"> <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)" >修改button> td> tr> tbody> table> div> {{selectIds}} <tm-pagination conf="paginationConf">tm-pagination> div> <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" > <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button> <h3 id="myModalLabel">品牌编辑h3> div> <div class="modal-body"> <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> div> <div class="modal-footer"> <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存button> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭button> div> div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
-
相关阅读:
springboot银行客户管理系统毕业设计源码250903
手摸手系列之SpringBoot+Vue整合snakeflow工作流实战
交叉导轨究竟用在哪里？
【新技术】是实现智慧燃气的基础
Vue入门
python的paramiko模块
双向链表的实现
【2015】【论文笔记】等离子光混合器THz辐射的光谱——
环境检测lims系统 环境检测行业实验室管理系统
Vue3封装全局插件
- 原文地址：https://blog.csdn.net/weixin_42171159/article/details/126176122
