前端使用手册
前言
该文档的目的，是想要前端开发人员可以快速上手整个项目的开发。（会持续补充）
项目的基本目录结构，以及如何启动、打包相关的基础性知识在
README.md中就可以查看，这里就不再概述。
正文
1. 新建路由与其对应的页面
该工程的路由，除了一些静态的基础路由之外，其他的都采用了
动态路由以请求后端接口获取的实现方式，所以我们才会与往常开发不同，需要先（在数据库中）创建路由，然后通过接口获取的方式得到这个你创建的路由，才能打开这个路由页面，从而进行本地开发，直接创建路由会导致路由守卫无限循环，堆栈内存爆炸的问题。
好在工程中提供内置了创建路由的前台页面，接下来就说一下，如果操作。
-
项目启动并登录成功之后，打开 菜单管理 页面
如果被重定向到了其他路由页面，就需要手动找寻相应的菜单了。
(右上角)系统应用管理 => (左侧更新出的一级菜单)权限管理 => (一级菜单下面的二级菜单)菜单管理 -
打开页面之后，页面的左侧是所有的路由菜单，右侧是左侧选中菜单的各项属性值，这里有
添加、编辑、删除、更新的功能，我们这里主要用到添加功能。- 首先在左侧选中你所要添加路由，所对应的父级菜单。
- 之后点击左上角的
添加按钮。 - 然后在右侧表单中填入你所要添加路由的各项属性值，这里不会填也没事，可以点击你想要添加路由的同级路由，他们有着同一个父级路由，可以看这个同级路由的各项属性值，来对比着填你新增路由的表单。
- 需要注意的一点是：
前端组件这一项，需要有你已经在工程中创建了路由对应.vue文件的前提。
2. 新建路由 2.0
经过上述文章 [新建路由与其对应的页面] 的操作之后，还是没有完全完善的，因为应用左侧的菜单树上，不会自动地出现这个新建的路由，无论如何刷新，也都是不行的，原因在于，是需要一个权限的赋值操作的，操作之后被赋值的用户才可以看到最新的菜单列表，接下来说一下具体步骤（前提得是管理员权限）。
-
项目启动并登录成功之后，打开 角色管理 页面
如果被重定向到了其他路由页面，就需要手动找寻相应的菜单了。
(右上角)系统应用管理 => (左侧更新出的一级菜单)权限管理 => (一级菜单下面的二级菜单)角色管理 -
打开页面之后，页面的左侧是所有的角色列表，右侧不用管，只需要选中相应的角色，我这里选中的是【管理员】，然后点击上面的【角色赋权】按钮，之后就是跳转到了真正菜单权限赋值的页面，再在左侧菜单树，选中单个树形菜单的复选框，这样就完成赋权了。
3. 项目中的权限控制
虽然项目中的权限控制被细分为
接口和按钮两个大类，但是在实际配置以及赋权的时候都是一起生效的。
具体的操作分为两块：应用端 和 前端代码端。
-
应用端
经分系统 - 按钮权限 功能演示 应用端2.gif
-
下面简要概述一下 GIF 图中所有的操作步骤，主要分为两个大步骤：加权限 和 赋权限。
-
加权限
登录成功之后，依次选择下列菜单：
(右上角)系统应用管理 => (左侧更新出的一级菜单)权限管理 => (一级菜单下面的二级菜单)菜单管理，之后等到左侧树形菜单数据加载完毕之后，找到你需要增加权限的菜单，并单击对应的文本内容，之后右侧会加载出来菜单对应的所有配置，然后就可以在右侧的下方点击【添加】按钮了（添加的规则需要看下面的详细描述）。-
添加的方式是有固定规则的。下面先说明一下常规菜单的规则，后面单独说一个由
报表配置制作并发布的菜单的规则。-
资源编码
格式为
a:b。
a 是当前菜单的唯一英文名称，建议直接复制对应的资源路径的末位或者是对应的前端组件中的名称；
b 是当前权限所对应的功能描述，例如：查询 => search，下载 => download -
资源类型，一般选择
button即可。 -
资源名称，这个其实就是功能描述，一般为页面中对应
button中的文本。 -
资源地址，这个就像 GIF 图中操作的那样，需要找到该
button点击触发的后端接口地址，如果是多个接口被触发的话，就选择第一个。 -
资源请求类型，这个就是选择上面
资源地址中填写的接口对应的请求方式。
-
-
由
报表配置制作并发布的菜单的添加规则-
资源编码
格式为
serviceAnalysisCommon-a:b。
a 是当前菜单对应的报表 id，具体表示的就是http://localhost:9527/#/customize/serviceAnalysisCommon/35中的 35；
b 是当前权限所对应的功能描述，例如：查询 => search，下载 => download -
资源类型，选择
button即可。 -
资源名称，这个其实就是功能描述，一般就是页面中对应
button中的文本。 -
资源地址，这个是固定地址。
如果是【查询】按钮的话填
/dataFactory/analysis/getData，【下载】的话填/dataFactory/analysis/exportReport -
资源请求类型，这个就是选择上面
资源地址中填写的接口对应的请求方式，也是固定的，都是选择POST。
-
-
-
赋权限
在依照上述步骤最终
添加成功之后，需要进行赋权操作。先跳转至菜单管理的同级菜单角色管理页面，接着找到并点击左侧列表中的对应角色，再点击上面的【角色赋权】按钮，接着左侧会刷新出相应的树形菜单数据，找到并勾选中刚刚增加权限的菜单，然后单击对应的文本内容，右侧会加载出来你添加的所有权限列表，勾选中你所要赋权的那一项，最后点击【保存】即可。
-
前端代码端
经分系统 - 按钮权限 功能测试 代码 端.gif虽然上面实现了应用层面的
加权限和赋权限，但是想要真正地生效，还需要前端人员在对应的代码中加上相应的权限指令判断（这是已经在工程中全局封装的功能）。
首先我们找到上面进行权限操作的菜单在前端工程中对应的.vue文件，这里是有小技巧的，我们在上述权限操作中，在最开始选中菜单的时候，右侧会有对应的菜单所有配置数据，其中的前端组件这一项的值就是我们项目中相应的.vue文件，找到文件之后就给对应的按钮添加指令即可。注意：这里v-permission指令的值，就是你在上面加权限时资源编码的值。由
报表配置制作并发布的菜单不适用上述规则，由于它是通用组件，所以只需要增加一次即可，不需要再单独进行操作了。（上面需要配置权限的工作交给配置报表的人员进行操作）
示例如下：v-permission='`serviceAnalysisCommon-${id || $route.params.id}:search`'
网友评论