Page Components

12003

1. Libraries Required for Building Pages

vuetify: UI library
nunjucks: Template engine library, use include to reuse code or import components

2. Page Location

In the JianghuJS framework, HTML files are stored in the /app/view/page folder.

3. Create a Project with jianghu-init

Refer to Initialize Project

4. Page Composition

A Page file typically consists of the following parts:

• Parent Page: Use extends to specify the parent page, for example: {% extends 'template/jhTemplateV4.html'%}
• vueTemplate: HTML code used to present the page structure and content
• vueScript: JavaScript code used to handle the data and logic of the page

Example using 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">
          <!-- Page Content >>>>>>>>>>>>> -->
          <div v-if="error.errorCode">
            <h2>{{ error.errorCode }} : {{ error.errorReason }}</h2>
            <hr/>
            <h2>{{ error.errorReasonSupplement }}</h2>
          </div>
          <div v-else>
            <h2>Hey, it seems you are lost?</h2>
          </div>
          <!-- <<<<<<<<<<<<< Page Content -->
          </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. Global Variables

• appInfo
  • Usage: 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: 'File Management',
    appLogo: `${appId}/public/img/logo.png`,
    appType: 'single',
    appDirectoryLink: '/',
    indexPage: `/${appId}/page/studentFileManagement`,
    .......
      ].join(','),
    },
    middleware,
    ...middlewareMatch,
  };

};

• userInfo

  • The logged-in user's ID and username can be accessed through userInfo.

  • Usage: window.userinfo.userId window.userinfo.userName

6. doUiaction Construction Plan

• The construction plan in JianghuJS implements the principles of the construction plan using the js methods defined in the doUiAction page, meaning that all operations on HTML in the JianghuJS framework call the doUiAction method.
  See Frontend Construction Plan doUiAction

7. Resource Request Configuration Instructions

7.1 Frontend Page Initiates Resource Request with jianghuAxios

jianghuAxios is a simple wrapper around axios in the JianghuJS framework. When using jianghuAxios to initiate a Resource request, the framework provides some data packaging parameters, and additional parameters need to be configured: pageId, actionId, actionData, where, sort, etc.

• Use Case

Code Source: doUiAction.html in the basic project

// Import jianghuAxios
{% include 'common/jianghuAxios.html' %}

// Use 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 Parameter Description

where offset limit parameters are only useful in SQL resource scenarios

| Protocol Field | Type | Description |
|