Page.Constants

12003

In this section, we’ll show how to use constants in your project and implement UI internationalization via pageHook. Constants are useful for storing text or data reused across multiple pages. By configuring constants in _constant_ui, you can conveniently reference them in pages. We’ll also demonstrate how to enable i18n by configuring language.

Using Constants

• First, configure constants in _constant_ui. The table below defines a constant named constantDemo, which contains a copyright notice.

constantKey	constantType	pageId	en	zh
constantDemo	object	all	{ "copyright": "Copyright © 2022 jianghujs.org" }	{ "copyright": "版权声明 © 2022 jianghujs.org" }

• Add /app/service/constantUi.js

'use strict';
const Service = require('egg').Service;
class ConstantUiService extends Service {
    async getConstantUiMap() {
      const { jianghuKnex } = this.app;
      const { pageId } = this.ctx.packagePage;
      const { language } = this.app.config;
      const constantUiList = await jianghuKnex(`_constant_ui`).whereIn('pageId', ['all', pageId]).select();
      const constantUiMap = Object.fromEntries(
        constantuIList.map(obj => {
          const { constantKey } = obj;
          try {
            return [constantKey, JSON.parse(obj[language] || '{}')];
          } catch (error) {
            this.app.logger.error('getConstantUiMap', ` constantKey:${constantKey} `, error);
            return [constantKey, {}];
          }
        })
      );
      return constantUiMap;
    }
}
module.exports = ConstantUiService;

• Next, make sure the pageHook for the demoPage page is configured.

pageId	pageType	pageHook
demoPage	showInMenu	{"beforeHook":[{"field": "constantUiMap", "service": "constantUi", "serviceFunc": "getConstantUiMap"}]}

• To use a constant on the page, reference the copyright text via <$ constantUiMap.constantDemo.copyright $>.

<div>
    <h2>
        <$ constantUiMap.constantDemo.copyright $>
    </h3>
</div>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: {
        },
    })
</script>

Internationalizing Constants

To enable i18n, set language in /config/config.local.js. For example, to use English:

language: 'en',

_constant_ui Table Schema

CREATE TABLE `_constant_ui` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `constantKey` varchar(255) DEFAULT NULL,
  `constantType` varchar(255) DEFAULT NULL COMMENT '常量类型; object, array',
  `pageId` varchar(255) DEFAULT 'all' COMMENT '页面id',
  `desc` varchar(255) DEFAULT NULL COMMENT '描述',
  `en` text COMMENT '常量内容; object, array',
  `zh` text COMMENT '常量内容; object, array',
  `operation` varchar(255) DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  `operationByUserId` varchar(255) DEFAULT NULL COMMENT '操作者userId',
  `operationByUser` varchar(255) DEFAULT NULL COMMENT '操作者用户名',
  `operationAt` varchar(255) DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE KEY `pageId_constantKey_unique` (`constantKey`, `pageId`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 15 DEFAULT CHARSET = utf8mb4 ROW_FORMAT = DYNAMIC COMMENT = '常量表;'