本文涵盖axios封装 环境变量 动态路由表 登陆鉴权
1. 使用vue-cli创建项目
确保电脑已安装node.js
在命令窗口 使用 node -v查看是否已安装
使用 vue creare <项目名称> 创建项目
....
2.创建环境变量
在根目录下创建.env.development .env.production连个文件分别用来保存开发环境和测试环境的环境变量
3.配置跨域代理
在vue.config.js中写入
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
//开发服务,build后的生产模式还需nginx代理
devServer: {
open: false, //运行后自动打开浏览器
port: process.env.VUE_APP_PORT, //挂载端口
proxy: {
//匹配的接口前缀地址
'/api': {
target: process.env.VUE_APP_API_BASEURL,
ws: true,
pathRewrite: {
'^/api': '/' //将前缀替换为/
}
}
},
headers: {
'Access-Control-Allow-Origin': '*',
}
}
})
4. 路由配置
在src下创建 router文件夹
创建 router/index.js router/systemRouter.js文件
systemRouter.js用于保存公共路由 即无需登录也能直接访问的路由
router/index.js
import {createRouter, createWebHashHistory} from 'vue-router';
import systemRouter from './systemRouter';
//系统路由
const routes = systemRouter
const router = createRouter({
history: createWebHashHistory(),
routes: routes
})
export default router
router/systemRouter.js
//系统路由
const routes = [
{
path: "/login",
component: () => import('@/views/login'),
meta: {
title: "登录"
}
},
....
]
export default routes;
之后在main.js中注册完成路由基础配置
import router from './router'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.use(router);
//挂载app
app.mount('#app');
5.axios封装
在src下创建 utils/request.js文件
import axios from 'axios';
import router from '@/router';
axios.defaults.baseURL = ''
axios.defaults.timeout = 5000
// HTTP request 拦截器 在请求发送之前进行必要操作处理 例如添加统一cookie 请求体加验证设置请求头等等
axios.interceptors.request.use(
(config) => {
let token = "*******"
config.headers.token = token
return config; //必须要在最后return config
},
(error) => {
return Promise.reject(error);
}
);
// HTTP response 拦截器 响应拦截器 在请求得到响应之后对响应体的一些处理通常是数据统一处理 判断登陆失效 错误判断等等
axios.interceptors.response.use(
(response) => {
return response; //在此不做处理可根据自己需要自行配置
},
(error) => {
//错误处理 根据项目自行配置
return Promise.reject(error);
}
);
var http = {
/** get 请求
* @param {接口地址} url
* @param {请求参数} params
* @param {参数} config
*/
get: function(url, params={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url: url,
params: params,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** post 请求
* @param {接口地址} url
* @param {请求参数} data
* @param {参数} config
*/
post: function(url, data={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** put 请求
* @param {接口地址} url
* @param {请求参数} data
* @param {参数} config
*/
put: function(url, data={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'put',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** patch 请求
* @param {接口地址} url
* @param {请求参数} data
* @param {参数} config
*/
patch: function(url, data={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'patch',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** delete 请求
* @param {接口地址} url
* @param {请求参数} data
* @param {参数} config
*/
delete: function(url, data={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'delete',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** jsonp 请求
* @param {接口地址} url
* @param {JSONP回调函数名称} name
*/
jsonp: function(url, name='jsonp'){
return new Promise((resolve) => {
var script = document.createElement('script')
var _id = `jsonp${Math.ceil(Math.random() * 1000000)}`
script.id = _id
script.type = 'text/javascript'
script.src = url
window[name] =(response) => {
resolve(response)
document.getElementsByTagName('head')[0].removeChild(script)
try {
delete window[name];
}catch(e){
window[name] = undefined;
}
}
document.getElementsByTagName('head')[0].appendChild(script)
})
}
}
export default http;
在src下创建 api文件夹
创建 api/***.js 用于存储接口数据
示例
import http from "@/utils/request"
export default {
login:{
// /api为跨域代理匹配字段 此处无需再写完整地址
url: '/api/login',
name: "",
get: async function(data={}){
return await http.get(this.url, data);
}
}
}
6.引入vuex vuex模块化
npm install vuex
在src下创建 store文件夹
创建 store/modules文件夹 用于存储各个模块
创建 store/index.js文件
创建store/modules/user.js 模块 存储用户信息等内容
export default {
state: {
},
getters:{
},
mutations: {
},
actions: {
}
}
在store/index.js中引入
import { createStore } from 'vuex';
import user from './modules/user.js'
export default createStore({
modules:{
user
}
});
自动导入所有模块代码
import { createStore } from 'vuex';
const files = require.context('./modules', false, /\.js$/);
const modules = {}
files.keys().forEach((key) => {
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default createStore({
modules
});
7. 封装localStorage 工具并全局注册
创建 utils/tool.js 用来存储各种工具函数
const tool = {}
/* localStorage */
tool.data = {
set(key, data, datetime = 0) {
let cacheValue = {
content: data,
datetime: parseInt(datetime) === 0 ? 0 : new Date().getTime() + parseInt(datetime) * 1000
}
return localStorage.setItem(key, JSON.stringify(cacheValue))
},
get(key) {
try {
const value = JSON.parse(localStorage.getItem(key))
if (value) {
let nowTime = new Date().getTime()
if (nowTime > value.datetime && value.datetime != 0) {
localStorage.removeItem(key)
return null;
}
return value.content
}
return null
} catch (err) {
return null
}
},
remove(key) {
return localStorage.removeItem(key)
},
clear() {
return localStorage.clear()
}
}
export default tool
此处为localStorage 增加了超时功能可自行选择
8.引入 element-plus
npm install element-plus --save
element-plus/icons-vue需要单独引入并注册
npm install @element-plus/icons-vue
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "element-plus/theme-chalk/display.css";
import * as elIcons from '@element-plus/icons-vue'
import router from "./router";
import store from "./store";
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.use(store);
app.use(router);
app.use(ElementPlus);
for(let icon in elIcons){
app.component(`ElIcon${icon}`, elIcons[icon])
}
//挂载app
app.mount("#app");
至此准备工作结束
推荐阅读
您阅读本篇文章共花了：
发表评论