VUE-PC端开发
Element-UI使用1.下载npm i element-ui -S2.使用(在main.js中)import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);
·
Element-UI使用
1.下载
npm i element-ui -S
2.使用(在main.js中)
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
axios使用
1.下载
npm install axios
2.使用
1.创建axios副本(request.js)
/*
1:安装axios
2:导入axios
3:创建axios副本(配制一个基地址,基地址来源于环境变量)
4:定义请求拦截器
5:定义响应拦截器
6:暴露出去axios副本
*/
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
const _axios = axios.create({
baseURL: process.env.VUE_APP_BASE_API
})
// 声明数组,用于存取消axios请求函数
let allCancelFn = []
/*
路由跳转时要取消上一个路由页面的所有请求
*/
// 封装取消所有请求方法,并且导出,在导航守卫中调用
export function cancelAll () {
allCancelFn = allCancelFn.filter(item => {
item.fn()
return false
})
}
// 定义请求拦截器
_axios.interceptors.request.use(
config => {
// 同一接口请求取消功能
allCancelFn = allCancelFn.filter(item => {
if (item.url === config.url && item.method === config.method) {
item.fn()
return false
}
return true
})
// 如果需要加token就加上
if (config.needToken) {
config.headers.Authorization = `Bearer ${store.state.user.token}`
}
// 保存每次接口请求的取消方法
config.cancelToken = new axios.CancelToken(cancelFn => {
allCancelFn.push({
fn: cancelFn,
url: config.url,
method: config.method
})
})
return config
},
error => {
return Promise.reject(error)
}
)
// 定义响应拦截器
_axios.interceptors.response.use(
res => {
if (res.data.success) {
return res.data.data
} else {
console.log(res)
// 提示&终止后续代码
Message.error('响应错误', res.data.message)
return Promise.reject(new Error(res.data.message))
}
},
error => {
// token超时被动处理
if (error.response.data.code === 10002) {
// 删除token,删除用户信息
store.commit('user/loginOut')
// 提示错误
Message.error(error.response.data.message)
// 跳转登录页面
router.push('/login')
}
return Promise.reject(error)
}
)
export default _axios
模块化定义pai
例:
// (es6写法)
export const companydepartmentAddApi = data =>
request.post('/company/department', data, { needToken: true })
// 获取基本用户信息(post)
export function getUserInfoApi () {
return request({
url: '/sys/profile',
method: 'post',
needToken: true
})
}
// 获取用户所有信息(get)
export function getUserAllInfoApi (id) {
return request({
url: `/sys/user/${id}`,
method: 'get',
needToken: true
})
}
// delete
export const companyDepartmentApi = id =>
request.delete(`/company/department/${id}`, { needToken: true })
// put
export function companyDepartmentEditApi (data) {
return request({
url: `/company/department/${data.id}`,
method: 'put',
data: data,
needToken: true
})
}
路由导航守卫
创建一个permission.js文件
import router from '@/router'
import store from '@/store'
// 导入取消所有请求方法
import { cancelAll } from './utils/request'
// 白名单
let whitePage = ['/404', '/login']
// 路由前置守卫
router.beforeEach(async (to, from, next) => {
// console.log('当前路径', to.fullPath)
console.log('isLogins', store.getters.isLogin)
// 每次路由跳转都取消上一路由页面的所有接口请求
cancelAll()
// 没有token
if (!store.state.user.token) {
// 去白名单
if (whitePage.includes(to.path.toLowerCase())) {
next() // 给通过
} else {
// 不是白名单,打回登录
next('/login?_reidrect=' + to.fullPath)
}
} else {
if (to.path === '/login') {
next('/')
} else {
if (store.getters.isLogin) {
next()
} else {
await store.dispatch('user/getUserInfo')
// 触发vuex路由管理模块的filterRouter方法
await store.dispatch('routers/filterRouter')
next(to.fullPath) // 让当前路由重新跑一片前置守卫
}
}
}
})
// 路由后置守卫
开发环境与跨域代理
开发环境(.env.development 开发环境下的配置文件)
创建.env.development文件并写入
# just a flag
ENV = 'development'# base api
VUE_APP_BASE_API = '/xxx' // 设置基地址
生产环境(.env.production 生产环境下的配置文件)
创建.env.production文件并写入
# just a flag
ENV = 'production'# base api
VUE_APP_BASE_API = '/xxx' //设置基地址
利用代理(跨域解决跨域)
在vue.config.js文件中
module.exports = {
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// before: require('./mock/mock-server.js') // 开发环境使用mockjs
// 代理服务器
proxy: {
'/apis': { //将www.test.com印射为/apis
target: 'www.test.com', //被代理的服务器(接口域名)
changeOrigin: true, //是否跨域
pathRewrite: {
// 上面设置代理后 /apis 相当于映射成 www.test.com/apis,需要把/apis去掉
'^/apis': '',
}
}
}
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)