vue axios封装，分页封装

自己练手用，防止忘记

在src下面新建utils文件夹，然后再新建request.js，然后开始封装

/**
 * ajax请求配置
 */
import axios from 'axios'
import { Message } from 'element-ui'

// axios默认配置
axios.defaults.timeout = 10000 // 超时时间
// axios.defaults.baseURL 请求地址前缀
// User地址
// axios.defaults.baseURL = 'http://127.0.0.1:8001'
// tools地址
// axios.defaults.baseURL = 'http://127.0.0.1:8088'
// 微服务地址
// axios.defaults.baseURL = '/api'
axios.defaults.baseURL = 'http://192.168.5.200:9090'

// 整理数据
axios.defaults.transformRequest = function(data) {
    data = JSON.stringify(data)
    return data
}

// 路由请求拦截
axios.interceptors.request.use(
    config => {
      // 判断 token 是否存在
      // var token = localStorage.getItem('token');
      // if (token) {
        // 在发起请求前，给所有请求添加请求头
        config.headers['Content-Type'] = 'application/json;charset=UTF-8'
        // config.headers.common['token'] = JSON.parse(token).token;
      // }
      return config;
    },
    error => {
        return Promise.reject(error.response)
    })

// 路由响应拦截
axios.interceptors.response.use(
    response => {
        if (response.data.success === false) {
            return Message.error(response.data.errDesc)
        } else {
            return response.data
        }
    },
    error => {
      if (error && error.response) {
          // 1.公共错误处理
          // 2.根据响应码具体处理
          switch (error.response.status) {
            case 400:
              error.message = '错误请求，错误代码：400'
              break;
            case 401:
              error.message = '未授权，请重新登录，错误代码：401'
              break;
            case 403:
              error.message = '拒绝访问，错误代码：403'
              break;
            case 404:
              error.message = '请求错误,未找到该资源，错误代码：404'
              // window.location.href = "/NotFound"
              break;
            case 405:
              error.message = '请求方法未允许，错误代码：405'
              break;
            case 408:
              error.message = '请求超时，错误代码：408'
              break;
            case 500:
              error.message = '服务器端出错，错误代码：500'
              break;
            case 501:
              error.message = '网络未实现，错误代码：501'
              break;
            case 502:
              error.message = '网络错误，错误代码：502'
              break;
            case 503:
              error.message = '服务不可用，错误代码：503'
              break;
            case 504:
              error.message = '网络超时，错误代码：504'
              break;
            case 505:
              error.message = 'http版本不支持该请求，错误代码：505'
              break;
            default:
              error.message = `连接错误${error.response.status}`
          }
        } else {
          // 超时处理
          if (JSON.stringify(error).includes('timeout')) {
            Message.error('服务器响应超时，请刷新当前页')
          }
          error.message('连接服务器失败')
        }

        Message.error(error.message)
      return Promise.reject(error.response) // 返回接口返回的错误信息
    })
export default axios

完成之后，在src目录下新建 api 文件夹，新建 authority.js（随便起的名称）

// 权限管理API  【菜单、角色、权限】
import request from '@/utils/request'

/**
 * 添加菜单
 * @param {*} data
 * @author 小道仙
 * @date 2020年2月19日
 */
export function addMenu(data) {
    return request({
        url: '/MRouting/getMOD_Stats',
        method: 'post',
        data
    })
}

/**
 * 菜单列表
 * @param {*} query
 * @author 小道仙
 * @date 2020年2月19日
 */
export function menuList(query) {
    return request({
        url: '/Mplan/Orderinfo',
        method: 'get',
        params: query
    })
}


export function getKvalue(query) {
    return request({
        url: '/MRouting/getMOD_Stats',
        method: 'get',
        params: query
    })
}

以上就封装完成

使用

<script>
// 先导入
import { addMenu } from "@/api/authority.js";
import Pagings from "@/components/Pagination";
export default {
    data() {
        return {
            height: "",
            list: [],
            oAssEquipmentDto: {
                offset: 1,
                pageNumber: 5,
            },
            total: 1, //总条数
        };
    },
    components: {
        Pagings,
    },
    methods: {
        getAddMenu() {
            var that = this;
            var param = {
                Pname: "",
                pcode: "",
                pageIndex: that.oAssEquipmentDto.offset,
                pagenumber: that.oAssEquipmentDto.pageNumber,
            };
            addMenu(param).then((resp) => {
                that.list = JSON.parse(resp);
                that.total = parseInt(that.list[0].total)
            });
        },
        handleSizeChange(val) {
            this.oAssEquipmentDto.pageNumber = val;
            this.getAddMenu();
        },
        handleCurrentChange(val) {
            this.oAssEquipmentDto.offset = val;
            this.getAddMenu();
        },
    },
    created() {},
    mounted() {
        this.getAddMenu();
    },
};
</script>

目录结构

 封装分页

<template>
    <div class="pagetion">
        <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="offset"
            :page-size="pageSize"
            :page-sizes="[10,20,30,40,50]"
            layout=" prev, pager, next, sizes,jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data() {
        return {};
    },
    props: {
        total: {
            // 总条目数
            type: Number,
            default: 1, //默认值
        },
        pageSize: {
            //每页显示条目个数
            type: Number,
            default: 1,
        },
        offset: {
            //当前页数
            type: Number,
            default: 1,
        },
    },
    methods: {
        handleSizeChange(val) {
            //pageSize 改变时会触发
            this.$emit("handleSizeChangeSub", val);
        },
        handleCurrentChange(val) {
            //currentPage 改变时会触发
            this.$emit("handleCurrentChangeSub", val);
        },
    },
};
</script>

使用

<template>
    <div class="hello">
        <template>
            <el-table :data="list" border style="font-size: 10px" stripe :header-cell-style="{background:'#337AB7',color:'#ffffff',height:'30px'}">
                <el-table-column prop="pcode" label="产品编码"></el-table-column>
                <el-table-column prop="pname" label="产品名称"></el-table-column>
                <el-table-column prop="workcenter" label="短文本" width="180" align="center" :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column prop="desc" label="物料描述" width="180" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
            <Pagings
                :total="total" :offset="oAssEquipmentDto.offset"
                :pageSize="oAssEquipmentDto.pageNumber"
                @handleSizeChangeSub="handleSizeChange"
                @handleCurrentChangeSub="handleCurrentChange"
            ></Pagings>
        </template>
    </div>
</template>

<script>
import { addMenu } from "@/api/authority.js";
import Pagings from "@/components/Pagination";    // 导入分页组件
export default {
    data() {
        return {
            height: "",
            list: [],
            oAssEquipmentDto: {
                offset: 1,
                pageNumber: 5,
            },
            total: 1, //总条数
        };
    },
    components: {
        Pagings,
    },
    methods: {
        getAddMenu() {
            var that = this;
            var param = {
                Pname: "",
                pcode: "",
                pageIndex: that.oAssEquipmentDto.offset,
                pagenumber: that.oAssEquipmentDto.pageNumber,
            };
            addMenu(param).then((resp) => {
                that.list = JSON.parse(resp);
                that.total = parseInt(that.list[0].total)
            });
        },
        handleSizeChange(val) {
            this.oAssEquipmentDto.pageNumber = val;
            this.getAddMenu();
        },
        handleCurrentChange(val) {
            this.oAssEquipmentDto.offset = val;
            this.getAddMenu();
        },
    },
    created() {},
    mounted() {
        this.getAddMenu();
    },
};
</script>


<style scoped>
/deep/.el-table td,
.el-table th {
    padding: 0 0;
}
</style>