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

Append API Route

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

Append Controller Action

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

Frontend

Append Page Route

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') },
];

Append Page Component

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

<template>
  <eb-page>
    <eb-navbar :title="$text('Guide')" 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 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