前端

工程创建

vue create project

安装插件

npm i element-ui -S
npm i axios -S

编辑main.js, 引入element-ui, axios; 配置axios，

import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

axios.defaults.baseURL = "http://localhost:8080/"
axios.defaults.withCredentials=true;
Vue.prototype.axios = axios;

启动服务

npm run serve -- --port=8081

代码收集

所有请求都带指定的header

使用请求拦截器来实现：

// 请求拦截器
instance.interceptors.request.use(function (config){
  config.headers.token =  "这里放入需要的token";  //在headers中携带token
  return config
},function (error){
  // 处理请求错误
  return Promise.reject(error)
});
Vue.prototype.axios = instance;

统一处理axios返回内容

//响应拦截器
axios.interceptors.response.use(function (resp){
  return resp;
},function (err){
  console.log(err.request.status);
  if("401" == err.request.status) {
    router.push("/login")
  }
})

传递参数

以列表页打开详情页为例，打开详情页时需要传递当前列表的id到详情页。做法如下：

// 打开/contract页面，同时传递参数ID
    openContract(contract) {
      this.$router.push({path:"/contract", query:{id:contract.id}})
    }

获取传递的参数

  mounted() {
    console.log("合同ID="+this.$route.query.id);
  }

前端安装唯一ID工具

npm install nanoid