目录结构

axios请求封装

config

import axios from 'axios'

// 给所有axios请求设置基础的域名
// axios.defaults.baseURL = 'http://localhost:3000'
//用axios.create可以创建axios的实例，允许不同实例有不同配置

const axios1 = axios.create({
    //设置基础的域名
    baseURL: 'http://localhost:3000',
    // 请求超时的时间
    timeout: 5000
}); 
// const axios2 = axios.create({
//     baseURL: 'http://localhost:8080',
//     timeout: 5000
// });


//添加请求拦截器
axios1.interceptors.request.use(function (config) {
    //对发送的请求进一步操作
    config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem("token");
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

// //添加响应拦截器
axios1.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    console.log('res-err', error);
    return Promise.reject(error);
  });
export default axios1

#https.js

 import axios1 from './config'

//查询会员
export function selectGrade() {
    return axios1({
        url: '/Grade',
        method: 'get'
    })
}


// 添加会员
export function addGrade (data) {
    return axios1({
        url: '/Grade ',
        method: 'post',
        data
    })
}
// 添加会员（另一种写法看着更加简洁）
//export const addGrade = data => axios.post("/Grade ", data)

// 修改会员信息
export function editGrade(data) {
    return axios1({
        url: '/Grade',
        method: 'put',
        data
    })
}
//删除会员信息
export function delGrade(params) {
    return axios({
        url: '/Grade',
        method: 'delete',
        params
    })
}

// 删除图书
//export const delGrade = params => axios.get("/Grade",  params )
//export const delGrade = params => axios.get("/Grade", { params })

调用

import {selectGrade} from '@/api/http';
......
//获取初始化数据
getGradeData() {
    selectGrade()
    .then((res) => {
    this.book = res.data.list;
    })
    .catch((err)=>{
    console.log(err);
    })
},

过滤器的封装

filters.js

import moment from "moment";

// 会员优惠券格式化
export const formatGift = val => val + "元优惠券";
// 会员特权格式化
export const formatPrivilege = val => val + "折";
// 日期和格式化有时分秒
export const formatTime = val => moment(val).format("YYYY-MM-DD, h:mm:ss");
// 日期和格式化没有时分秒
export const formatTime2 = val => moment(val).format("YYYY-MM-DD");
// 性别格式化
export const formatGender = function(val) {
    if (val == 0) {
        return "女"
    }
    if (val == 1) {
        return "男"
    }
    if (val == 2) {
        return "保密"
    }
};

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
//引入fitlers.js
import * as filters from "./utils/filters"

import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/css/reset.css'
	
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

使用

{{data | formatGift}}   //在数据后面加上管道符后面加上相应的过滤器的函数