vue主要功能,vue实现运维管理界面
Vue是当今发展最快的前端框架。Vue平易近人，多才多艺，性能卓越。它的语法非常直观，有一个友好的学习曲线。是开发者最想学习的顶级前端库之一。下面这篇文章主要介绍Vue管理系统项目中的一些核心技巧，有需要的朋友可以参考一下。
目录
前言1。Axios拦截器和二次封装1.1 Axios请求和响应拦截器。1.2 axios 2的二次封装。vuex 3的数据持久性。安装路由防护和动态路由3.1安装路由防护3.2安装动态路由4。环境变量5的配置文件。封装按钮级权限的自定义指令的摘要。
前言
在很多用脚手架搭建的vue管理系统项目中，其核心模块的处理方式大致相同。
于是，我结合之前的项目，整理了重要模块的解决方案。
1. Axios 拦截器和二次封装
1.1 Axios 请求和响应拦截器。
//介绍vue和axios模块
从“vue”导入Vue
从“axios”导入axios
//环境变量中的请求地址
const BASE URL=process . env . vue _ APP _ API _ BASE _ URL
//axios配置变量
常量配置={
baseURL: baseURL，
超时：1000 * 60 * 3 //超时
}
//创建axios实例
const _axios=axios.create(配置)
//axios的请求阻止程序
_ axios . interceptors . request . use(
功能(配置){
//每次发出请求时，本地存储的令牌值都会添加到请求标头中。
const TOKEN=vue . ls . get(ACCESS _ TOKEN)
config.headers[token]=令牌
//返回新的配置项
返回配置
},
//如果失败，则返回失败信息。
功能(错误){
退货承诺.拒绝(错误)
}
)
//axios的响应拦截器
_ axios . interceptors . response . use(
功能(响应){
//解构响应对象中的代码和消息
const { code，msg }=response.data
//响应标头中的内容类型类型
const _ content _ type=response . headers[ content-type ]
//是导出的吗？
if (_content_type===_export) {
返回承诺。解决(响应)
}
//匹配代码值和后端约定。
//0:响应成功——返回响应体；20000:用户令牌为空20001:用户信息为空。20002:登录无效，请重新登录。
开关(代码){
案例0:
返回承诺。解决(响应)
案例20000:
案件20001:
第20002号案件：
router.replace({ path: /login })
退货承诺.拒绝(消息)
默认值：
返回消息承诺.拒绝(消息)
}
},
//如果失败，则返回失败信息。
功能(错误){
返回承诺.拒绝(错误.消息)
}
)
1.2 Axios 二次封装
从“ant-design-vue/es/notification”导入通知
/**
*获取方法
* @ param { String } url[请求的URL地址]
* @ param { Object } params[请求中携带的参数]
* @退货承诺
*/
导出函数httpGet (url，params) {
返回新承诺((解决，拒绝)={
axios.get(url，{
参数：参数
})。然后(res={
解析(结果数据)
})。catch(错误={
console.warn(错误， warn )
拒绝(错误)
})
})
}
/**
*
*过帐方法
* @ param { String } url[请求的URL地址]
* @ param { Object } params[请求中携带的参数]
* @退货承诺
*/
导出函数httpPost (url，params) {
返回新承诺((解决，拒绝)={
axios.post(url，params)。然后(res={
解析(结果数据)
})。catch(错误={
if (err===未定义 err。__取消__) {
返回false
}
通知.错误({
标题：“错误”，
消息：错误
})
拒绝(错误)
})
})
}
2. Vuex 的数据持久化
在页面上刷新Vuex中的数据后，该值将被复制到初始化状态。Vuex数据的持久化可以保证页面刷新后数据的不变性。
这是一个简单的处理方法。
分析：页面刷新后，Vue指的是重新加载main.js入口文件，然后加载写好的js文件(用于再次处理插入Vuex的操作)。
//mian.js
从导入引导程序。/核心/引导
//./核心/bootstrap.js
从“vue”导入Vue
从“@/store/”导入商店
导出默认函数初始值设定项(){
store.commit(SET_TOKEN ，Vue.ls.get(ACCESS_TOKEN ))
store.commit(SET_MENUS ，Vue.ls.get(MENU_LIST ))
store.commit(SET_USER_BTN ，Vue.ls.get(USER_BTN ))
}
3. 路由守卫和动态路由的挂载
3.1 路由守卫
路由卫士，顾名思义，vue-router提供的导航卫士，主要用于通过跳转或取消来守护导航。
您可以使用router.beforeEach注册全局前保护和router.afterEach全局后挂钩：
从 @/router 导入路由器
从“nprogress”//进度条导入n progress
导入“n progress/n progress . CSS”//进度条样式
//全球前沿卫士
router.beforeEach((收件人，发件人，下一个)={
//进度条开始
NProgress.start()
//读取令牌是否存储在本地存储中
if (Vue.ls.get(ACCESS_TOKEN)) {
If (to.path===/login) {//跳转到登录释放，然后结束进度条。
下一个()
NProgress.done()
} else {//跳转到其他
//动态路由的安装参见3.2动态路由的安装。
.
}
}否则{
if(whitelist . includes(to . name)){
下一个()
}否则{
下一步(/login )
NProgress.done()
}
}
})
//全局post挂钩
router.afterEach(()={
NProgress.done()
})
3.2 动态路由的挂载
动态路由挂载的逻辑也在“全局前置”中处理。
if (Vue.ls.get(ACCESS_TOKEN)) {
if (to.path===/login) {
下一个()
NProgress.done()
} else {//跳转到其他
//解释vuex存储中has的变量ID
const has=store.getters.has
//在没有has变量的情况下动态添加路由。
如果(！有){
//获取本地存储中的后端路由数据
const menus=vue . ls . get(MENU _ LIST)
//调用Vuex中的GenerateRoutes异步方法追加路由数据。
商店。分派(“生成路线”，菜单)。然后(res={
//追加安装处理
router . add routes(store . getters . add routers)
//decodeURIComponent将编码的URI中所有可识别的转义序列转换为原始字符。
const redirect=decodeURIComponent(to . path)
if (to.path===redirect) {
//hack方法确保addRoutes完成，并设置replace: true以便导航不会留下历史记录。
下一个({.到，替换：true })
}否则{
//跳转到目的路由
下一步({ path: redirect })
}
})。catch(()={
//错误处理
通知.错误({
消息：“错误”，
描述：“请求用户信息失败，请重新登录”
})
下一步(/login )
})
} else {//有一个has变量，放开跳转。
下一个()
}
}
}
4. 环境变量的配置文件
生产环境和开发环境中使用的服务器地址和端口号是不同的，所以我们需要配置环境变量的文件，以便在不同的环境中使用相应的请求地址。
一般来说，文件分为。环境和。环境开发文件。env:是生产环境读取的环境变量文件。env.development:是开发环境读取的环境变量文件。还可以根据不同的环境自定义文件。如：env.test217文件。
对应的命令需要在package.json文件中配置，在CI的过程中可以修改下一个命令的名称。
//package.json
脚本:{
serve: vue-cli-service serve ，
build : vue-CLI-服务版本，
“测试217”:“vue-CLI-服务构建模式测试217”，
},
nprunserve命令读取。env.development文件中，nprunbuild命令读取。env文件，npm run test217命令读取环境变量//。env在。env.test217文件。
NODE_ENV=生产
VUE应用标志=专业
VUE应用程序API基本网址=https://xx.ss.com/api
//env。发展
NODE_ENV=开发
VUE应用标志=开发
VUE应用程序应用程序接口基本URL=http://127.0.0.1:80/api
//.env.test217
NODE_ENV=生产
VUE应用标志=开发
VUE应用程序应用程序接口基本URL=http://127.0.0.1:8087/api
爱可信中的配置中的基础地址变量就可以这样根据不同的环境设置了流程. env是全局变量，可以直接访问。包封/包围（动词包围的简写)文件中的变量。
const BASE URL=进程。环境。vue _ APP _ API _ BASE _ URL
5. 封装一个按钮级权限的自定义指令
在入口文件主页。射流研究…中引入自定义指令的文件。主页. js
"导入"。/指令/操作
代码功能//引入某视频剪辑软件和商店
从“vue”导入某视频剪辑软件
从" @/商店"导入商店
/*
* 定义一个函数表达式
*行动-指令名称
*插入-被绑定的元素插入父节点的时候调用（父节点存在即可调用，不必存在文件中)
*/
恒定动作=vue。指令(操作，{
已插入：函数(el，binding，vnode) {
const actionName=binding.arg
//Vuex商店中的用户按钮数据
const用户BTN=商店。吸气剂。用户BTN
//当前路由中的菜单编号
const menuId=vnode。语境。$ route。meta。菜单编号
//过滤出按钮的目录
const btnList=用户BTN。过滤器(item=item。PID===menuId项。mtype===2)
//判读值是否在btnList中，在返回假的，否则返回没错。
function _has(值){
设isExist=true
对于(设I=0；i btnList.lengthi ) {
if (btnList[i].标识符btnList[i].标识符===值){
isExist=false
}
}
返回isExist
}
//判断按钮是否在btnList中，不在就删除或移除改按钮多姆。
if (_has(actionName)) {
埃尔。父节点El。父节点。移除子代(El) (El。风格。display= none )
}
}
})
//导出默认这个函数表达式
导出默认操作
总结
到此这篇关于某视频剪辑软件管理系统项目中的一些核心技能汇总的文章就介绍到这了，更多相关某视频剪辑软件项目核心技能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。