OJ在线评测系统 前端开发设计优化通用菜单组件 初始化JS全局项目入口
通用菜单组件的开发一
今天完善前端通用项目的模版
我们的前端初始化先用Vue cli脚手架跑页面
然后用arco组件库
我们要完善前端通用项目模版
先改几个bug 优化页面布局
这个footer没有一直处于底部
我们在原生css里去修改
把 position 属性改为 sticky 粘性
#basicLayout .footer {padding: 16px;position: sticky;bottom: 0;left: 0;right: 0;
}但是我们发现我们进行页面的缩放后
这个footer就不会位于底部
我们还是在原生css里去修改
这样就能一直在底部了
进行通用布局样式的修改
最终呈现效果
我们现在要解决的是这个无权限问题
用户实际上是看不到这个菜单的
我们要优化通用导航栏组件的优化
根据权限隐藏菜单
我们想想看我们之前书写的导航栏逻辑
是获取一个导航栏数组
我们把路由里的不同页面封装成数组
然后进行循环遍历展示
根据配置控制菜单的显示隐藏
我们之前的是在路由中定义每个路由的新的属性叫meta
然后在app.vue中做一个全局的拦截
然后每当我们进入一个新的页面的时候能够进行一个判断
是否有admin
即是否有权限
如果有权限 就放行
如果没有权限 就会 跳转到没有权限的页面
我们可以采取同样的逻辑
定义一个路由
meta里有个hideInMenu属性
代表的是菜单的隐藏与否
{path: "/hide",name: "隐藏页面",component: HomeView,meta: {hideInMenu: true,},},现在我们只要在展示前端页面的时候遍历路由
meta里面的hideInMenu属性
只要是true
我们就不进行展示
我们之前展示路由是靠一个for循环
进行一个判断
注意v-if 和 v-for不要一起用
因为v- for会先去执行
然后就会死循环
我们建议的是
先去写v - if 先过滤一遍
在进行v - for 展示 条件渲染元素
我们先在原生js里过滤一下
这样写
数据存在数组里面
//展示在菜单的路由
const visibleRoutes = routes.filter((item, index) => {if (item.meta?.hideInMenu) {return false;} else {return true;}
});注意上边修改
从不同的数组里面拿东西
从visibleRoutes里面拿
就能成功了
初始化全局项目入口
我们先写一个全局初始化函数
钩子函数
预留全局初始化函数 有全局单次调用的代码都能写到这里
钩子函数 页面初始化的时候 去执行函数
//预留全局初始化函数 有全局单次调用的代码都能写到这里
const doInit = () => {console.log("欢迎来到我们的项目");
};//钩子函数 页面初始化的时候 去执行函数
onMounted(() => {doInit();
});