介绍： vue-cli、axios、vue-router、vuex，安装流程不再赘述，文件目录如下：
封装目录.png
一、axios二次封装，参考自：axios二次封装
1、在api目录下创建request文件夹，存放二次封装的axios文件；根据功能需求创建其他文件夹，组件中按需引入使用，如登录模块创建login/login.js文件，存放登录时所需使用的接口。
2、request.js文件为axios的二次封装文件，在请求接口文件中引入，代码如下：
import axios from 'axios'
import { errcode } from './errcode' //捕捉服务端http状态码的方法
import store from '@/store' //引入vuex的相关操作
import router from '@/router' //引入vue-router的相关操作
// 添加请求拦截器
axios.interceptors.request.use(
config => {
//config 为请求的一些配置 例如：请求头 请求时间 Token 等
config.timeout = 10 * 1000 //请求响应时间
config.auth = {
"token": store.state.token
}
return config
},
error => {
return Promise.reject(error)
}
)
// 添加响应拦截器
axios.interceptors.response.use(
response => {
if(response.data.code === 0){ //服务端定义的响应code码为0时请求成功
return Promise.resolve(response.data) //使用Promise.resolve 正常响应
}else if(response.data.code === 1000){ //服务端定义的响应code码为1000时为未登录
router.push('/login')
return Promise.reject(response.data) //使用Promise.reject 抛出错误和异常
}else{
return Promise.reject(response.data)
}
},
error => {
if(error && error.response){ //errcode 捕捉服务端的http状态码
let res = {}
res.code = error.response.status
res.msg = errcode(error.response.status, error.response)
return Promise.reject(res)
}else if(error && error.request && error.message.includes('timeout')){ //errcode 捕捉请求超时状态码
let res = {}
res.code = 408
res.msg = errcode(408, error.response)
return Promise.reject(res)
}
return Promise.reject(error)
}
)
export const request = (method, url, data) => {
method = method.toLocaleLowerCase()
return axios.request({
method,
url,
data
})
}
3、errcode.js文件为http请求状态码二次处理，在request.js文件中引入，代码如下：
//axios捕错
export const errcode = (code, response) => {
let message = '请求错误'
switch (code) {
case 400:
message = '请求错误'
break
case 401:
message = '未授权，请登录'
break
case 403:
message = '拒绝访问'
break
case 404:
message = `请求地址出错: ${response.config.url}`
break
case 408:
message = '请求超时'
break
case 500:
message = '服务器内部错误'
break
case 501:
message = '服务未实现'
break
case 502:
message = '网关错误'
break
case 503:
message = '服务不可用'
break
case 504:
message = '网关超时'
break
case 505:
message = 'HTTP版本不受支持'
break
default:
}
return message
}
4、login/login.js接口文件引用二次封装的文件，代码如下：
import { request } from '../request/request' //引入axios的封装方法
export const getToken = (params) => {
return request('get', './static/json/login/token.json', params)
}
5、登录组件中使用getToken接口，代码如下：
import { getToken } from '@/api/login/login' //引入
let params = {name:'admin'}; //组件方法中调用
getToken(params).then(res => {
this.$Message.success(res.msg); //$Message使用了i-view组件，可忽略
//跳转到首页
//this.$router.push({path:'/home'});
}).catch(err => {
this.$Message.error(err.code+':'+err.msg);
});
二、vue-router二次封装
1、router/index.js文件为路由的二次封装文件，代码如下：
import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: routes
})
//路由前置守卫相关操作
router.beforeEach((to, from, next) => {
next()
})
export default router
2、routes.js文件为路由信息，在index.js文件中引入，代码如下：
export default [
{
path: '/',
redirect: '/login',
},
{
path: '/login',
name: 'login',
component: () => import('@/components/login/login')
},
{
path: '/home',
name: 'home',
component: () => import('@/components/home/home')
}
]
三、vuex模块化使用，实际上是store 分割成模块（module）
1、store/index.js文件为总目录，引入各个模块，代码如下：
import Vue from 'vue'
import Vuex from 'vuex'
import login from './login/login'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
},
mutations: {
},
getters: {
},
actions: {
},
modules: {
login
}
})
export default store
2、store/login/login.js文件，存储登录模块的数据信息，其他模块同样操作，代码如下：
const login = {
state: {
token: 0
},
mutations: {
loginToken(state,data) {
state.token = data;
}
},
getters: {
},
actions: {
}
}
export default login
4、最后在main.js主文件中引入到vue中，代码如下：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import iView from 'iview'; //iview UI组件
import 'iview/dist/styles/iview.css';
Vue.use(iView);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
