Vue后台管理系统项目(6)品牌列表展示

gitee仓库地址:

1.书写tradeMark的接口

2.统一对外暴露

3. 把对外暴露的数据挂在Vue的原型上

4.在tradeMark组件中测试$API

5.在组件中获取到数据

6.数据展示到页面

6.1利用data存储数据

6.2利用tape='index'展示序号

6.7分页器点击切换功能实现-------@current-change

6.8改变某一页显示条数,数据也进行改变------@size-change

gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

前期工作

先删除table.sj文件,因为这里获取的是假数据

我们知道下图中每一个模块都有属于自己的接口

所以我们在api文件夹下,新建一个product文件夹,里面创建四个模块

接口地址:http://39.98.123.211:8416/swagger-ui.html

我们需要分页列表这个接口/admin/product/baseTrademark/{page}/{limit}

我们还可以看到需要携带两个参数,当前页码page和每页记录数limit

1.书写tradeMark的接口

在api/product/tradeMark.js中:

2.统一对外暴露

因为这四个模块都是要对对外暴露的,所以我们统一在一个文件中对外暴露

在api/index.js中:

3. 把对外暴露的数据挂在Vue的原型上

这样做的好处是可以在任意的组件中使用这些函数

在main.js中:

4.在tradeMark组件中测试$API

在views/product/tradeMark/index.vue中:

我们先看看$API我们能否获取到

控制台:

获取成功

5.在组件中获取到数据

当组件一挂载应该获取服务器的数据,展示数据,但是获取我们这里列表的数据并不是只获取一次,当我们点击分页的按钮的时候,还需要获取相应的页数的数据进行展示,所以这个接口发请求的时候,不可能只发一次的

在views/product/tradeMark/index.vue中:

 export default {
    name:'tradeMark',
    data(){
      return {
        //代表的分页器第几页
        page:1,
        //当前页数展示数据条数
        limit:3,
      }
    },
    //组件挂载完毕
    mounted () {
      // console.log(this.$API);
      //获取列表数据的方法
      this.getPageList()
    },
    methods: {
      //获取品牌列表的数据
      async getPageList() {
        //解构出参数
        const {page,limit} = this
        //获取品牌列表的接口
        //当你向服务器发请求的时候,这个阿含糊需要带参数,所以我们在data中初始化两个字段,代表给服务器传递参数
        let result =  await this.$API.trademark.reqTradeMarkList(page,limit)
        console.log(result)
      }
    },
  }

查看打印的结果:里面有我们需要的数据

code200表示成功,里面records是数组,total是我们需要的总共数据条数

数据放到组件身上:

在views/product/tradeMark/index.vue中:

export default {
    name:'tradeMark',
    data(){
      return {
        //代表的分页器第几页
        page:1,
        //当前页数展示数据条数
        limit:3,
        //总共数据条数
        total:0,
        //列表展示的数据
        list:[]
      }
    },
    //组件挂载完毕
    mounted () {
      // console.log(this.$API);
      //获取列表数据的方法
      this.getPageList()
    },
    methods: {
      //获取品牌列表的数据
      async getPageList() {
        //解构出参数
        const {page,limit} = this
        //获取品牌列表的接口
        //当你向服务器发请求的时候,这个阿含糊需要带参数,所以我们在data中初始化两个字段,代表给服务器传递参数
        let result =  await this.$API.trademark.reqTradeMarkList(page,limit)
        // console.log(result)
        if(result.code==200){
          //分别是展示数据的总条数与列表展示的数据
          this.total = result.data.total
          this.list = result.data.records
        }
      }
    },
  }

上面代码新增这些: