今天寫的是前端的內(nèi)容

先說一下用到的哪些框架，webpack,vue,vuex,vue-router,axios,less,vue-cli,element-ui,iVue.......
使用vue-cli初始化項(xiàng)目。指令自己去網(wǎng)上找，vue init webpack ""
初始化完成后要自己配置webpack 的。
1.配置代理請(qǐng)求本地服務(wù)器上的接口地址

 proxyTable: {
      '/':{
        target:'http://localhost:8080',
        changeOrigin:true,
        pathRewrite:{
          '/':'/'
        }
      }
    },

2.封裝axios請(qǐng)求發(fā)送json格式數(shù)據(jù)并做攔截請(qǐng)求處理和攔截響應(yīng)處理

先說一下，其中有個(gè)qs模塊，是把請(qǐng)求地址轉(zhuǎn)成get字符串的，不知道是哪位大哥用到的，我看了其中的源碼才知道，為啥我JSON.stringfy一直沒起作用。
這段代碼結(jié)合element-ui的message和loading

/**
 * Created by visupervi on 2018-07-14.
 */
import axios from 'axios'
import qs from 'qs'
import {Message,Loading } from 'element-ui'
import router from '../router'
axios.defaults.withCredentials = true;
let loadingInstance;
const opts = {
  lock: true,
  text: 'Loading',
  background: 'rgba(255, 255, 255, 0.3)',
  customClass: '請(qǐng)耐心等待'
}
const Axios = axios.create({
  baseUrl:'',//查一下自己的地址
  timeout:3000,
  responseType:'json',
  withCredentials:true,
  headers:{
    "Content-type":"application/json;charset=utf-8"http://x-www-form-urlencoded
  }

});
Axios.interceptors.request.use(config =>{

  if(
    config.method == 'post' ||
    config.method == 'put' ||
    config.method == 'delete' ||
    config.method == 'axios'
  ){
    loadingInstance = Loading.service(opts);
    if(config.method == "put"){
      config.data = qs.stringify(config.data);
    }
  }
  if(localStorage.token){
    config.headers.Authorization = localStorage.token;
    // console.log(config.headers.Authorization);
    // loadingInstance = Loading.service(opts);
  }
  return config;
},error =>{
  Message({
    showClose:true,
    message:error,
    type:'error.data.error.message'
  });
  return Promise.reject(error.data.error.message)
});

Axios.interceptors.response.use(
  res => {
    setTimeout(function () {
      loadingInstance && loadingInstance.close();
    }, 2000);
    if(res.data && res.data.success){
      Message({
        showClose:true,
        message:res.data.error.message.message
        ? res.data.error.message.message
          : res.data.error.message,
        type:'error'
      });
      return Promise.reject(res.data.error.message);
    }
    // loadingInstance.close();
    return res;
  },
  error => {
    if (!window.localStorage.getItem("userInfo")) {
      router.push({
        path: "/"
      });
    } else {
      let lifeTime =
        JSON.parse(window.localStorage.getItem("userInfo")).lifeTime *
        1000;
      let nowTime = new Date().getTime(); // 當(dāng)前時(shí)間的時(shí)間戳
      if (nowTime > lifeTime) {
        Message({
          showClose: true,
          message: "登錄狀態(tài)信息過期,請(qǐng)重新登錄",
          type: "error"
        });
        router.push({
          path: "/"
        });
      } else {
        if (error.response.status === 403) {
          router.push({
            path: "/error/403"
          });
        }
        if (error.response.status === 500) {
          router.push({
            path: "/error/500"
          });
        }
        if (error.response.status === 502) {
          router.push({
            path: "/error/502"
          });
        }
        if (error.response.status === 404) {
          router.push({
            path: "/error/404"
          });
        }
      }
    }
    // let errorInfo =  error.data.error ? error.data.error.message : error.data;
    let errorInfo = error.data && error.data.error && error.data.error.message || error.data;
    return Promise.reject(errorInfo);
  }
);



export default {

  //作為插件使用，可以直接使用Vue.use方法使用
  install: function(Vue, Option) {
    Object.defineProperty(Vue.prototype, "$http", { value: Axios });
  },

};

3.引用vuex存儲(chǔ)登陸狀態(tài)

/**
 * Created by visupervi on 2018-07-17.
 */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const token = JSON.parse(localStorage.getItem('token') || null);

const store = new Vuex.Store({
  state(){
    return {
      userInfo:{
        token: token,
        userName:"",
        lifeTime:null
      }
    }
  },
  mutations:{
    setToken(state,token,name){
      state.userInfo.token = token;
      state.userInfo.lifeTime = (new Date()).getTime();
      state.userInfo.userName = name;
      localStorage.setItem('userInfo',JSON.stringify(state.userInfo));
    },
    delToken(state){
      state.token = null;
      localStorage.removeItem('userInfo');
    }
  },
  getters:{
    getToken(){
      if(!localStorage.getItem("userInfo")){
        localStorage.setItem("userInfo",{})
      }
      return localStorage.getItem("userInfo");
    }
  }
});
export default store;

其中mutation這個(gè)參考官網(wǎng)介紹，包括怎么使用其中的函數(shù)。commit觸發(fā)

4.路由請(qǐng)求處理

在路由上加了一個(gè)meta，來規(guī)定是否需要登錄權(quán)限

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'userLogin',
      component: userLogin,
      meta: {
        requireLogin: false
      },
    },
    {
      path:'/listVue',
      name:'listVue',
      component:listVue,
      meta: {
        requireLogin: true
      },
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireLogin)) {
    // 判斷是否需要登錄權(quán)限
    // console.log(this.$store.getters.getToken);
    let userInfo = window.localStorage.getItem("userInfo");
    // console.log(JSON.parse(userInfo).lifeTime);
    if (userInfo!=null) {
      // 判斷是否登錄
      let lifeTime =
        JSON.parse(userInfo).lifeTime * 1000;
      // console.log(lifeTime)
      let nowTime = (new Date()).getTime(); // 當(dāng)前時(shí)間的時(shí)間戳
      console.log(nowTime);
      if (nowTime < lifeTime) {
        next();
      } else {
        Message({
          showClose: true,
          message: "登錄狀態(tài)信息過期,請(qǐng)重新登錄",
          type: "error"
        });
        next({
          path: "/"
        });
      }
    } else {
      // 沒登錄則跳轉(zhuǎn)到登錄界面
      next({
        path: "/"
      });
    }
  } else {
    next();
  }
});

export default router;

到這里項(xiàng)目就能分別運(yùn)行，并且可以請(qǐng)求和跳轉(zhuǎn)