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

//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 */@Servicepublic 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;}

原文地址：https://www.cnblogs.com/newcityboy/p/12103658.html