商品品牌分页、过滤、排序查询的完成流程

//1、首先分析前台页面的请求，从中获取四要素：请求方式、请求参数、请求路径、返回值类型   2、书写controller、service、mapper、pojo

//品牌页面

<template>
  <div>
    <v-layout class="px-2">
 <v-flex xs2>
 <v-btn color="info" small>新增品牌</v-btn>
 </v-flex>
 <v-spacer/>
 <v-flex xs4>
 <v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
 </v-flex>
 </v-layout>
 <v-data-table
 :headers="headers"
 :items="brands"
 :pagination.sync="pagination"
 :total-items="totalBrands"
 :loading="loading"
 class="elevation-1"
 >
 <template slot="items" slot-scope="props">
 <td class="text-xs-center">{{props.item.id}}</td>
 <td class="text-xs-center">{{props.item.name}}</td>
 <td class="text-xs-center"><img :src="props.item.image" alt=""/></td>
 <td class="text-xs-center">{{props.item.letter}}</td>
 <td class="text-xs-center">
 <v-btn flat icon color="info">
 <v-icon>edit</v-icon>
 </v-btn>
 <v-btn flat icon color="error">
 <v-icon>delete</v-icon>
 </v-btn>
 </td>
 </template>
 error
 </v-data-table>
 </div>
</template>

<script>
 export default {
 name: "my-brand",
 data() {
 return {
 headers: [
 {text: "品牌ID", value: "id", align: "center", sortable: true},
 {text: "品牌名称", value: "name", align: "center", sortable: false},
 {text: "品牌LOGO", value: "image", align: "center", sortable: false},
 {text: "品牌首字母", value: "letter", align: "center", sortable: true},
 {text: "修改，删除", align: "center", sortable: false},
 ],
 brands: [],
 pagination: {},
 totalBrands: 0,
 loading: false,
 key:"", //搜索条件
 }
 },
 created() {
 this.brands = [
 {id: 2032, name: "OPPO", image: "1.jpg", letter: "O"},
 {id: 2033, name: "飞利浦", image: "2.jpg", letter: "F"},
 {id: 2034, name: "华为", image: "3.jpg", letter: "H"},
 {id: 2036, name: "酷派", image: "4.jpg", letter: "K"},
 {id: 2037, name: "魅族", image: "5.jpg", letter: "M"},
 ];
 this.totalBrands = 15;
 //发送请求去后台查询
 this.loadBrands();
 },
 watch:{
 key(){
 this.pagination.page=1;
 //this.loadBrands();
 },
 pagination:{
 deep:true,
 handler(){
 this.loadBrands();
 }
 }
 },
 methods:{
 loadBrands(){
 this.loading = true;
 this.$http.get("/item/brand/page",{
 params:{
 page:this.pagination.page, //当前页
 rows:this.pagination.rowsPerPage, //每页大小
 sortBy:this.pagination.sortBy, //排序字段
 desc:this.pagination.descending, //是否降序
 key:this.key //搜索条件
 }
 }).then(resp=>{
 //console.log(resp);
 this.brands = resp.data.items;
 this.totalBrands = resp.data.total
 this.loading = false;
 })
 }
 }
 }
</script>

<style scoped>

</style>


// controller层
package com.leyou.item.web;

import com.leyou.common.vo.PageResult;
import com.leyou.item.pojo.Brand;
import com.leyou.item.service.BrandService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author newcityman
 * @date 2019/12/26 - 14:23
 */
@RestController
@RequestMapping("brand")
public class BrandController {

 @Autowired
 private BrandService brandService;

 /**
 * 分页查询品牌
 * @param page
 * @param rows
 * @param sortBy
 * @param desc
 * @param key
 * @return
 */
 @GetMapping("page")
 public ResponseEntity<PageResult<Brand>> queryBrandByPage(
 @RequestParam(value="page",defaultValue="1") Integer page,
 @RequestParam(value="rows",defaultValue="5") Integer rows,
 @RequestParam(value="sortBy",required=false) String sortBy,
 @RequestParam(value="desc",defaultValue="false") Boolean desc,
 @RequestParam(value="key",required = false) String key
 ){
 PageResult<Brand> pageResult = brandService.queryBrandByPage(page,rows,sortBy,desc,key);
 return ResponseEntity.ok(pageResult);
 }
}

// service层

package com.leyou.item.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.leyou.common.enums.ExceptionEnum;
import com.leyou.common.exception.LyException;
import com.leyou.common.vo.PageResult;
import com.leyou.item.mapper.BrandMapper;
import com.leyou.item.pojo.Brand;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.CollectionUtils;
import tk.mybatis.mapper.entity.Example;

import java.util.List;

/**
 * @author newcityman
 * @date 2019/12/26 - 14:22
 */
@Service
public class BrandService {

 @Autowired
 private BrandMapper brandMapper;

 public PageResult<Brand> queryBrandByPage(Integer page, Integer rows, String sortBy, Boolean desc, String key) {
 //分页
 PageHelper.startPage(page, rows);
 //过滤
 Example example = new Example(Brand.class);
 if (StringUtils.isNotBlank(key)) {
 //过滤条件
 example.createCriteria().orLike("name", "%" + key + "%")
 .orEqualTo("letter", key.toUpperCase());
 }
 //排序
 if (StringUtils.isNotBlank(sortBy)) {
 String orderByClause = sortBy + (desc ? " DESC " : " ASC ");
 example.setOrderByClause(orderByClause);
 }
 //查询
 List<Brand> list = brandMapper.selectByExample(example);
 if (CollectionUtils.isEmpty(list)) {
 throw new LyException(ExceptionEnum.BRAND_NOT_FOUND);
 }
 //解析分页结果
 PageInfo<Brand> info = new PageInfo<>(list);

 return new PageResult<>(info.getTotal(), list);
 }
}

// mapper层

package com.leyou.item.mapper;

import com.leyou.item.pojo.Brand;
import tk.mybatis.mapper.common.Mapper;

/**
 * @author newcityman
 * @date 2019/12/26 - 14:21
 */
public interface BrandMapper extends Mapper<Brand> {
}

// pojo类

package com.leyou.item.pojo;

import lombok.Data;
import tk.mybatis.mapper.annotation.KeySql;

import javax.persistence.Id;
import javax.persistence.Table;

/**
 * @author newcityman
 * @date 2019/12/26 - 14:15
 */
@Data
@Table(name = "tb_brand")
public class Brand {
 @Id
 @KeySql(useGeneratedKeys = true)
 private Long id;
 private String name; //品牌名称
 private String image; //品牌图片
 private Character letter;
}