有关vue项目的按需引入element-UI接口跨域代理axios封装接口导航守卫
-
vue项目按需引入element-UI
-
在项目中终端运行npm install element-ui -S
npm install element-ui -S
-
在项目终端安装@bable/preset-env
npm install @babel/preset-env -D
-
把babel.config.js文件修改为:
module.exports = { presets: [ ["@babel/preset-env", { "modules": false }] ], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ] ] }
-
项目main.js文件中引入element-ui样式
import Vue from 'vue' import App from './App.vue' import router from './router' import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')
-
在项目src目录下创建一个关于element-ui的配置文件element_ui.js,内容如下:
import Vue from 'vue'; import { Pagination, Dialog, Autocomplete, Dropdown, DropdownMenu, DropdownItem, Menu, Submenu, MenuItem, MenuItemGroup, Input, InputNumber, Radio, RadioGroup, RadioButton, Checkbox, CheckboxButton, CheckboxGroup, Switch, Select, Option, OptionGroup, Button, ButtonGroup, Table, TableColumn, DatePicker, TimeSelect, TimePicker, Popover, Tooltip, Breadcrumb, BreadcrumbItem, Form, FormItem, Tabs, TabPane, Tag, Tree, Alert, Slider, Icon, Row, Col, Upload, Progress, Badge, Card, Rate, Steps, Step, Carousel, CarouselItem, Collapse, CollapseItem, Cascader, ColorPicker, Transfer, Container, Header, Aside, Main, Footer, Loading, MessageBox, Message, Notification } from 'element-ui'; Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown); Vue.use(DropdownMenu); Vue.use(DropdownItem); Vue.use(Menu); Vue.use(Submenu); Vue.use(MenuItem); Vue.use(MenuItemGroup); Vue.use(Input); Vue.use(InputNumber); Vue.use(Radio); Vue.use(RadioGroup); Vue.use(RadioButton); Vue.use(Checkbox); Vue.use(CheckboxButton); Vue.use(CheckboxGroup); Vue.use(Switch); Vue.use(Select); Vue.use(Option); Vue.use(OptionGroup); Vue.use(Button); Vue.use(ButtonGroup); Vue.use(Table); Vue.use(TableColumn); Vue.use(DatePicker); Vue.use(TimeSelect); Vue.use(TimePicker); Vue.use(Popover); Vue.use(Tooltip); Vue.use(Breadcrumb); Vue.use(BreadcrumbItem); Vue.use(Form); Vue.use(FormItem); Vue.use(Tabs); Vue.use(TabPane); Vue.use(Tag); Vue.use(Tree); Vue.use(Alert); Vue.use(Slider); Vue.use(Icon); Vue.use(Row); Vue.use(Col); Vue.use(Upload); Vue.use(Progress); Vue.use(Badge); Vue.use(Card); Vue.use(Rate); Vue.use(Steps); Vue.use(Step); Vue.use(Carousel); Vue.use(CarouselItem); Vue.use(Collapse); Vue.use(CollapseItem); Vue.use(Cascader); Vue.use(ColorPicker); Vue.use(Transfer); Vue.use(Container); Vue.use(Header); Vue.use(Aside); Vue.use(Main); Vue.use(Footer); Vue.use(Loading.directive); Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message;
-
将配置好的element_ui.js文件引入main.js中
import Vue from 'vue' import App from './App.vue' import router from './router' import 'element-ui/lib/theme-chalk/index.css'; import './element_ui' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')
-
-
接口跨域代理
-
vue中的.env文件为环境变量配置文件,配置接口请求的地址项目根目录创建.env.development
NODE_ENV = 'development' VUE_APP_URL = 'http://localhost:5000'
-
vue项目中的package.json配置
"scripts": { "serve": "vue-cli-service serve --mode development", "build": "vue-cli-service build --mode production", "lint": "vue-cli-service lint" },
-
vue项目根目录创建vue.config.js文件配置跨域内容
module.exports = { devServer: { port:8080, host:'localhost', https:false, open:true, proxy: { '/api': { target: process.env.VUE_APP_URL, changeOrigin: true, pathRewrite: { '^/api':'' } }, } }, }
-
-
axios封装接口
- 安装终端安装axios
npm install axios -g
-
在项目src目录新建utils文件夹,并在utils下新建request.js文件,文件内容如下
//1. 实例化axios对象,并设置请求地址和超时时间 import axios from 'axios'; const api = axios.create({ baseURL: '/api' , // 所有请求的公共地址部分 timeout:3000, // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时 withCredentials: true, headers: { 'Content-Type': 'application/json; charset=utf-8' } }) // 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置 // interceptors axios的拦截器对象 api.interceptors.request.use(config => { // config 请求的所有信息 // console.log(config); return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行 }, err => { // 请求发生错误时的相关处理 抛出错误 Promise.reject(err) }) // 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置 // interceptors axios的拦截器对象 api.interceptors.request.use(config => { // config 请求的所有信息 // console.log(config); return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行 }, err => { // 请求发生错误时的相关处理 抛出错误 Promise.reject(err) }) export default api; //一定要导出
-
在项目src目录下新建api文件夹,并在api下新建login.js文件统一管理不同模块的接口
import api from '../utils/request' export const aa = (params) => api.get('/students', { params})
-
另外说一个东西我没有用过不知道好用不就是关于axios与vue的整合vue-axios有兴趣的可以搜一下
-
项目中导航守卫
-
导航守卫防止用户通过修改在没有登录的情况下通过修改url地址访问详情页面
-
我这边用了一个例子演示
-
首先有一个登录组件login,用户登录成功后将isAuth设置为true并跳转详情页面,实际开发中是通过调用接口将用户名和密码传给后端然后返回toke将toke存到sessionStorage或者vuex中的
submitLogin(){ this.$refs.loginForm.validate((valid) => { if (valid) { if(this.loginForm.username == 'admin' && this.loginForm.password == 'ssssss'){ sessionStorage.setItem('isAuth',true); this.$router.push('/home'); }else { sessionStorage.setItem('isAuth',false); this.$router.push('/'); this.loginForm.username = ''; this.loginForm.password = ''; } } else { this.$message.error('登录出错请重新输入'); return false; } }); }
-
在src目录下新建router文件夹,新建index.js文件代码如下
import Vue from 'vue' import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path:'/', name:'LogIn', component: () => import('../components/LogIn') }, { path:'/home', name:'Home', component: ()=> import('../components/Home') } ] const router = new VueRouter({ mode: 'history', routes, }) //导航守卫 router.beforeEach((to, from, next) => { if(to.path == '/'){//登录页不需要做权限控制 next(); }else{ if(sessionStorage.isAuth === 'true'){ //登录成功 next(); } else{ //登录失败 return next('/') } } }) export default router;
-