乐优商城（03）–品牌管理

乐优商城（03）–品牌管理

后台品牌管理页面预览

一、前端页面修改

在/src/pages/item/Brand.vue页面的<v-card-title>标签中新增

<v-btn color="error" @click="deleteCheckBrand">删除选中</v-btn>

在<v-data-table>标签中新增，如图：

在<template slot="items" slot-scope="props">标签内的头部，添加以下内容:

<td class="text-xs-center">
  <v-checkbox v-model="props.selected" primary hide-details>
  </v-checkbox>
</td>

在data()中添加一个数据模型：

selected:[] //选择的条目

二、品牌查询

2.1、实体类Brand

@Table(name = "tb_brand")
public class Brand {
   
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;// 品牌名称
    private String image;// 品牌图片
    private Character letter;
    // getter setter 略
}

2.2、mapper

/**
 * Brand类的通用mapper
 */
public interface BrandMapper extends Mapper<Brand> {
   
}

2.3、controller

编写controller先思考四个问题，参照前端页面的控制台

• 请求方式：查询，肯定是Get
• 请求路径：分页查询，/brand/page
• 请求参数：根据我们刚才编写的页面，有分页功能，有排序功能，有搜索过滤功能，因此至少要有5个参数：
  • page：当前页，int
  • rows：每页大小，int
  • sortBy：排序字段，String
  • desc：是否为降序，boolean
  • key：搜索关键词，String
• 响应结果：分页结果一般至少需要两个数据
  • total：总条数
  • items：当前页数据
  • totalPage：有些还需要总页数

这里我们封装一个类，来表示分页结果，这个PageResult以后可能在其它项目中也有需求，因此将其抽取到leyou-common中，提高复用性：

public class PageResult<T> {
   

    private Long total;         //数据的总条数
    private Integer totalPage;  //总页数
    private List<T> items;      //当前页数据

    public PageResult() {
   
    }

    public PageResult(Long total, List<T> items) {
   
        this.total = total;
        this.items = items;
    }

    public PageResult(Long total, Integer totalPage, List<T> items) {
   
        this.total = total;
        this.totalPage = totalPage;
        this.items = items;
    }

    public Long getTotal() {
   
        return total;
    }

    public void setTotal(Long total) {
   
        this.total = total;
    }

    public Integer getTotalPage() {
   
        return totalPage;
    }

    public void setTotalPage(Integer totalPage) {
   
        this.totalPage = totalPage;
    }

    public List<T> getItems() {
   
        return items;
    }

    public void setItems(List<T> items) {
   
        this.items = items;
    }
}

在leyou-item-service中引入leyou-common的依赖

<dependency>
    <groupId>com.leyou.common</groupId>
    <artifactId>leyou-common</artifactId>
    <version>0.0.1-SNAPSHOT</version>
</dependency>

接下来编写controller：

@RestController
@RequestMapping("/brand")
public class BrandController {
   

    @Autowired
    private BrandService brandService;

    /**
     * 根据查询条件分页并排序查询品牌信息
     * @param key
     * @param page
     * @param rows
     * @param sortBy
     * @param desc
     * @return
     */
    @GetMapping("/page")
    public ResponseEntity<PageResult<Brand>> queryBrandByPage(
            @RequestParam(value = "key",required = false) String key,
            @RequestParam(value = "page",defaultValue = "1") Integer page,
            @RequestParam(value = "rows",defaultValue = "5") Integer rows,
            @RequestParam(value = "sortBy",required = false) String sortBy,
            @RequestParam(value = "desc",required = false) Boolean desc
    ){
   
        PageResult<Brand> result = this.brandService.queryBrandByPage(key,page,rows,sortBy,desc);
        if (CollectionUtils.isEmpty(result.getItems())){
   
            return ResponseEntity.notFound().build();
        }
        return ResponseEntity.ok(result);
    }
}

service

PageResult<Brand> queryBrandByPage(String key, Integer page, Integer rows, String sortBy, Boolean desc);

实现类：

@Service
public class BrandServiceImpl implements BrandService {
   

    @Autowired
    private BrandMapper brandMapper;
    /**
     * 根据查询条件分页并排序查询品牌信息
     *
     * @param key
     * @param page
     * @param rows
     * @param sortBy
     * @param desc
     * @return
     */
    @Override
    public PageResult<Brand> queryBrandByPage(String key, Integer page, Integer rows, String sortBy, Boolean desc) {
   
        // 初始化example对象
        Example example = new Example(Brand.class);
        Example.Criteria criteria = example.createCriteria();
        // 根据name模糊查询，或者根据首字母查询
        if (StringUtils.isNotBlank(key)){
   
            criteria.andLike("name","%" + key + "%").orEqualTo("letter",key);
        }
        // 添加分页条件
        PageHelper.startPage(page,rows);
        // 添加排序条件
        if (StringUtils.isNotBlank(sortBy)){
   
            example.setOrderByClause(sortBy + " " + (desc ? "desc" : "asc"));
        }
        List<Brand> brands = this.brandMapper.selectByExample(example);
        //封装为brandPageInfo
        PageInfo<Brand> brandPageInfo = new PageInfo<>(brands);
        // 封装成分页结果集返回
        return new PageResult<>(brandPageInfo.getTotal(),brandPageInfo.getList());
    }
}

2.4、前端逻辑代码：

mounted(