前后端开发基本流程

2018-11-20 07:31:00

在模块test-todo中,我们通过一个简单的例子演示前后端开发的基本流程:

  1. 实现一个后端API,返回’hello world’
  2. 创建一个前端页面,点击按钮,访问后端API,并将返回的’hello world’显示在一个文本框中

后端代码

添加API路由

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

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

添加控制器方法

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

前端代码

添加页面路由

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

添加页面组件

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前端基于VueJS+Framework7,并根据快速开发的需要,对Framework7的部分组件进行了定制

所有页面组件必须有一个根节点eb-page。在这里,我们添加了一个按钮和一个文本框。响应按钮事件,访问后端API,将返回的数据显示在文本框中

效果

打开链接http://localhost:9092/#!/test/todo/test/echo,可以查看前后端联动的效果

由于没有添加菜单,所以此链接不能在首页显示,并显示一个导航链接。在后面的章节,我们会演示如何添加一个菜单,并给菜单赋予相应的访问权限



评论: