江湖数字化平台
登录

页面.常量

12003

在本节中，我们将介绍如何在项目中使用常量，通过 pageHook 实现 UI 国际化。常量可以用于存储在多个页面中重复使用的文本或数据。通过使用 _constant_ui 配置常量，我们可以在页面中方便地引用这些常量。同时，我们将展示如何通过配置 language 实现国际化支持。

使用常量

  • 首先，我们需要在 _constant_ui 中配置常量。以下表格展示了一个名为 constantDemo 的常量，它包含一个版权声明文本。

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

  • 添加/app/service/constantUi.js

    1. 'use strict';
    2. const Service = require('egg').Service;
    3. class ConstantUiService extends Service {
    4.   async getConstantUiMap() {
    5.     const { jianghuKnex } = this.app;
    6.     const { pageId } = this.ctx.packagePage;
    7.     const { language } = this.app.config;
    8.     const constantUiList = await jianghuKnex(`_constant_ui`).whereIn('pageId', ['all', pageId]).select();
    9.     const constantUiMap = Object.fromEntries(
    10.       constantUiList.map(obj => {
    11.         const { constantKey } = obj;
    12.         try {
    13.           return [constantKey, JSON.parse(obj[language] || '{}')];
    14.         } catch (error) {
    15.           this.app.logger.error('getConstantUiMap', ` constantKey:${constantKey} `, error);
    16.           return [constantKey, {}];
    17.         }
    18.       })
    19.     );
    20.     return constantUiMap;
    21.   }
    22. }
    23. module.exports = ConstantUiService;

  • 接下来，我们需要确保 demoPage 页面的 pageHook 已经配置好了。

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

  • 在页面中使用常量，我们可以通过 <$ constantUiMap.constantDemo.copyright $> 引用常量中的版权声明文本。

    1. <div>
    2.   <h2>
    3.       <$ constantUiMap.constantDemo.copyright $>
    4.   </h3>
    5. </div>
    6. <script type="module">
    7.   new Vue({
    8.       el: '#app',
    9.       template: '#app-template',
    10.       vuetify: new Vuetify(),
    11.       data: {
    12.       },
    13.   })
    14. </script>

常量国际化

为了实现国际化支持，我们需要在 /config/config.local.js 中配置 language。例如，如果我们希望使用英文，我们可以将 language 设置为 'en'。

  1. language: 'en',

_constant_ui表结构

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