###今天写的是前端的内容 先说一下用到的哪些框架,webpack,vue,vuex,vue-router,axios,less,vue-cli,element-ui,iVue....... 使用vue-cli初始化项目。指令自己去网上找,vue init webpack "" 初始化完成后要自己配置webpack 的。 1.配置代理请求本地服务器上的接口地址
proxyTable: {
'/':{
target:'http://localhost:8080',
changeOrigin:true,
pathRewrite:{
'/':'/'
}
}
},
复制代码
2.封装axios请求发送json格式数据并做拦截请求处理和拦截响应处理
先说一下,其中有个qs模块,是把请求地址转成get字符串的,不知道是哪位大哥用到的,我看了其中的源码才知道,为啥我JSON.stringfy一直没起作用。 这段代码结合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: '请耐心等待'
}
const Axios = axios.create({
baseUrl:'',//查一下自己的地址
timeout:3000,
responseType:'json',
withCredentials:true,
headers:{
"Content-type":"application/json;charset=utf-8"//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(); // 当前时间的时间戳
if (nowTime > lifeTime) {
Message({
showClose: true,
message: "登录状态信息过期,请重新登录",
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存储登陆状态
/**
* 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这个参考官网介绍,包括怎么使用其中的函数。commit触发
4.路由请求处理
在路由上加了一个meta,来规定是否需要登录权限
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)) {
// 判断是否需要登录权限
// 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(); // 当前时间的时间戳
console.log(nowTime);
if (nowTime < lifeTime) {
next();
} else {
Message({
showClose: true,
message: "登录状态信息过期,请重新登录",
type: "error"
});
next({
path: "/"
});
}
} else {
// 没登录则跳转到登录界面
next({
path: "/"
});
}
} else {
next();
}
});
export default router;
复制代码
到这里项目就能分别运行,并且可以请求和跳转