VUE中AXIOS封装和element-ui表格复用组件

VUE中AXIOS封装和element-ui表格复用组件

一、axios的封装

​ 使用了element-ui和js-cookie，还有自己写的日期格式化工具

import axios from "axios";
import {Message} from "element-ui";
import cookie from "js-cookie";
import {formatDates} from "@/utils/format";

const service = axios.create({
    //请求链接前缀
    baseURL: 'http://192.168.6.188:81',
    //超时时间
    timeout: 3 * 1000,
    //检查跨站点访问控制
    // withCredentials: true,
});

//发送请求拦截
service.interceptors.request.use(config => {
    //获取本地浏览器中，是否有登录令牌
    const token = cookie.get('Token');
    if (token && token !== '' && token !== 'null' && token !== 'undefined') {
        //有就每次请求携带上这个token，避免请求被拦截（按照自身业务需求设置）
        config.headers.Authorization = 'Bearer ' + token;
        config.headers.Token = token;
    }
    return config;
}, err => {
    Message({
        message: '发送请求失败,请检查当前网络环境！',
        type: 'error',
        center: true
    })
    return Promise.reject(error);
})


//接受响应拦截
service.interceptors.response.use(response => {
    //判断响应状态为正常时
    if (response.status === 200) {
        //这里存一下token，判断放token的字段有没有
        if (response.data.data !== null && response.data.data.userinfo !== undefined) {
            //判断返回数据有无token和过期时间，有就存入到浏览器中，并设置cookie过期时间
            if (response.data.data.userinfo.token !== undefined && response.data.data.userinfo.expiretime !== undefined) {
                cookie.set('Token', response.data.data.userinfo.token, {expires: new Date(formatDates(response.data.data.userinfo.expiretime))});
            }
        }
        //正常就返回处理后的响应数据
        return response.data
    } else {
        //响应不正常，就用element-ui中的消息提示，提示错误信息
        Message({
            message: '返回数据失败,请联系管理员！',
            type: 'error',
            center: true
        })
        //抛出一个自定义消息的错误
        return Promise.reject(new Error('数据返回失败,请联系管理员'));
    }
}, error => {
    //响应出现错误，提示信息
    Message({
        message: '接受数据错误,请联系管理员！',
        type: 'error',
        center: true
    })
    return Promise.reject(error);
})

export default service;

二、组件封装

1、表格组件封装

• 表格组件

<template>
  <el-table :data="value.tableData" :border="border">
    <el-table-column v-for="(item,index) in value.tableColumn"
                     :key="index"
                     :prop="item.prop"
                     :label="item.label"
                     show-overflow-tooltip
    >
<!--      这里判断是否使用自定义模板，template是true，就把当前行数据，通过插槽给传过去，父组件再渲染即可-->
      <template v-slot:default="{ row }">
        <template v-if="item.template">
          <slot :name="item.prop" :scope="{ row }"></slot>
        </template>
        <template v-else>
          {{ row[item.prop] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import TestView from "@/views/TestView";

export default {
  name: "TableComponent",
  components: {TestView},
  props: {
    value: {
      type: Object,
      default: true
    }
  },
  data() {
    return {
      border: false
    }
  }
}
</script>

<style scoped>

</style>

• 父组件（测试页）

<template>
  <div>
    <TableComponent :value="value">
      <template slot="status" slot-scope="obj">
        <el-tag :type="obj.scope.row.status=== 1 ? 'success' : 'danger'">
          {{ obj.scope.row.status === 1 ? '在线' : '离线' }}
        </el-tag>
      </template>
    </TableComponent>
  </div>
</template>

<script>
import TableComponent from "@/components/TableComponent";
export default {
  name: "TestView",
  components: {TableComponent},
  data(){
    return{
      value:{
        tableData:[
          {name:'西奥话',status:1,msg:'留言测试'},
          {name:'s',status:2,msg:'留言测试'},
          {name:'fgu撒旦撒',status:1,msg:'留言测试啊啊u'},
        ],
        tableColumn:[
          {prop:'name',label:'用户名'},
          {prop:'status',label:'当前状态',template:true},
          {prop:'msg',label:'留言信息'},
        ]
      }
    }
  },
  created() {
    
  },
}
</script>

<style scoped>

</style>

​ 可以看出，这里使用模板的是status字段

难点：

• 具名插槽使用

• 对象解构

  • {row}:这个row是将这一行作用域scope里面的row参数搞出来，这样，不需要使用模板字段的属性，{{ row[item.prop] }}就可以通过这种方法取出值，进行对应的渲染

• 接收值，和提取值

  • {{ obj.scope.row.status === 1 ? '在线' : '离线' }}

  • 这里难点在于，这个obj，怎么一步步取出我们的值当然可用直接打印出来看一下，主要是 slot=’‘status’‘这个具名插槽要对应好即可