在模块test-party中，我们通过一个简单的例子演示前后端开发的基本流程：

  1. 实现一个后端API，返回’Hello World’
  2. 创建一个前端页面，点击按钮，访问后端API，并将返回的’Hello World’显示在页面中

后端代码

1. 添加API路由

src/suite-vendor/test-party/modules/test-party/backend/src/routes.js

  1. 1// test
  2. 2{ method: 'post', path: 'kitchen-sink/guide/echo', controller: 'testKitchensinkGuide' },

2. 添加控制器

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

  1. 1module.exports = app => {
  2. 2
  3. 3  class GuideController extends app.Controller {
  4. 4
  5. 5    async echo() {
  6. 6      const message = 'Hello World';
  7. 7      this.ctx.success(message);
  8. 8    }
  9. 9
  10. 10  }
  11. 11  return GuideController;
  12. 12};

src/suite-vendor/test-party/modules/test-party/backend/src/controllers.js

  1. 1const testKitchensinkGuide = require('./controller/kitchen-sink/guide.js');
  2. 2
  3. 3module.exports = app => {
  4. 4  const controllers = {
  5. 5    testKitchensinkGuide,
  6. 6  };
  7. 7  return controllers;
  8. 8};

前端代码

1. 添加页面路由

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

  1. 1function loadKitchenSink(name) {
  2. 2  return require(`./kitchen-sink/pages/${name}.vue`).default;
  3. 3}
  4. 4
  5. 5export default [
  6. 6  { path: 'kitchen-sink/guide', component: loadKitchenSink('guide') },
  7. 7];

2. 添加页面组件

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    <f7-card>
  5. 5      <f7-card-content>
  6. 6        <div class="alert-info">{{message}}</div>
  7. 7        <p>
  8. 8          <eb-button :onPerform="onPerformClick">{{$text('Click')}}</eb-button>
  9. 9        </p>
  10. 10      </f7-card-content>
  11. 11    </f7-card>
  12. 12  </eb-page>
  13. 13</template>
  14. 14<script>
  15. 15export default {
  16. 16  data() {
  17. 17    return {
  18. 18      message: null,
  19. 19    };
  20. 20  },
  21. 21  methods: {
  22. 22    onPerformClick() {
  23. 23      return this.$api.post('kitchen-sink/guide/echo').then(data => {
  24. 24        this.message = data;
  25. 25      });
  26. 26    },
  27. 27  },
  28. 28};
  29. 29
  30. 30</script>
  31. 31<style scoped>
  32. 32</style>

CabloyJS前端基于VueJS+Framework7，并根据快速开发的需要，对Framework7的部分组件进行了定制

所有页面组件必须有一个根节点eb-page。在这里，我们添加了一个按钮。响应按钮点击事件，访问后端API，将返回的数据显示在页面中

效果

打开链接http://localhost:9092/#!/test/party/kitchen-sink/guide，可以查看前后端联动的效果