CabloyJS的业务模块
不仅包含后端逻辑,也包含前端页面。为了提升业务模块
的开发效率和灵活性,不仅在后端提供了参数配置
和国际化
特性,在前端也提供了相应的特性,而且也支持项目级别
的覆盖
在这里,我们实现一个虚拟的需求:
- 把
message
参数放到前端配置 - 前端再定义一个参数
markCount
,表示感叹号的个数 - 前端将这两个参数传入后端,后端进行组合,并将结果返回
- 前端显示返回的结果
参数配置
定义参数
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>
评论: