JianghuJS-页面(Page)

学习目标

• 理解jianghujs page：学习page的基础模板渲染。
• 快速创建页面：根据指定的数据表快速生成模板页面。
• Page的组成部分：学习page的代码、施工方案和配置。

1. JianghuJs page

Page即为HTML页面, JianghuJS主要使用以下技术构建页面

• nunjucks模板引擎: include来复用代码/引入组件, extends用来指定模板继承
• Vue.js框架
• Vuetify UI库

在JianghuJS框架中，page文件存放在/app/view/page文件夹下，并且在项目数据库的_page表中有对应的配置。

2. 使用jianghu-init快速创建page

需求：有一张 student表

CREATE TABLE `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `studentId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '学生ID',
  `name` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '学生名字',
  `gender` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '性别',
  `dateOfBirth` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '出生日期',
  `classId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级ID',
  `level` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '年级',
  `bodyHeight` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '身高',
  `studentStatus` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '学生状态; 在校, 离校',
  `remarks` mediumtext COLLATE utf8mb4_bin COMMENT '备注',
  `operation` varchar(255) COLLATE utf8mb4_bin DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  `operationByUserId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者userId',
  `operationByUser` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者用户名',
  `operationAt` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`) USING BTREE,
  KEY `studentId` (`studentId`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

现在创建一个页面管理student数据, 操作如下:

$ cd my-project
$ jianghu-init page
    ? Please select a page type (Use arrow keys)
    > 1table-page - generate pages from a table
    ✔ 初始化数据库连接成功
    ℹ 开始生成 CRUD
    ? 请选择你要生成 crud 的表 (Press <space> to select, <a> to toggle all, <i> to invert sele
    ? 请选择你要生成 crud 的表 student
    { tables: [ 'student' ] }
    ℹ 开始生成 student 的 CRUD
    ? 【student】数据表pageId studentManagement
    ℹ 表字段
    ✔ 生成 student 的 vue 文件完成
    ℹ 开始生成 student 的相关数据
    ℹ 正在执行 -- 创建 page
    ℹ 正在执行 -- 创建 resource
    ✔ 生成 student 的相关数据完成
    ✔ init crud is success
    ✔ jianghu init page is success
$ npm run dev
    > my-project@0.0.1 dev
    > egg-bin dev --port=7001
    2023-04-10 14:00:39,679 INFO 62582 [master] @jianghujs/jianghu started on <http://127.0.0.1:7001> (1523ms)

打开浏览器访问http://127.0.0.1:7001, 就会发现菜单上多了一个studentManagement页面

提示：使用jianghu-init命令生成Page的过程中，数据表需要遵循以下规范：

• 表名应为小写，采用下划线分隔单词，例如：user_profile。
• 所有表必须有一个自增长的id列作为主键，列名为：id。
• 所有字段应使用驼峰标识，例如：userAvatar、contractId。
• 字段应填写注释，例如： userAvatar COMMENT ‘头像’。如果是一些字典字段，可以在注释后加上一些开发人员需要了解的备注，例如：status COMMENT ‘状态; 启用,禁用’。这样生成的页面字段标题只会显示‘状态’。
• 表格编码应使用utf8mb4。

例如：

CREATE TABLE `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `studentId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '学生ID',
  `name` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '学生名字',
  `gender` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '性别',
  `dateOfBirth` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '出生日期',
  `classId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级ID',
  `level` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '年级',
  `bodyHeight` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '身高',
  `studentStatus` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '学生状态; 在校, 离校',
  `remarks` mediumtext COLLATE utf8mb4_bin COMMENT '备注',
  `operation` varchar(255) COLLATE utf8mb4_bin DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  `operationByUserId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者userId',
  `operationByUser` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者用户名',
  `operationAt` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`) USING BTREE,
  KEY `studentId` (`studentId`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

3. 一个Page有哪几部分

一个Page文件通常由以下几部分构成：

• 父页面：使用extends用来指定父页面, 例如: {% extends 'template/jhTemplateV4.html'%}
• vueTemplate: 用于呈现页面结构和内容的HTML代码
• vueScript：用于处理页面的数据和逻辑的JavaScript代码

以my-project项目中的/page/backendSearchDemo.html为例

{% extends 'template/jhTemplateV4.html'%}
{% block vueTemplate %}
<script type="text/html" id="app-template">
    <div>
        <v-app mobile-breakpoint="sm">
          <jh-menu />
          <v-main class="mt-15">
              ...
          </v-main>
        </v-app>
        <jh-toast />
        <jh-mask />
        <jh-confirm-dialog />
    </div>
</script>
<div id="app">
</div>
{% endblock %}
{% block vueScript %}
{% include 'common/jianghuJs/fixedTableHeightV4.html' %}
<script type="module">
new Vue({
  el: '#app',
  template: '#app-template',
  vuetify: new Vuetify(),
  data: () => ({}),
  async created() {},
  mounted() {},
  methods: {}
})
</script>
<style scoped>
</style>
{% endblock %}

4. Page中doUiAction规范

doUiAction是一个页面中定义的js方法,在JianghuJS框架中,我们希望html上的 所有操作都调用 doUiAction方法.

在doUiAction规范中, 一个页面上的业务操作会被分成多个js方法执行, doUiAction管理了这些js方法。这样做的目的是为了增加 js代码的可读性, 使用方法名来增加可读性。

以下是一个新增学生的案例, 点击新增按钮时

1. 准备好 学生表单数据
2. 打开 学生表单所在抽屉

<v-btn color="success" class="elevation-0 mr-2" @click="doUiAction('startCreateItem')" small>新增</v-btn>
// doUiAction定义与实现
methods: {
    // 定义doUiAction
    async doUiAction(uiActionId, uiActionData) {
      switch (uiActionId) {
        case 'startCreateItem':
          await this.prepareCreateFormData();
          await this.openCreateDrawer();
          break;
        default:
          console.error("[doUiAction] uiActionId not find", {uiActionId});
          break;
      }
    },
    // ---------- startCreateItem uiAction >>>>>>>>>> --------
    async prepareCreateFormData() {
         //do something...
    },
    async openCreateDrawer() {
       //do something...
    },
    // ---------- <<<<<<<<<<< startCreateItem uiAction ---------
}

5. Page配置

以下内容了解即可

在Jianghu框架中页面可以通过项目数据库的_page表进行配置:

• pageId: url上的路径
• pageFile: 指定那个html文件,默认用的${pageId}.html
• pageName: 展示在菜单上的名字
• pageType: showInMenu, dynamicInMenu, seo
• sort: 展示在菜单上的顺序，从小到大排
• pageHook: 页面构建的前置操作
• passcode: 页面认证密码, 需要结合对应的ui组件一起使用

小结

通过以上步骤，我们成功地了解了江湖JS中的页面的定义，和如何使用Jianghu-init工具快速创建页面。可以动手尝试一下以下练习：

• 给定一个客户表，使用jianghu-init命令创建一个客户列表页面。