[DncZeus帮助文档]新建你的页面

DncZeus 作者: Rector 423 阅读 0 评论 0 收藏 收藏本文

郑重申明:本文未经许可,禁止任何形式转载

新建你的页面

本文将从头开始,一步一步带你创建属于你的页面,以及讲解在制作页面时需要注意的地方。

示例页面

  • 标题:示例页面
  • 英文名称:demo_page
  • 页面路径:demo/demo-page

注意:这里的”英文名称”和”页面路径”都非常重要,要分别确保全局惟一,两者在后续的路由配置和菜单权限配置时需要使用。

前端项目(DncZeus.App)

新建视图页面

src/view/目录是用于存放视图页面的目录,在此目录中新建[demo]目录,再在[demo]目录中新建页面[demo-page.vue]

新建示例视图页面

打开demo-page.vue文件,配置这个文件的名称为:demo_page,并编写代码(这里仅为示例代码),如下:

<template>
  <div>
    <h1>这是一个用于演示的页面</h1>
    <Button v-can="'create'" icon="md-create" type="primary" title="新增用户">新增(有权限才显示)</Button>
  </div>
</template>

<script>
export default {
  name: 'demo_page',
  data () {
    return {

    }
  }
}
</script>

注意: 请确保每个页面的名称name(这个示例页面的名称为:demo_page)都是惟一的,否则将不能正常渲染!

配置路由

接着,打开路由配置文件src/router/routers.js,在此文件中加入路由选项,本例如下:

配置新建页面的路由

这里配置了菜单的层级,其中[示例菜单]为父级菜单,[示例页面]为其子菜单。支持的路由选项配置请参考iview-admin的路由配置文档

注:[示例页面]路由中的name属性值要和视图页面中的name保持一致,这里即:demo_page

页面按钮权限控制

如果你需要在页面中控制按钮的权限,则在需要使用权限的按钮中添加权限控制指令v-can,比如[新增用户]按钮的权限编码为create,则:

<Button v-can="'create'" icon="md-create" type="primary" title="新增用户">新增(有权限才显示)</Button>

这样,我们的前端项目(DncZeus.App)[示例]页面就创建完成了,接下来需要在后台配置示例页面相关的菜单以及访问和按钮权限。

配置菜单和权限

配置菜单

如果你不想在后台添加[示例菜单]和[示例页面]这两个菜单页面,请打开静态路由配置文件[/src/router/static-router.js],将[示例菜单]和[示例页面]对应的路由名称添加到静态路由的集合中,如:

添加前:

// 不需要授权的路由名称
let staticRouters = ["home", "message_page", "error_store_page", "error_logger_page", "argu", "params", "query", "error_401", "error_500", "error_404","join","join_page"]
export default staticRouters;

添加后:

// 不需要授权的路由名称
let staticRouters = ["home", "message_page", "error_store_page", "error_logger_page", "argu", "params", "query", "error_401", "error_500", "error_404","join","join_page","demo","demo_page"]
export default staticRouters;

注:所有添加到此静态路由的菜单名称均视为不需要授权的路由,任何人可以直接访问(请慎用)。

如果需要后台的权限管控,则:

打开后台[菜单管理]地址: http://localhost:9000/rbac/menu

添加[示例菜单],如下:

添加示例菜单

添加[示例页面],如下:

添加示例页面

其中的”菜单别名”要与前端路由中的name属性值要保持一致,而”URL地址”要与前端路由中的path属性的值保持致,否则菜单将无法显示。

配置按钮权限

再打开[权限管理]地址: http://localhost:9000/rbac/permission

添加[示例页面]用到的菜单权限和按钮权限

[示例页面]的”查看”菜单权限:

添加示例页面的访问权限

[示例页面]的”新增”按钮权限:

添加示例页面的新增按钮操作权限

最后,打开[角色权限分配]地址:http://localhost:9000/rbac/role-permission, 为对应角色分配[示例页面]的相应权限即可,如下图:

为示例页面的角色分配权限

阅读了该文章的人还浏览了...

本文永久链接码友网 » [DncZeus帮助文档]新建你的页面

发布于: 2018-12-27 13:58:11
分享扩散: