项目地址
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
html5 Web存储
当用户登录后，前端需要存一些必要信息，比如用户名，token，登录状态等等，这里用到vuex和本地存储（vuex存储后虽然能够做到数据响应但是却干不过刷新，所以需要本地存储）
操作本地存储步骤比较麻烦，这里简单封装下
src下新建tools用来放各种工具
// src/tools目录下新建storage.js
let storage = {
get(key) {
return window.sessionStorage.getItem(key);
},
set(key, val) {
window.sessionStorage.setItem(
key,
typeof val !== "string" ? JSON.stringify(val) : val
);
},
del(key) {
window.sessionStorage.removeItem(key);
},
cle() {
window.sessionStorage.clear();
}
};
export default storage;
添加vuex，封装axios，引入element
安装依赖
npm install axios --save
npm install element-ui --save
npm install vuex --save
引入 main.js添加以下配置
// src/main.js
// element
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
//sotre
import store from "./store";
//storage
import storage from "./tools/storage";
Vue.prototype.Storage = storage;
Vue.use(ElementUI);
new Vue({
el: "#app",
router,
store,
components: { App },
template: "<App/>"
});
vuex使用
src下新建store文件
store文件下新建index.js作为入口文件
// /src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
user
}
});
store文件下新建modules区分各个模块
modules下新建user.js用户模块
// /src/store/modules/user.js
import Storage from "@/tools/storage";
const state = {
//token
token: Storage.get("token")
};
const actions = {
setToken({ commit }, data) {
commit("setToken", data);
}
};
const mutations = {
setToken(state, data) {
Storage.set("token", data);
state.token = Storage.get("token");
}
};
export default {
state,
actions,
mutations
};
封装Axios
tools文件下新建request.js
import axios from "axios";
import { Message } from "element-ui";
import store from "@/store";
//创建axios
const service = axios.create({
//这里baseurl就是刚开始配置的开发环境和线上环境地址，webpack会自动读取无需手动再改
baseURL: process.env.BASE_URL, //baseurl
timeout: 20000 //请求超时
});
//request拦截
//请求拦截主要作用是验证请求是否合法，会带有用户token，这里模拟一个token，可以根据实际情况修改
service.interceptors.request.use(
config => {
let token = store.state.user.token;
if (store.state.user.token) {
config.headers["rty-token"] = token;
}
return config;
},
err => {
console.log(err);
Promise.reject(err);
}
);
//respone拦截
//响应拦截主要是对返回做统一处理
service.interceptors.response.use(
response => {
let res = response.data;
let { data, code } = res;
// console.log(response)
if (code !== 200) {
Message({
message: res.data.message,
type: "error",
duration: 5 * 1000
});
if (res.code === 5000) {
console.log("token过期");
}
return false;
} else {
//这里吧错误响应不再返回到页面，直接统一处理掉，只有正确的返回才会被接收并做下一步处理
return data;
}
},
err => {
//这里处理服务端错误
console.log("err" + err); // for debug
Message({
message: err.message,
type: "error",
duration: 5 * 1000
});
return Promise.reject(err);
}
);
export default service;
src下新建api文件夹
api文件下新建user.js写用户请求
import service from "@/tools/request";
export function login({ username, password }) {
return service({
url: "/user/login",
method: "post",
data: {
username,
password
}
});
}
测试请求
在helloworld.vue中测试发送请求
// html
<template>
<div class="hello">
<button @click="sendRequest">发送请求</button>
</div>
</template>
// js
import { login } from "@/api/user";
export default {
name: "HelloWorld",
data() {
return {
loginForm: {
username: "rty",
password: 123
}
};
},
methods: {
async sendRequest() {
let res = await login(this.loginForm);
console.log(res);
}
}
};
点击发送请求，在network中查看返回的数据
请求成功
网友评论