In the module test-todo, 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 in a text box


Append API Route


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

Append Controller Action


module.exports = app => {

  class TestController extends app.Controller {

    async echo() {
      const message = 'hello world';

  return TestController;


Append Page Route


function load(name) {
  return require(`./pages/${name}.vue`).default;

export default [
  { path: 'test/echo', component: load('test/echo') },

Append Page Component


    <eb-navbar title="Test" eb-back-link="Back"></eb-navbar>
      <eb-button :onPerform="onPerformInvoke">Invoke</eb-button>
      <eb-input type="text" v-model="message"></eb-input>
export default {
  data() {
    return {
      message: '',
  methods: {
    onPerformInvoke() {
      this.$'test/echo').then(data => {
        this.message = data;

<style scoped>

Cabloy 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 and a text box. Response to button events, access the backend API, and display the returned data in the text box


Open link http://localhost:9092/#!/test/todo/test/echo, you can see the effect of frontend and backend communication

Since no menu has been added, this link cannot be displayed on the home page. In later chapters, we will show how to add a menu and grant the access right