问卷还可以这样开发，效率提升 150%[通俗易懂]

工作了一天，终于到了最 “鸡冻” 的时刻，等待下班铃声的响起…

不过没过多久，就听到了那既熟悉而又抗拒的消息提示声。临近下班前的消息，感觉就不太妙。不过还是硬着头皮打开了公司运营妹纸发的消息 —— “宝哥，帮帮忙，明天下午我们有一个新版的 PC 知识库的推广活动，想在我们的知识库模块中添加一个问卷入口，收集一下用户的使用体验”。

看完以上的消息之后，当时我的心情是这样的👇

本想装作没看见，奈何消息已变成已读。所以我只能强装镇定，给妹纸回了消息，让她把问卷要收集的信息发给我，过了一会儿妹纸把信息发了过来。看完后，发现表单并不会复杂，松了一口气。

之后，立马让妹纸去协调一下服务端的资源。没想到妹纸却回我说：“宝哥，这个功能不会太复杂，以你的技术能力，应该一个人就可以搞定吧”。既然妹纸都这样说了，我只能委屈的说没问题。接着，跟妹纸大致沟通了需求，确认说表单的数据，可以不用提交到我们的系统。

既然需求已经明确了，剩下的就是如何快速开发这个功能了。思考了一会儿，一个便捷的开发方案就涌现在脑海中。刚好之前有了解过在线的表单设计器和朋友公司的 Bass 产品 —— MemFire Cloud 。我就想利用在线表单设计器来快速生成表单代码，然后利用 MemFire Cloud 提供的服务来存储数据。大致方案已经有了，为了能早点下班，我立马行动起来。

一、拖拽生成表单

我司新版的 PC 知识库是基于 Vue 2 开发的，使用了 Element UI 组件库。经过一番搜索，我找到了 form-generator 这个开源项目。该项目是一款基于 Element UI 表单设计及代码生成器，目前 Github 上的 Star 数是 5.2K，是一个挺不错的开源项目。

不得不说以拖拽的方式设计表单，使用起来还是很 “香” 的。一顿操作后，表单就生成了，具体效果如下所示：

需要注意的是，该在线工具还允许我们为表单的每个字段配置正则校验。在完成表单设计之后，我通过点击 导出vue文件 的按钮，就下载到对应的 Vue 文件。此时，问卷表单的功能已经完成一大半了，就差对接数据提交的功能。所以接下来我们将利用 MemFire Cloud 提供的能力，来快速生成 API。

二、快速生成 API

MemFire Cloud 为应用开发者提供高可用、自动弹性伸缩的后端云服务。前端通过统一的 SDK 和 API 连接后端服务（云数据库、云存储、云函数、用户管理、统计分析等），加速移动/Web/IoT/游戏等应用的开发，并降低运维成本。

（图片来源：docs.memfiredb.com/）

简单介绍了 MemFire Cloud 的功能之后，下面我们来介绍如何使用 MemFire Cloud 云平台快速生成 API。

2.1 创建数据库账号

首先要使用 MemFire Cloud 云平台服务提供的服务，我们需要先注册一个账号。在账号注册成功后，我们就能登录 MemFire Cloud 云平台的管理后台。在创建表单应用前，我们需要先创建一个数据库账号，具体的操作方式如下图所示：

2.2 创建表单应用

在创建完账号之后，我们就可以创建表单应用了。首先点击左侧 我的应用 菜单，然后点击 创建应用 按钮，在弹出的对话框中输入应用名称并选择前面新增的数据库账号，最后点击 创建按钮 就会开始创建表单应用。

2.3 新建数据表

在成功创建完表单应用之后，我们就可以新建问卷表了，用于保存表单的数据。首先点击刚新建的表单应用，进入表单应用编辑页面，然后点击左侧 数据表 菜单，接着继续点击 新建数据表 按钮，具体步骤如下图所示：

在点击 新建数据表 按钮后，在当前页面右侧会以 Drawer（抽屉）的形式，显示新建数据表的表单。接着我们根据已生成 Vue 表单文件中的字段来创建 feedbacks 数据表的字段，具体的过程如以下动图所示：

以上动图只演示了添加 name 字段的过程，通过 添加字段 按钮，我们陆续添加了 mobile、post、score 和 suggestion 等字段。最后每个字段的详细配置信息如下图所示：

提示：上图中的 id 字段是默认生成的，它的值会不断自增。

经过一番配置之后，我们问卷的 API 就已经创建好了，整体操作起来还是挺方便的。下面我们只要对接一下客户端 SDK 就可以提交表单数据了。

三、集成 JS 客户端 SDK

在集成 JS 客户端 SDK 的时候，可以通过 npm 或 CDN 的方式来安装 SDK。这里我们使用 npm 的方式：

npm install @supabase/supabase-js

在成功安装了 @supabase/supabase-js 模块之后，我们需要在表单页面中引入该模块，然后使用表单项目总览页面中的信息来创建 JS 客户端对象，需获取的 JS 客户端对象初始化信息如下图所示：

在获取初始化信息之后，我们就可以创建 JS 客户端对象：

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  "https://c5s0hnq5g6heb3j9g3gg.baseapi.memfiredb.com", // baseURL
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW" // 公开的密钥（仅截取部分内容）
);

有了 supabase 客户端对象之后，我们就可以利用该对象提供的方法来提交表单数据了，具体的使用方式如下：

// src/components/FeedbackForm.vue
export default {
  data() {
    return {
      // 省略其他属性
      submitting: false
    };
  },
  methods: {
    submitForm() {
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid || this.submitting) return;
        this.submitting = true; // 避免快速点击，重复提交数据
        const { error } = await supabase
          .from("feedbacks") // 数据表的表名
          .insert(this.formData);  
        const msg = error == null ? "感谢您的反馈!" : "服务器开小差，请稍后再试";
        alert(msg);
        if(!error) this.$refs["elForm"].resetFields(); // 复位表单
        this.submitting = false;
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};

在以上代码中，supabase.from 方法用于指定数据表的表名，而 insert 方法用来插入新增的数据。需要注意的是，insert 方法的参数也可以是数组，即可以批量插入多条数据。在插入数据时，也可以配置 { upsert: true } 选项来执行 upsert 操作。

其实除了 insert 方法之外，该 SDK 也为我们提供了 select（获取数据）、update（修改数据）、delete（删除数据） 等方法。同时，也提供了强大的修改器（limit、order、range 等）和过滤器（filter、or、not、eq 等），感兴趣的小伙伴可以阅读 MemFire Cloud JS 客户端文档。

在完成以上三个步骤之后，我们调查问卷功能就已经开发完成了。成功收集的问卷数据，我们可以在 MemFire Cloud 云平台管理后台中进行查看：

四、总结

利用 form-generator 表单设计器和 MemFire Cloud 提供的简单易用、功能强大的数据存储功能，我快速完成了公司运营妹纸的调查问卷功能，成功逃过加班的 “厄运”。其实后期还可以考虑对这两个工具做进一步的整合，即可以根据表单设计器生成的字段信息，自动创建对应的表结构，同时自动生成客户端 SDK 的调用代码。

在日常生活中，利用 MemFire Cloud 提供的数据库即服务的功能，我们还可以快速开发一些小的工具。比如网页书签收集器，感兴趣的小伙伴可以参考 d2-daily-chrome-extension 这个项目，只需把 axios 替换成 @supabase/supabase-js 客户端，你就可以快速开发一个网页书签收集器的 Chrome 插件。如果你还有其它更好玩的想法，欢迎给我留言哟。

五、参考资源

• MemFire Cloud 官方文档
• Github — form-generator
• Github — d2-daily-chrome-extension