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

目录

gitee仓库地址:

 1.书写tradeMark的接口

 2.统一对外暴露

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

 4.在tradeMark组件中测试$API

 5.在组件中获取到数据

 6.数据展示到页面

6.1利用data存储数据

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

6.3 利用prop展示品牌名称

6.4 作用域插槽展示品牌LOGO

6.5 作用域插槽展示操作

6.6分页器动态展示

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中: