介绍: vue-cli、axios、vue-router、vuex,安装流程不再赘述,文件目录如下:
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/>'
})
总结,抽离出各个模块,有利于简化目录结构,便于后期维护管理,如有错误,望指正。