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


Append API Route


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

Append Controller Action


module.exports = app => {

  class GuideController extends app.Controller {

    async echo() {
      const message = 'Hello World';

  return GuideController;


Append Page Route


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

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

Append Page Component


    <eb-navbar :title="$text('Guide')" eb-back-link="Back"></eb-navbar>
        <div class="alert-info">{{message}}</div>
          <eb-button :onPerform="onPerformClick">{{$text('Click')}}</eb-button>
export default {
  data() {
    return {
      message: null,
  methods: {
    onPerformClick() {
      return this.$'kitchen-sink/guide/echo').then(data => {
        this.message = data;

<style scoped>

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


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