功能开发:视图与菜单

创建视图的过程就是定义一项功能,并使其可被授权和访问的过程,包含 3 个步骤:

  1. 创建视图

    创建一个视图组件,用于实现一项功能的人机交互界面。

  2. 注册菜单权限

    注册一项菜单,菜单项与功能的视图组件绑定,赋予功能一个权限码,使一项功能可在权限体系中被授权。

  3. 授权菜单权限

    将一项菜单权限授予给特定的主体(机构、成员、用户),使菜单关联的功能变得可访问。根据授权方式的不同,一个功能可以被定义成不同的访问范围:完全公开访问、特定角色可访问、特定机构可访问、特定用户/账号可访问等。

准备条件

进行开发之前,首先需要创建一个应用项目。

默认有两种应用模板——单模块项目、多模块项目两种模板,采用不同的应用模板创建的应用项目的结构不同,具体请参考:《开发指南 > 应用配置 > 应用项目结构》

本示例中,选择采用“简单应用模板(simple-gapp-template)”,创建一个单模块的 GAPP 应用项目,具体参考《开发指南 > 应用开发 > 创建应用项目》

创建视图

页面布局

默认的页面布局:页面分成左侧边栏导航菜单、左上角LOGO、上方标题栏和工具栏、下方页脚、中间视图,具体布局示例如下:

|----------------------------------------------------------|
|   图标   |   标题   |                工具                  |
|---------|------------------------------------------------|
|         |                                                |
|         |                                                |
|         |                                                |
|   导航   |                     视图                        |
|         |                                                |
|         |                                                |
|         |------------------------------------------------|
|         |                     页脚                        |
|----------------------------------------------------------|

创建视图组件

“视图组件” 定义了前端页面最主要的功能区域,与一项特定的功能菜单关联。在默认布局下,当菜单被点击时,关联的视图组件被激活,并显示在“视图”区域。

web/src/views 目录下创建一个 VUE 组件 simple-form.vue,将组件文件的内容编辑如下:

在编译加载之后,该视图组件会被自动注册,并赋予路由路径为 simple-form.view

<template>
  <x-view title="基本表单">
    <h1><x-icon icon="bs-svg-brightness-high" width="1.5rem" height="1.5rem" /> 演示基本表单 </h1>
  </x-view>
</template>

<!-- 脚本 -->
<script>
export default {

  // 组件属性
  props: {
    // ...
  },

  // 状态数据
  data() {
    return {
      //...
    };
  },

  // 注入属性
  // inject: [],

  // 计算属性
  computed: {},

  // 方法
  methods: {},
};
</script>

<!-- 样式 -->
<style scoped></style>

目录下的每一个 .vue 文件都视为一个视图组件,组件会自动注册为路由组件,并赋予一个由文件名称命名的路由路径,例如:视图组件 views/test.vue 的路由路径是 /test.view ;

注册菜单权限

在“应用功能清单” @profiles/application.profile 中增加一项菜单项 simple-form,便能将视图组件的路由路径与菜单绑定,完成了将视图组件挂载到页面。

{
  "applicationId": "sample-001",
  "applicationName": "示例001-快速开发表单-1",
  // ...
  "features": {
    "menus": [
      {
        key: "home",
        name: "首页",
        icon: "bs-svg-house-door",
        href: "home.view",
      },
      // 新增的菜单项
      {
        key: "simple-form",
        name: "基本表单",
        icon: "bs-svg-house-door",
        href: "simple-form.view",
      }
    ],
  }
}

授权菜单权限

一项“菜单”需要经过显式地授权给机构,以及机构的成员之后,才能给授权的账号访问。

授权的方式主要有 2 种:

  • 一种是在系统的后台进行授权,由 “根账号(root)” 先授权给机构,然后,由机构管理员通过后台再授权给机构成员。

  • 另一种是通过配置文件授权,创建应用项目时,分别在调试配置目录(@conf)和安装配置目录(@install/conf),默认就已经创建了授权配置的模板文件 organization.conf

本示例采用配置文件授权,授权给机构 testcom 的成员 member1 ,在 @conf/organization.conf 加入以下配置:


#######################################
# 授权配置;
#######################################
# ...

# 是否允许通过配置文件进行直接授权;默认为 false ;
galaxyplatform.security.authorization.configurable=true

# ...

# 授权给机构 testcom 的成员 member1 ;
galaxyplatform.security.authorization.orgs.testcom.members.member1.authorities=FEATURE://APPLICATION/MENU/SIMPLE-FORM

菜单的“权限代码”是根据菜单项的 key 和菜单项所处的 profile 文件决定的,格式为:'FEATURE://' + profile文件的Key + Menu树中菜单项的Key路径。

例如,simple-form 菜单项是在 application.profile 中的 MENU 一节声明的,位于菜单树的根,对应的授权码为 FEATURE://APPLICATION/MENU/SIMPLE-FORM

调试运行

启动后台服务

运行入口类 Sample001Bootermain 方法,启动后台服务。

应用项目启动成功

设置前端调试账号

在前端的项目配置文件 web/vite.config.js 中,为服务端代理设置一个账号,当前端启动调试时,以该账号通过代理端口自动登录,以该账号获得授权的上下文加载前端页面,进行功能展示和调试。

// ------------------------
// 服务端代理设置;
// ------------------------
const serverProxy = {
  // 与 server.conf 配置文件设置的端口一致,默认为 8080 ;
  target: "http://localhost:8080",
  
  // ...

  // 配置代理:运行后自动以指定的账号密码登录后端服务;
  // proxy : 'http-proxy' 实例
  configure: (proxy, options) => {
    // 账号需要事先由后端服务控制台或配置文件创建;
    // 采用 HTTP-BASIC 协议进行登录认证,需要服务端支持 HTTP-BASIC 方式,
    // 将服务端配置项 galaxyplatform.security.web.http-basic.enable 设置为 true;
    const username = "member1";
    const password = "abc@123";
    options.auth = `${username}:${password}`;
  },
};

调试运行前端页面

在 VS Code 中“集成终端”中打开在前端项目根目录 web ,在该目录下执行命令 npm run serve ,启动前端页面调试。

web % npm run serve

> sample-001-ui@1.0.0 serve
> vite


  VITE v4.4.9  ready in 449 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help


在浏览器打开链接 http://localhost:5173/,可以看到左侧导航栏已经出现了刚刚定义的新菜单,点击菜单,显示挂载的视图 simple-form

调试前端视图-挂载新菜单

示例代码

最近更新:
发布者: huanghaiquan
扫码咨询