1. 品牌列表实现
1.1 数据库表
tb_brand 品牌表
| 字段 |
类型 |
长度 |
含义 |
| Id |
Bigint |
|
主键 |
| Name |
Varchar |
255 |
品牌名称 |
| First_char |
Varchar |
1 |
品牌首字母 |
1.2 后端代码开发
1.2.1 服务层接口
在pinyougou-sellergoods-interface 工程创建BrandService接口
package com.pinyougou.sellergoods.service;
import java.util.List;
import com.pinyougou.pojo.TbBrand;
/**
* 品牌接口
* @author Administrator
*
*/
public interface BrandService {
/**
* 返回品牌列表
* @return
*/
List<TbBrand> findAll();
}
1.2.2 服务实现类
在pinyougou-sellergoods-service 工程创建BrandServiceImpl类
package com.pinyougou.sellergoods.service.impl;
import java.util.List;
import javax.annotation.Resource;
import com.alibaba.dubbo.config.annotation.Service;
import com.pinyougou.mapper.TbBrandMapper;
import com.pinyougou.pojo.TbBrand;
import com.pinyougou.sellergoods.service.BrandService;
/**
* 品牌服务实现类
* @author Administrator
*
*/
@Service
public class BrandServiceImpl implements BrandService{
@Resource
private TbBrandMapper brandMapper;
@Override
public List<TbBrand> findAll() {
return brandMapper.selectByExample(null);
}
}
注意：
1）类上的注解@Service是dubbox包下的（com.alibaba.dubbo.config.annotation.Service）
2）如果关联不上接口与mapper，引一下依赖
1.2.3 Controller层代码编写
品牌管理应该是运营商的权限，商家是没有权限管理的，所以应该在pinyougou-manager-web工程创建com.pinyougou.manager.controller包，包下创建BrandController类
1）添加interface依赖
<!-- 添加interface依赖 -->
<dependency>
<groupId>com.pinyougou</groupId>
<artifactId>pinyougou-sellergoods-interface</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>2）BrandController.java
package com.pinyougou.manager.controller;
import java.util.List;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.alibaba.dubbo.config.annotation.Reference;
import com.pinyougou.pojo.TbBrand;
import com.pinyougou.sellergoods.service.BrandService;
/**
* @author Administrator
*
*/
@RestController
@RequestMapping("/brand")
public class BrandController {
@Reference
private BrandService brandService;
@RequestMapping("/findAll")
public List<TbBrand> findAll(){
return brandService.findAll();
}
}
注意：这里注入用@Reference，远程注入
1.3 测试
1）启动zookeeper
2）启动pinyougou-sellergoods-service
3）启动pinyougou-manager-web
输入网址：http://localhost:9101/brand/findAll.do 浏览器返回json数据如图：
1.3 前端开发
1.3.1 静态原型准备
1.3.2 引入angular
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>1.3.3 品牌列表数据获取
1）js代码
<script>
var app = angular.module("pinyougou",[]);
app.controller("brandController",function($scope,$http){
// 查询品牌列表
$scope.findAll = function(){
$http.get("../brand/findAll.do").success(function(response){
$scope.list = response;
});
}
});
</script>2）引入angular相关指令
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" ng-init="findAll()">3）循环list，展示品牌数据
<tbody>
<tr ng-repeat="brand in list">
<td><input type="checkbox" ></td>
<td>{{brand.id}}</td>
<td>{{brand.name}}</td>
<td>{{brand.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
</td>
</tr>
</tbody>1.3.4 访问测试
1.4 分页功能实现
1.4.1 后端
1）分页结果封装实体类
在pinyougou-pojo工程中创建entity包，用于存放通用实体类，创建类PageResult
package entity;
import java.io.Serializable;
import java.util.List;
/**
* 分页结果类
* @author Administrator
* @param <T>
*/
public class PageResult<T> implements Serializable {
private static final long serialVersionUID = -8744309372650296153L;
private Long total;
private List<T> rows;
public PageResult() {
super();
// TODO Auto-generated constructor stub
}
public PageResult(Long total, List<T> rows) {
super();
this.total = total;
this.rows = rows;
}
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
@Override
public String toString() {
return "PageResult [total=" + total + ", rows=" + rows + "]";
}
}
2）服务层编写
在pinyougou-sellergoods-interface的BrandService.java 增加方法定义
/**分页查询品牌列表
* @param pageNum 当前页
* @param pagesize 每页记录数
* @return
*/
PageResult<TbBrand> findPage(int pageNum,int pagesize);在pinyougou-sellergoods-service的BrandServiceImpl.java中实现该方法
@Override
public PageResult<TbBrand> findPage(int pageNum, int pagesize) {
PageHelper.startPage(pageNum, pagesize); // 分页
Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);
return new PageResult<>(page.getTotal(), page.getResult());
}3）web层
在pinyougou-manager-web工程的BrandController.java新增方法
@RequestMapping("/findPage")
public PageResult<TbBrand> findPage(int page,int size){
return brandService.findPage(page, size);
}访问结果如图：
1.4.2 前端
1）引入分页插件
在brand.html的head部分添加如下代码
<!-- 分页组件开始 -->
<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->2）构建app模块时引入pagination模块
var app = angular.module("pinyougou",['pagination']);3）在表格下放置分页组件
<tm-pagination conf="paginationConf"></tm-pagination>如图：
4）设置分页paginationConf 属性
$scope.paginationConf = {
currentPage: 1,
totalItems: 10,
itemsPerPage: 10,
perPageOptions: [10, 20, 30, 40, 50],
onChange: function(){
}
};
参数解释；
currentPage：当前页
totalItems：总记录数
itemsPerPage：每页记录数
perPageOptions：分页选项
注意：这里的paginationConf与<tm-pagination conf="paginationConf"></tm-pagination>中的conf的属性值必须保持一致
5）编写前端分页逻辑
// 查询品牌分页列表
$scope.findPage = function(page,size){
$http.get("../brand/findPage?page=" + page + "&size=" + size).success(function(response){
$scope.list = response.rows; // 显示当前页数据
$scope.paginationConf.totalItems = response.total; // 修改总记录数
});
}6）分页调用逻辑编写
// 刷新列表
$scope.reloadList = function(){
$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}在分页属性的onChange中加入分页调用
7）去掉body上的ng-init="findAll()"，因为分页插件自动会触发分页方法
测试结果：
2. 增加品牌
2.1 后端代码实现
2.1.1 结果类创建
为了系统的友好型，我们需要在操作成功或者失败的时候，给用户一个有好的 提示，所以定义一个Result类用于记录后端的返回信息给前端，当然也可以用map
package entity;
import java.io.Serializable;
/**
* 后端返回给前端的结果
* @author Administrator
*
*/
public class Result implements Serializable{
private Boolean success; // 是否成功
private String message; // 返回的信息
public Boolean getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public Result(Boolean success, String message) {
super();
this.success = success;
this.message = message;
}
public Result() {
super();
}
}
2.1.2 服务层添加方法
1）接口添加add方法
/**
* 添加品牌
* @param brand
*/
void add(TbBrand brand);2）实现类添加方法
@Override
public void add(TbBrand brand) {
brandMapper.insert(brand);
}2.1.3 web层添加add方法
@RequestMapping("/add")
public Result add(@RequestBody TbBrand brand){
try {
brandService.add(brand);
return new Result(true, "添加成功！");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "添加失败！");
}
}2.2 前端代码实现
1）添加逻辑代码
// 新增
$scope.add = function(){
$http.post("../brand/add",$scope.entity).success(function(response){
if(response.success){
$scope.reloadList();
} else {
alert(response.message);
}
});
}2）页面编写
<!-- 编辑窗口 -->
<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="add()">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>测试：
3. 品牌修改
3.1 后端代码
1）接口代码编写
/**
* 根据ID查询品牌信息
* @param id
* @return
*/
TbBrand findOne(Long id);
/**修改品牌信息
* @param brand
* @return
*/
void update(TbBrand brand);2）服务层代码代码编写
@Override
public TbBrand findOne(Long id) {
return brandMapper.selectByPrimaryKey(id);
}
@Override
public void update(TbBrand brand) {
brandMapper.updateByPrimaryKey(brand);
}3）web层代码编码
/** 根据ID查询
* @param id
* @return
*/
@RequestMapping("findOne")
public TbBrand findOne(Long id){
return brandService.findOne(id);
}
/**
* 添加品牌
* @param brand
* @return
*/
@RequestMapping("/update")
public Result update(@RequestBody TbBrand brand){
try {
brandService.update(brand);
return new Result(true, "修改成功！");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "修改失败！");
}
}3.2 前端代码编写
1）添加根据id查询的方法
// 根据id查询
$scope.findOne = function(id){
$http.get("../brand/findOne.do?id="+id).success(function(response){
$scope.entity = response;
});
}2）添加修改事件
3）修改保存方法
测试：
4. 品牌删除
4.1 后端代码
1）dao层代码
接口
/**根据id批量删除
* @param ids
*/
void delByIds(@Param("ids") Long[] ids);xml
<!-- 根据ID批量删除 -->
<delete id="delByIds" parameterType="long">
delete from tb_brand
where id in (
<foreach collection="ids" separator="," item="id">
#{id}
</foreach>
);
</delete>2）接口代码
/** 根据id批量删除
* @param ids
*/
void delete(Long[] ids);3）服务层业务逻辑
@Override
public void delete(Long[] ids) {
brandMapper.delByIds(ids);
}4）web层
/**
* 批量删除品牌
* @param brand
* @return
*/
@RequestMapping("/delete")
public Result delete(Long[] ids){
try {
brandService.delete(ids);
return new Result(true, "删除成功！");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "删除失败！");
}
}4.2 前端代码
1）业务代码
// 定义一个变量用于记录用户选中的记录id
$scope.selectIds = [];
// 定义选中函数
$scope.updateSelection = function($event,id){
if($event.target.checked){ // 如果复选框被选中了
$scope.selectIds.push(id);
} else {
$scope.selectIds.splice($scope.selectIds.indexOf(id), 1);
}
}
// 删除
$scope.dele = function(){
$http.get("../brand/delete.do?ids="+$scope.selectIds).success(function(response){
if(response.success){
$scope.reloadList();
$scope.selectIds = [];
} else {
alert(response.message);
}
});
}2）页面改造
删除按钮
复选框
注意：这里的$event表示input的源，$event.target表示input
4.3 测试
5. 条件查询
5.1 后端代码
条件查询只需要在之前的分页上加上条件就可以了，所以我们改造一下之前的findPage方法
1）接口
/**分页查询品牌列表
* @param pageNum 当前页
* @param pagesize 每页记录数
* @return
*/
PageResult<TbBrand> findPage(TbBrand brand,int pageNum,int pagesize);2）服务层
@Override
public PageResult<TbBrand> findPage(TbBrand brand,int pageNum, int pagesize) {
PageHelper.startPage(pageNum, pagesize); // 分页
TbBrandExample example = null;
if(null != brand){
example = new TbBrandExample();
Criteria createCriteria = example.createCriteria();
if(!StringUtils.isEmpty(brand.getName())){
createCriteria.andNameLike("%" + brand.getName() + "%");
}
if(!StringUtils.isEmpty(brand.getFirstChar())){
createCriteria.andFirstCharEqualTo(brand.getFirstChar());
}
}
Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(example);
return new PageResult<>(page.getTotal(), page.getResult());
}3）web层
/**
* 分页查询
* @param page
* @param size
* @return
*/
@RequestMapping("/findPage")
public PageResult<TbBrand> findPage(@RequestBody TbBrand brand,int page,int size){
return brandService.findPage(brand,page, size);
}5.2 前端代码
1）添加查询界面代码
<div class="box-tools pull-right">
<div class="has-feedback">
品牌名称：<input ng-model="seachEntity.name" />
品牌首字母：<input ng-model="seachEntity.firstChar" />
<button class="btn btn-default" ng-click="reloadList()">查询</button>
</div>
</div>2）改造findPage
$scope.seachEntity = {};
// 查询品牌分页列表
$scope.findPage = function(page,size){
$http.post("../brand/findPage.do?page=" + page + "&size=" + size,$scope.seachEntity).success(function(response){
$scope.list = response.rows; // 显示当前页数据
$scope.paginationConf.totalItems = response.total; // 修改总记录数
});
}5.3 测试
