In the module test-party, we demonstrate the basic process of frontend and backend development through a simple example:

  1. Implement a backend API and return Hello World
  2. Create a frontend page, click the button, access the backend API, and display the returned Hello World

Backend

1. Append API Route

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

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

2. Append Controller Action

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

Frontend

1. Append Page Route

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. Append Page Component

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 frontend is based on VueJS + Framework7, and according to the need of rapid development, some components of Framework7 are customized

All page components must have a root node eb-page. Here, we add a button. Response to button click event, access the backend API, and display the returned message

Effect

Open link http://localhost:9092/#!/test/party/kitchen-sink/guide, you can see the effect of frontend and backend communication