項目地址
Axios 是一個基于 promise 的 HTTP 庫伦糯，可以用在瀏覽器和 node.js 中柜某。
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式
Element 一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫
html5 Web存儲
當(dāng)用戶登錄后敛纲，前端需要存一些必要信息莺琳，比如用戶名，token载慈，登錄狀態(tài)等等惭等，這里用到vuex和本地存儲（vuex存儲后雖然能夠做到數(shù)據(jù)響應(yīng)但是卻干不過刷新，所以需要本地存儲）
操作本地存儲步驟比較麻煩办铡，這里簡單封裝下
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區(qū)分各個模塊
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";
//創(chuàng)建axios
const service = axios.create({
//這里baseurl就是剛開始配置的開發(fā)環(huán)境和線上環(huán)境地址寡具，webpack會自動讀取無需手動再改
baseURL: process.env.BASE_URL, //baseurl
timeout: 20000 //請求超時
});
//request攔截
//請求攔截主要作用是驗證請求是否合法秤茅，會帶有用戶token，這里模擬一個token童叠，可以根據(jù)實際情況修改
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攔截
//響應(yīng)攔截主要是對返回做統(tǒng)一處理
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 {
//這里吧錯誤響應(yīng)不再返回到頁面框喳，直接統(tǒng)一處理掉，只有正確的返回才會被接收并做下一步處理
return data;
}
},
err => {
//這里處理服務(wù)端錯誤
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中測試發(fā)送請求
// html
<template>
<div class="hello">
<button @click="sendRequest">發(fā)送請求</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);
}
}
};
點擊發(fā)送請求厦坛，在network中查看返回的數(shù)據(jù)
請求成功
