CabloyJS’s business module includes not only backend logic, but also frontend pages. In order to improve the development efficiency and flexibility of business module, it not only provides the features of configuration and i18n in the backend, but also provides the features in the frontend, and also supports project level overriding

Here, we implement a virtual requirement:

  1. Put the parameter message in the frontend configuration
  2. The frontend defines another parameter markCount, which indicates the number of exclamation marks
  3. The frontend passes these two parameters to the backend, which combines them and returns the result
  4. The frontend displays the returned result

Configuration

1. Definition of Config

src/suite-vendor/test-party/modules/test-party/front/src/config/config.js

  1. 1export default {
  2. 2  message: 'Hello World',
  3. 3  markCount: 2,
  4. 4};

2. Usage of Config

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/guide.vue

  1. 1onPerformClick4() {
  2. 2  const params = {
  3. 3    message: this.$config.message,
  4. 4    markCount: this.$config.markCount,
  5. 5  };
  6. 6  return this.$api.post('kitchen-sink/guide/echo4', params).then(data => {
  7. 7    this.message4 = data;
  8. 8  });
  9. 9},

3. Backend Logic

src/suite-vendor/test-party/modules/test-party/backend/src/controller/kitchen-sink/guide.js

  1. 1async echo4() {
  2. 2  const { message, markCount } = this.ctx.request.body;
  3. 3  const res = `${message}${new Array(markCount + 1).join('!')}`;
  4. 4  this.ctx.success(res);
  5. 5}

4. Override Config

Use project level config to override module level config, thereby changing message from Hello World to Hello World!, and changing markCount from 2 to 3

src/front/config/config.{scene}.js

  1. 1export default{
  2. 2  modules: {
  3. 3    'test-party': {
  4. 4      message: 'Hello World!',
  5. 5      markCount: 3,
  6. 6    },
  7. 7  },
  8. 8};

i18n

1. Definition of Language Resources

The default language for CabloyJS is en-us. If support Chinese, you need to add zh-cn resource file

src/suite-vendor/test-party/modules/test-party/front/src/config/locale/zh-cn.js

  1. 1export default {
  2. 2  'Hello World': '世界，您好',
  3. 3};

2. Usage of Language Resources

CabloyJS uses the method $text to dynamically get the specified language resources according to the locale configuration of the client

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/guide.vue

  1. 1onPerformClick5() {
  2. 2  const params = {
  3. 3    message: this.$text('Hello World'),
  4. 4    markCount: this.$config.markCount,
  5. 5  };
  6. 6  return this.$api.post('kitchen-sink/guide/echo4', params).then(data => {
  7. 7    this.message4 = data;
  8. 8  });
  9. 9},

3. Override Language Resources

Use project level language resources to override module level language resources, thereby changing 世界，您好 to 您好，世界

src/front/config/locale/zh-cn.js

  1. 1export default {
  2. 2  'Hello World': '您好，世界',
  3. 3};

4. More Examples

Similarly, we can i18n the title and button of the test page

src/suite-vendor/test-party/modules/test-party/front/src/config/locale/zh-cn.js

  1. 1export default {
  2. 2  Guide: '指南',
  3. 3  Click: '点击',
  4. 4};

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/guide.vue

  1. 1<template>
  2. 2  <eb-page>
  3. 3    <eb-navbar :title="$text('Guide')" eb-back-link="Back"></eb-navbar>
  4. 4      ...
  5. 5      <eb-button :onPerform="onPerformClick">{{$text('Click')}}</eb-button>
  6. 6      ...
  7. 7  </eb-page>
  8. 8</template>