Basic process of frontend and backend development

2018-12-08 13:01:40

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

Backend

Append API Route

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

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

Append Controller Action

src/module/test-todo/backend/src/controller/test.js

module.exports = app => {

  class TestController extends app.Controller {

    async echo() {
      const message = 'hello world';
      this.ctx.success(message);
    }

  }
  return TestController;
};

Frontend

Append Page Route

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

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

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

Append Page Component

src/module/test-todo/front/src/pages/test/echo.vue

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

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

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

Effect

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



Comments: