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

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

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

参数配置

定义参数

src/module-vendor/test-party/front/src/config/config.js

export default {
  message: 'Hello World',
  markCount: 2,
};

使用参数

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

onPerformClick4() {
  const params = {
    message: this.$config.message,
    markCount: this.$config.markCount,
  };
  return this.$api.post('kitchen-sink/guide/echo4', params).then(data => {
    this.message4 = data;
  });
},

后端逻辑

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

async echo4() {
  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.{scene}.js

export default{
  modules: {
    'test-party': {
      message: 'Hello World!',
      markCount: 3,
    },
  },
};

国际化

定义语言资源

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

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

export default {
  'Hello World': '世界，您好',
};

使用语言资源

CabloyJS通过方法$text根据客户端的locale配置动态使用相应的语言资源

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

onPerformClick5() {
  const params = {
    message: this.$text('Hello World'),
    markCount: this.$config.markCount,
  };
  return this.$api.post('kitchen-sink/guide/echo4', params).then(data => {
    this.message4 = data;
  });
},

覆盖语言资源

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

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

export default {
  'Hello World': '您好，世界',
};

更多的语言资源

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

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

export default {
  Guide: '指南',
  Click: '点击',
};

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

<template>
  <eb-page>
    <eb-navbar :title="$text('Guide')" eb-back-link="Back"></eb-navbar>
      ...
      <eb-button :onPerform="onPerformClick">{{$text('Click')}}</eb-button>
      ...
  </eb-page>
</template>