为什么不是直接联调开发呢？因为后端服务是云函数，但是到目前为止，所有代码都是在本地编写，前端页面接口请求链接还不存在。所以需要先将云函数部署到云端，才能进行前后端调试。这个也是本人目前遇到的痛点，因为每次修改后端服务后，都需要重新部署，然后进行前端开发调试。如果你有更好的建议，欢迎评论指教~
部署时，只需要运行 serverless 命令就行，当然如果你需要查看部署中的 DEBUG 信息，还需要加上 --debug 参数，如下：
$ serverless # or $ serverless --debug然后终端会 balabalabala~, 输出一大堆 DEBUG 信息，最后只需要看到绿色的 done 就行了：
这样一个基于 Serverless Component 的全栈应用就开发好了。赶紧点击你部署好的链接体验一下吧~
在线 Demo
数据库连接既然是全栈，怎么少得了数据库的读写呢？接下来介绍如何添加数据库的读写操作。
准备想要操作数据库，必须先拥有一台数据库实例，腾讯云 MySQL 云数据库 现在也很便宜，可以购买一个最基本按量计费 1 核 1G 内存 的 1 小时收费不到 4 毛钱，是不是非常划算。购买好之后初始化配置，然后新增一个 serverless 数据库，同时新增一张 users 表：
CREATE TABLE if not exists `test` ( `name` varchar (32) NOT NULL ,`email` varchar (64) NOT NULL ,`site` varchar (128) NOT NULL ) ENGINE = innodb DEFAULT CHARACTER SET = "utf8mb4" COLLATE = "utf8mb4_general_ci" 前端修改首先修改前端入口文件 frontend/src/index.js 新增相关函数操作：
require('../env') const Vue = require('vue') const axios = require('axios') module.exports = new Vue({ el: '#root', data: { // ... form: { name: '', email: '', site: '', }, userList: [], }, methods: { // ... // 获取用户列表 async getUsers() { const res = await axios.get(window.env.apiUrl + 'users') this.userList = (res.data && res.data.data) || [] }, // 新增一个用户 async addUser() { const data = this.form const res = await axios.post(window.env.apiUrl + 'users', data) console.log(res) if (res.data) { this.getUsers() } }, }, mounted() { // 视图挂在后，获取用户列表 this.getUsers() }, })当然你还需要修改视图模板文件 frontend/index.html，在页面模板中新增用户列表和用户表单：
<!-- user form --> <section action="#"> <div> <label for="name"> Name: </label> <input v-model="form.name" type="text" /><br /> </div> <div> <label for="email"> Email: </label> <input v-model="form.email" type="email" /><br /> </div> <div> <label for="site"> Site: </label> <input v-model="form.site" type="text" /><br /> </div> <button @click="addUser">Submit</button> </section> <!-- user list --> <section> <ul v-if="userList.length > 0"> <li v-for="item in userList" :key="item.id"> <p> <b>Name: {{ item.name }}</b> <b>Email: {{ item.email }}</b> <b>Site: {{ item.site }}</b> </p> </li> </ul> <span v-else>No Data</span> </section>注意：如果还不熟悉 Vue.js 语法，请移至 官方文档，当然如果你想快速上手 Vue.js 开发，也可以阅读这份 Vue 从入门到精通 教程。
后端修改这里使用 .env 来进行数据库连接参数配置，在 api 目录下新增 .env 文件，将之前的数据库配置填入文件中，参考 api/.env.example 文件。然后添加并安装 dotenv 依赖，同时添加 mysql2 模块进行数据库操作，body-parser 模块进行 POST 请求时的 body 解析。
之后新增后端 api，进行数据库读写，修改后的 api/app.js 代码如下：
'use strict' require('dotenv').config() const express = require('express') const cors = require('cors') const mysql = require('mysql2') const bodyParser = require('body-parser') // init mysql connection function initMysqlPool() { const { DB_HOST, DB_PORT, DB_DATABASE, DB_USER, DB_PASSWORD } = process.env const promisePool = mysql .createPool({ host: DB_HOST, user: DB_USER, port: DB_PORT, password: DB_PASSWORD, database: DB_DATABASE, connectionLimit: 1, }) .promise() return promisePool } const app = express() app.use(bodyParser.json()) app.use(cors()) if (!app.promisePool) { app.promisePool = initMysqlPool() } app.get('http://www.likecs.com/', (req, res) => { res.send(JSON.stringify({ message: `Server time: ${new Date().toString()}` })) }) // get user list app.get('/users', async (req, res) => { const [data] = await app.promisePool.query('select * from users') res.send( JSON.stringify({ data: data, }) ) }) // add new user app.post('/users', async (req, res) => { let result = '' try { const { name, email, site } = req.body const [res] = await app.promisePool.query('INSERT into users SET ?', { name: name, email: email, site: site, }) result = { data: res && res.insertId, message: 'Insert Success', } } catch (e) { result = { data: e, message: 'Insert Fail', } } res.send(JSON.stringify(result)) }) module.exports = app 配置修改