后台管理项目-品牌管理列表展示

需要像服务器发请求，获取数据进行展示

api/tabel.js是Mock的假数据，可以直接删除

新建api/product/tradeMark.js

//这个模块主要获取的是品牌管理的数据模块

//获取品牌列表接口，带有两个参数

//adimin/product/baseTrademark/{page}/{limit}

对外暴露一个函数，获取到一个Trademark列表，需要带参，品牌发请求是利用已经封装好的axios，需要对外暴露request。是一个get请求

//这个模块主要获取的是品牌管理的数据模块
//获取品牌列表接口，带有两个参数
//adimin/product/baseTrademark/{page}/{limit}
//品牌发请求是利用已经封装好的axios，先引入，然后需要对外暴露request。是一个get请求
import request from '@/utils/request'
export const reqTradeMarkList = (page,limit)=>request({url:`/adimin/product/baseTrademark/${page}/${limit}`,method:'get'
});

再新建一个Index.js

将四个模块的请求接口函数统一暴露

首先进行引入，然后对外暴露

//将四个模块的请求接口函数统一暴露
import *as trademark from './product/tradeMark';
import *as attr from './product/attr';
import *as spu from './product/spu';
import *as sku from './product/sku';

//对外暴露
export default{
    trademark,
    attr,
    sku,
    spu
}

import * as obj from，

这种写法是把所有的输出包裹到obj对象里。

import * as xxx from ‘xxx’: 会将若干export导出的内容组合成一个对象返回；

import xxx from ‘xxx’：（export default Din）只会导出这个默认的对象作为一个对象

vue 项目接口api批量挂载到vue实例上

为了方便，可以把暴露的挂载到vue的原型上，可以在任意的组件中使用

回到main.js中引入相关api接口

备注：

在项目开发中，每个页面都需要调用许多接口请求的接口api

之前我们项目开发的api导入方式

import { hSearch,hAdd,hDel } from './xxxx/xxxx

每个接口api都需要一个一个导入，不仅效率很低，代码结构也显得特别冗余，有两种批量挂载vue方式，可以根据自己的需求自行选择

 1.每个js文件单独导出后挂载

每个页面文件下新建index.js src / api / system / index.js
javascript import * as role from "./role" import * as log from "./log" export { role,log }
将文件中的.js文件导入，设置别名后导出

api文件夹下新建index.js文件 src / api / index.js

在api / index.js中引入后，挂载到vue原型上

在main.js中引入相关api请求接口

//在main.js中引入相关api请求接口
import API from '@/API';
//组件实例的原型的原型指向的是Vue.prototype，任何组件都可以使用
Vue.prototype.$API=api;

注释：

给Vue函数添加一个原型属性$axios 指向Axios，好处是在vue实例或组件中不用再去重复引用Axios，直接用this.$axios就能执行axios 方法了

vue.prototype是一种注册全局变量的方式，使用vue.prototype的变量可以全局访问。

使用Vue.prototype注册的全局变量前面都要加上$符号，这是一种规范，主要是为了防止命名冲突。

 

接下来看能不能获取

当组件已挂载，就要发请求了，在views组件文件夹中的tradeMark文件夹中进行发请求

<script>
export default {
    name: 'tradeMark',
    //组件挂载完毕发请求
    mounted(){
        console.log(this.$API);
    }
}
</script>

先测试一下能否获取到相关的API

页面点击品牌管理是可以成功从服务器获取到的发请求的接口

接下来需要拉取这些接口，获取数据，展示数据

点击分页的按钮，还需要进行展示，所以请求不能只发一次，所以，获取列表数据的方法

因为需要带两个参数，所以要在data里进行声明两个参数，并解构出两个参数后才可以带参数

<script>
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);
        }
    }
}

</script>