功能26:新增一个新员工培训页面
功能25:角色管理
功能24:菜单管理
功能23:从后端获取路由/菜单数据
功能22:用户管理
功能21:使用axios发送请求
功能20:使用分页插件
功能19:集成MyBatis-Plus
功能18:创建后端工程
功能17:菜单管理
功能16:角色管理
功能15:用户管理
功能14:使用本地SVG图标库
功能13:侧边栏加入Logo
功能12:折叠/展开侧边栏
功能11:实现面包屑功能
功能10:添加首页菜单项
功能9:退出登录功能
功能8:页面权限控制
功能7:路由全局前置守卫
功能6:动态添加路由记录
功能5:侧边栏菜单动态显示
功能4:首页使用Layout布局
功能3:点击登录按钮实现页面跳转
功能2:静态登录界面
功能1:创建前端项目
前言
通过操作菜单管理页面,新增一个新页面。
一.操作步骤
1.新建目录:培训
上级菜单
:主类目 + 菜单类型
:目录:创建一个在侧边栏显示的目录。跟首页同级别。单独创建一个目录没有意义,需要在目录下创建菜单。
显示排序
目前可以任意值,还未实现该字段的相关逻辑。
菜单名称
任意命名,会显示在侧边栏。
路由地址
任意英文,后续在前端工程中,需要创建对应路径的模板文件。
其他字段暂时保持默认值。
2.新建菜单:新员工培训
上级菜单
选择定义好的目录
菜单类型
选择菜单
显示排序
目前可以任意值,还未实现该字段的相关逻辑。
菜单名称
任意命名,会显示在侧边栏。点击对应的目录后,展开显示。
路由地址
任意英文,后续在前端工程中,需要创建对应路径的模板文件。
组件路径
目录的路由地址+菜单的路由地址+index,对应前端项目中的模板文件src\views\orientation\newhire\index.vue
其他字段暂时保持默认值。
3.新建模板
src\views\orientation\newhire\index.vue
<script setup lang="ts">
</script>
<template>
<div>
新员工培训
</div>
</template>
<style scoped lang="scss">
</style>
二.功能验证
运行项目,浏览器访问http://localhost:5173/index
在侧边栏点击培训—>新员工培训。正常显示
三.思考
假设公司100人,含新员工10人,新增的新员工培训页面,只有这10个新员工登录系统能看到,其他员工登录后看不到。如何实现?