页面组件

12003

1. 构建页面需要的库

vuetify： UI库
nunjucks：模板引擎库，include来复用代码或引入组件

2. 页面位置

在JianghuJS框架中，HTML 文件存放在/app/view/page文件夹下。

3. 用jianghu-init 创建项目

参考初始化项目

4. 页面构成

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

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

以helpV4.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">
       ........
       
        <div class="jh-page-body-container px-8">
          <v-card class="rounded-lg jh-page-doc-container pa-4">
          <!-- 页面内容 >>>>>>>>>>>>> -->
          <div v-if="error.errorCode">
            <h2>{{ error.errorCode }} : {{ error.errorReason }}</h2>
            <hr/>
            <h2>{{ error.errorReasonSupplement }}</h2>
          </div>
          <div v-else>
            <h2>亲，你似乎迷路了？</h2>
          </div>
          <!-- <<<<<<<<<<<<< 页面内容 -->
          </v-card>
        </div>
      </v-main>
    </v-app>
  </div>
</script>
<div id="app">
</div>
{% endblock %}
{% block vueScript %}
<script type="module">
  new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: () => ({
      error: {
        errorCode: null,
        errorReason: null,
        errorReasonSupplement: null,
      },
      ..........
    }),
    async created() {
      const urlObj = new URLSearchParams(location.search);
      if (urlObj.get('errorCode')) {
        this.error.errorCode = urlObj.get('errorCode');
      }
     .......
    },
    methods: {}
  })
</script>
{% endblock %}

5. 全局变量

• appInfo
  • 用法：window.appInfo.appId

module.exports = appInfo => {
  assert(appInfo);
  const appId = 'jianghujs-1table-crud-file';
  const uploadDir = path.join(appInfo.baseDir, 'upload');
  const downloadBasePath = `/${appId}/upload`;
  return {
    appId,
    appTitle: '文件管理',
    appLogo: `${appId}/public/img/logo.png`,
    appType: 'single',
    appDirectoryLink: '/',
    indexPage: `/${appId}/page/studentFileManagement`,
    .......
      ].join(','),
    },
    middleware,
    ...middlewareMatch,
  };
};

• userInfo

  • 登录的用户ID和用户名可以通过userInfo取到。

  • 用法：window.userinfo.userId window.userinfo.userName

6. doUiaction施工方案

• JianghuJS 中的施工方案是把施工方案的原则，用doUiAction页面中定义的js方法实现，即在JianghuJS框架中, html上的所有操作都调用 doUiAction方法。
  详见 前端施工方案 doUiAction

7. 发起resource请求配置说明

7.1 前端页面用jianghuAxios发起Resource请求

jianghuAxios是江湖JS框架进行了简单的axios封装，在使用 jianghuAxios 发起 Resource 请求时，框架提供了部分数据打包参数，还需要配置部分参数：pageId、actionId、actionData、where、sort等。

• 用例

代码来源: basic项目中的doUiAction.html

// 引入jianghuAxios
{% include 'common/jianghuAxios.html' %}
// 使用jianghuAxios
<script>
    async getTableData() {
        const result = await window.jianghuAxios({
            data: {
                appData: {
                    pageId: 'doUiAction',
                    actionId: 'selectItemList',
                    actionData: {},
                    where: {},
                }
            }
        });
        this.tableData = result.data.appData.resultData.rows;
    },
</script>

7.2 参数说明

where offset limit参数只有在 sql resource场景有用

协议字段	类型	描述
packageId	String	必填✅ 协议包的唯一id; 可以使用时间戳 + 随机数生成; 比如: 1622720431076_3905352
packageType	String	必填✅ 协议包类型; 比如：'httpRequest', 'socketForward', 'socketRequest'
appData	Object	必填✅ 协议包数据
--appId	String	必填✅ 应用ID; 比如: demo_xiaoapp
--pageId	String	必填✅ 页面ID; 比如: demoPage
--actionId	String	必填✅ 操作ID; 比如: selectStudentList
--authToken	String	必填✅ 用户令牌
--userAgent	String	选填 客户端浏览器信息; 通过window.navigator.userAgent 获取
--where	Object	选填 where条件; 比如: { name: '张三丰', classId: '2021-01级-02班' }
--whereIn	Object	选填 where in查询条件; 比如: {name: ['张三丰', '张无忌']}
--whereLike	Object	选填 where 模糊查询条件; 比如: { name: '张%' }
--whereOptions	Array	选填 where条件 ; 比如: [['name', '=', 'zhangshan'],['level', '>', 3],['name', 'like', '%zhang%']]
--whereOrOptions	Array	选填 where or 条件; 比如: [['name', '=', 'zhangshan'],['level', '>', 3],['a', 100]]
--offset	Number	选填 查询起始位置; 比如: 0
--limit	Number	选填 查询条数，默认查所有; 比如: 10
--orderBy	Array	选填 排序; 比如: [{ column: 'age', order: 'desc' }]
--actionData	Object	选填 操作数据，比如：要保存或更新的数据... { name: '张三丰', level: '03' }

8. 备注：每个页面都需要记录在_page表, 否则无法访问

参考江湖框架-后端开发-页面（Page)