Cabloy的业务模块不仅包含后端逻辑，也包含前端页面。为了提升业务模块的开发效率和灵活性，不仅在后端提供了参数配置和国际化特性，在前端也提供了相应的特性，而且也支持项目级别的覆盖

在这里，我们实现一个虚拟的需求：

  1. 把message参数放到前端配置
  2. 前端再定义一个参数markCount，表示感叹号的个数
  3. 前端将这两个参数传入后端，后端进行组合，并将结果返回
  4. 前端显示返回的结果

参数配置

定义参数

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

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

使用参数

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;
  });
},

修改后端逻辑

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);
}

覆盖参数

使用项目级别的参数覆盖模块级别的参数，从而将hello-world改为hello-world!，将markCount由2改为3

src/front/config/config.js

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

国际化

定义语言资源

Cabloy默认语言是en-us，如果需要支持中文，就需要添加zh-cn资源文件

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

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

使用语言资源

Cabloy通过方法$text根据客户端的locale配置动态使用指定的语言资源

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,
  };
...

覆盖语言资源

使用项目级别的语言资源覆盖模块级别的语言资源，从而将世界，您好！改为您好，世界！

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

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

更多的语言资源

同样，我们也可以把测试页面的标题和按钮进行国际化处理

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>