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

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

后端代码

添加API路由

src/module/test-party/backend/src/routes.js

...
const testKitchensinkGuide = require('./controller/kitchen-sink/guide.js');
...
// test
{ method: 'post', path: 'kitchen-sink/guide/echo', controller: testKitchensinkGuide },

添加控制器方法

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

module.exports = app => {

  class GuideController extends app.Controller {

    async echo() {
      const message = 'Hello World';
      this.ctx.success(message);
    }

  }
  return GuideController;
};

前端代码

添加页面路由

src/module/test-party/front/src/routes.js

function loadKitchenSink(name) {
  return require(`./kitchen-sink/pages/${name}.vue`).default;
}

export default [
  { path: 'kitchen-sink/guide', component: loadKitchenSink('guide') },
];

添加页面组件

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

<template>
  <eb-page>
    <eb-navbar :title="$text('Hello World')" eb-back-link="Back"> </eb-navbar>
    <f7-card>
      <f7-card-content>
        <div class="alert-info">{{message}}</div>
        <p>
          <eb-button :onPerform="onPerformClick">{{$text('Click')}}</eb-button>
        </p>
      </f7-card-content>
    </f7-card>
  </eb-page>
</template>
<script>
export default {
  data() {
    return {
      message: null,
    };
  },
  methods: {
    onPerformClick() {
      return this.$api.post('kitchen-sink/guide/echo').then(data => {
        this.message = data;
      });
    },
  },
};

</script>
<style scoped>
</style>

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

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

效果

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