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

Posted 2021-03-20 newcityboy

//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;
}