两行 JavaScript 代码轻松实现云函数 Todo 重构

前端

2024-01-06 13:30:22

在上一篇文章中，我们已经详细讲解了各种云函数配置的含义，想必你已经跃跃欲试了。这篇文章，我们就按照之前的思路，来实现 Todo 应用。

前置知识

如果你还没了解云函数的各种配置，可以先看看上篇文章：《Serverless 云开发高阶应用》
本文以 Vue.js 作为示例，如果你还没有使用过 Vue.js，可以先学习一下基础知识。

实现步骤

1. 创建云函数

在控制台中新建一个云函数，配置如下：

名称： todo-rebuild
运行环境： Node.js 12
触发器： HTTP

云函数代码如下：

const cloud = require('tencentcloud-sdk-nodejs')

const serverless = require('serverless-http')

const tcb = cloud.tcb

//tcb.init({
//  secretId: '',
//  secretKey: '',
//  // 这里填写你的云函数所在地域，如广州则为 ap-guangzhou
//  // 参见地域列表：https://cloud.tencent.com/document/product/583/18684
//  envName: 'YOUR_ENV_NAME',
//})
const app = express()

app.get('/list', async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')
  res.setHeader('Access-Control-Allow-Credentials', true)

  const { openId } = req.query

  const result = await tcb.invokeFunction({
    name: 'tcb-demo-list',
    data: { openId },
  })
  res.json(result.data)
})

app.post('/add', async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')
  res.setHeader('Access-Control-Allow-Credentials', true)

  const { openId, content } = req.body

  const result = await tcb.invokeFunction({
    name: 'tcb-demo-add',
    data: { openId, content },
  })
  res.json(result.data)
})

app.post('/update', async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')
  res.setHeader('Access-Control-Allow-Credentials', true)

  const { openId, _id, content, isDone } = req.body

  const result = await tcb.invokeFunction({
    name: 'tcb-demo-update',
    data: { openId, _id, content, isDone },
  })
  res.json(result.data)
})

app.post('/delete', async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')
  res.setHeader('Access-Control-Allow-Credentials', true)

  const { openId, _id } = req.body

  const result = await tcb.invokeFunction({
    name: 'tcb-demo-delete',
    data: { openId, _id },
  })
  res.json(result.data)
})

module.exports.handler = serverless(app)

2. 部署云函数

点击「部署」按钮，将云函数代码部署到云端。

3. 创建数据库

在控制台中新建一个云数据库，配置如下：

名称： todo-rebuild
地域： 与云函数相同的地域
套餐类型： 免费套餐
存储空间： 1 GB

4. 创建集合

在云数据库控制台中，选择刚才创建的数据库，然后点击「集合」标签，新建一个集合，配置如下：

名称： todo
字段：

{
  "content": "string",
  "isDone": "boolean",
  "openId": "string",
  "_id": "string"
}

5. 创建客户端

创建一个新的 Vue.js 项目，然后在 main.js 中添加以下代码：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

在 App.vue 中添加以下代码：

<template>
  <div id="app">
    <div>
      <input type="text" v-model="content">
      <button @click="addTodo">添加</button>
    </div>
    <ul>
      <li v-for="todo in todos" :key="todo._id">
        <input type="checkbox" v-model="todo.isDone">
        <span>{{ todo.content }}</span>
        <button @click="updateTodo(todo)">修改</button>
        <button @click="deleteTodo(todo)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      content: '',
      todos: [],
    }
  },
  mounted() {
    this.getTodos()
  },
  methods: {
    async getTodos() {
      const res = await axios.get('/list')
      this.todos = res.data.data
    },
    async addTodo() {
      await axios.post('/add', {
        content: this.content,
        openId: 'YOUR_OPEN_ID',
      })
      this.getTodos()
    },
    async updateTodo(todo) {
      await axios.post('/update', {
        ...todo,
        openId: 'YOUR_OPEN_ID',
      })
      this.getTodos()
    },
    async deleteTodo(todo) {
      await axios.post('/delete', {
        _id: todo._id,
        openId: 'YOUR_OPEN_ID',
      })
      this.getTodos()
    },
  },
}
</script>