springCloud+Vue改造品优购第二章--------品牌管理分页实现

从mapper到服务发布

TbBrandMapper

package com.pyg.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.baomidou.mybatisplus.plugins.pagination.Pagination;
import com.pyg.entity.TbBrand;
import com.pyg.entity.TbBrandExample;


@Mapper
public interface TbBrandMapper extends BaseMapper{
    /**
     * 分页查询
     * @param page  分页封装类
     * @param example   条件查询参数
     * @return
     */
    List selectByExample(Pagination page, TbBrandExample example);
}

BrandService

import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.IService;
import com.pyg.entity.TbBrand;
import com.pyg.entity.TbBrandExample;

public interface BrandService extends IService{
    public Page pageList(TbBrandExample brandExample);
}

BrandServiceImpl

package com.pyg.service.impl;

import org.springframework.stereotype.Service;

import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.pyg.entity.TbBrand;
import com.pyg.entity.TbBrandExample;
import com.pyg.mapper.TbBrandMapper;
import com.pyg.service.BrandService;

@Service
public class BrandServiceImpl extends ServiceImpl   implements BrandService {
    @Override
    public Page pageList(TbBrandExample brandExample) {
        Page page = new Page<>();
        page.setRecords(this.baseMapper.selectByExample(page, brandExample));
        return page;
    }
}

发布服务 BrandController

package com.pyg.manage.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.baomidou.mybatisplus.plugins.Page;
import com.pyg.entity.TbBrand;
import com.pyg.entity.TbBrandExample;
import com.pyg.service.BrandService;

@RestController
@RequestMapping("/brand")
public class BrandController {
    @Autowired
    private BrandService brandService;
    @RequestMapping("/list")
    public Page list(TbBrandExample brandExample){
        return brandService.pageList(brandExample);
    }
}

服务测试

用postman访问服务

服务调用

package com.pyg.manage.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;

import com.baomidou.mybatisplus.plugins.Page;
import com.pyg.consts.AppConsts;
import com.pyg.entity.TbBrand;

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

    @Autowired
    private RestTemplate template;

    @SuppressWarnings("unchecked")
    @RequestMapping("/list")
    public Page list(){
        return template.getForObject(AppConsts.MANAGE_SERVICE_URL+"/brand/list", Page.class);
    }

}

前端

<template>
    <div>
        <Row>
            <Table :columns="brandTableColums" :data="tableData.records" border>Table>
            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                            align-items: center;
                            justify-content: center;background: rgba(210, 216, 222, 0.5);" v-if="list_loadding">
                <Spin size="large">Spin>
                <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...h6>
            div>
        Row>
        <Row>
            <div>
                <div class="toolspan">
                    <Page class="toolspan-pager" show-total show-sizer show-elevator
                          :page-size="tableData.size"
                          :current="tableData.current"
                          :total="tableData.total">Page>
                div>
            div>
        Row>
    div>

template>

<script>
    export default {
        data () {
            return {
                //按钮权限控制变量
                isAdd: true,
                isBatchdel: true,

                tableData: [],
                brandTableColums: [
                    {type: 'selection',width: 60,align: 'center'},
                    {title:"序号",width:65,align:"center",
                        render:(h,params)=>{
                            return h('div', (this.tableData.current-1)*this.tableData.size+params.index+1);
                        }
                    },
                    {
                        title: '品牌名称',
                        key: 'name'
                    },
                    {
                        title: '首字母',
                        key: 'first_char'
                    }
                ],
            }
        },

        methods: {

        },
        mounted(){
            this.$store.dispatch("manage_brandList").then(res =>{
                this.tableData = res.data;
                console.log(res)
            }).catch(err =>{
                this.$Message.error(err)
            })
        }
    }
script>

<style>

style>

分页实现

目前暂未实现上一页/下一页的跳转，明天晚上更新。。。