Frontend configuration & i18n

2018-12-09 07:35:04

Cabloy’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

Definition of Config

src/module/test-todo/front/src/config/config.js

export default {
  message: 'hello world',
  markCount: 2,
};

Usage of Config

src/module/test-todo/front/src/pages/test/echo.vue

onPerformInvoke() {
+ const params = {
+   message: this.$config.message,
+   markCount: this.$config.markCount,
+ };
- this.$api.post('test/echo').then(data => {
+ this.$api.post('test/echo', params).then(data => {
    this.message = data;
  });
},

Backend Logic

src/module/test-todo/backend/src/controller/test.js

async echo() {
- const message = this.ctx.text(this.ctx.config.message);
- this.ctx.success(message);
+ const { message, markCount } = this.ctx.request.body;
+ const res = `${message}${new Array(markCount + 1).join('!')}`;
+ this.ctx.success(res);
}

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.js

export default{
  modules: {
    'test-todo': {
      message: 'hello world!',
      markCount: 3,
    },
  },
};

i18n

Definition of Language Resources

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

src/module/test-todo/front/src/config/locale/zh-cn.js

export default {
  ...
  'hello world!': '世界,您好!',
};

Usage of Language Resources

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

src/module/test-todo/front/src/pages/test/echo.vue

onPerformInvoke() {
  const params = {
-   message: this.$config.message,
+   message: this.$text(this.$config.message),
    markCount: this.$config.markCount,
  };
...

Override Language Resources

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

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

export default {
  'hello world!': '您好,世界!',
};

More Examples

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

src/module/test-todo/front/src/config/locale/zh-cn.js

export default {
  ...
+ Test: '测试',
+ Invoke: '调用',
};

src/module/test-todo/front/src/pages/test/echo.vue

<template>
   <eb-page>
-    <eb-navbar title="Test" eb-back-link="Back"></eb-navbar>
+    <eb-navbar :title="$text('Test')" eb-back-link="Back"></eb-navbar>
     <f7-block>
-      <eb-button :onPerform="onPerformInvoke">Invoke</eb-button>
+      <eb-button :onPerform="onPerformInvoke">{{$text('Invoke')}}</eb-button>
       <eb-input type="text" v-model="message"></eb-input>
     </f7-block>
   </eb-page>
</template>


Comments: