vue过滤器和moment日期库的使用，vue axios请求封装

一、过滤器和moment日期库的使用

过滤器分为全局和局部过滤器
局部过滤器

  filters:{
    ji:function(value){
      return value/10
    }
  },
  
  <div class="teacher_one">{{this.num | ji}}</div>

全局过滤器

在main.js中定义全局的过滤器
Vue.filter('ji', function (value) {
  return value/100;
});

moment日期转化

第一步：

下载

​ npm install moment

第二步：

​ 在需要用的组件中引入

import moment from "moment";

使用方法

this.num = moment(this.num).format("YYYY年");

二、vue axios的封装

axios接口封装

首先是三个文件
request.js，api.js和env.js文件

request.js：

//引入axios
import axios from "axios"
//设置专属域名
const vipUrl = "/api/app/"
//设置公共域名
const env = require("../http/env")
const Url = env.default.prod.baseUrl
//创建一个axios请求
const service = axios.create({
    baseURL:Url+vipUrl
})
//设置请求拦截
service.interceptors.request.use(
    config => {
        //设置请求头
        config.headers["deviceType"] = "H5";
        console.log("请求数据："config);
        return config;
    },
)

//设置相应拦截
service.interceptors.response.use(
    response =>{
        //根据状态码返回不同处理
        console.log("返回数据",response)
        return response;
    },
)

export default service;

api.js:

import request from './request'

export function banner(){
    return request({
        url: "/banner",
        method: "GET"
    })
}

env.js:

export default {
    //开发环境
    dev: {
      baseUrl: "https://localhost:8080"
    },
    //测试环境
    test: {
      baseUrl: "https://test.365msmk.com"
    },
    //生产环境
    prod: {
      baseUrl: "https://www.365msmk.com"
    }
  };

在页面中调用需要引入

import { banner } from '../http/api';

方法中就是调用banner

banner({}).then(res=>{
      console.log(res)
    })

如果需要传递参数的话 就在
api.js:

//定义传递的参数params
export function lessonList(params){
    return request({
        url:"courseBasis",
        method:"GET",
        params //在这里进行传参
    })
}

方法中就是调用lessonList

lessonList({
      page: 1,
      limit: 10
    }).then(res => {
      console.log(res);
    });

上面的就是axios的封装。