如何在 8 小时内开发上线一个在线表单系统

原创 2017年12月11日 00:00:00

欢迎使用 moform,一个无需注册、基于 Serverless 的开源表单系统。

在使用开发了一个精简版的 Serverless 日志存储系统 molog 之后。我便想开发一个更实用的 Serverless 应用,在一个微信群里,看到了使用金数据已经填满(每月 50 条的限额)的问题,便想表单这是一个非常合适的场景。毕竟表单作为一个数据分析的工具,本身也是事件驱动的。

任何能够用 Serverless 架构实现的应用系统,最终都必将用 Serverless 实现。

Showcase

基于 Serverless 架构的 moform 的最大特色是自动扩展无需注册即可使用。从理论上来说,你不用担心系统的并发问题,FaaS 服务本身就是高可用、自动扩展。

打开 https://www.pho.im/,我们就可以直接创建表单了:

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1moform 创建示例

如上,拖拉一些相应的字段,就可以生成表单了。提交完,会生成一个相应的表单 URL,如下:

0?wx_fmt=pngmoform 表单地址

如在这里,我们的地址是:https://www.pho.im/f/HyvMI79ZG。

接着,打开对应的结果页:https://www.pho.im/f/HyvMI79ZG/results。

0?wx_fmt=pngmoform 表单结果


除了查看相应的结果,我们还可以搜索内容、下载 CSV、Excel 格式的数据,也可以直接打印数据。

忘说了,无需注册的原因是——到目前为止,比较成熟的在线授权服务只有 Auth0,然而它只支持微博和人人。如果你想接入这个授权,可以看我之前写的文章 Serverless 架构应用开发:基于 Auth0 授权的 Serverless 应用登录

业务

好了,接下来,让我们简单的过一下 moform 的基本业务逻辑:

0?wx_fmt=png

我相信有了这张表就足够了。

技术及架构

所用到的前端技术栈有:

  • formBuilder,用于创建表单和生成表单

  • Bootstrap,你懂的 UI 框架

  • jQuery,对,我还在用 jQuery

  • dataTables,用于展示数据,打印、导出数据(csv,excel)

每次在大限将至的时候,我都会选择 jQuery——它不需要复杂的构建,三秒钟就能开箱了,引入网页即可使用。不过最主要的原因是,formBuilder 和 Bootstrap 都依赖于 jQuery。

所使用的 AWS 服务有

  • AWS CloudFront,用于作为静态资源的 CDN

  • AWS S3,用于存储静态资源文件

  • AWS API Gateway,顾名思义 API 网关

  • AWS Lambda,无服务器的函数计算服务

  • AWS Route 53,用于为服务分配域名

底层依然是 Serverless Framework,同时还用到了几个相关的插件:

  • serverless-domain-manager,用于管理、分配域名

  • serverless-finch,用于部署静态资源文件到 S3

  • serverless-plugin-simulate,用于调试,在本地模拟 Serverless 环境。

代码实现

理清了这些关系之后,剩下的就简单多了。对应的 serverless.yml 中的函数配置如下所示:

  1. functions:

  2.  index:

  3.    handler: backend/index.handler

  4.    events:

  5.      - http:

  6.          path: ''

  7.          method: get

  8.  formCreate:

  9.    handler: backend/form/create.handler

  10.    events:

  11.      - http:

  12.          path: f/

  13.          method: post

  14.  formGet:

  15.    handler: backend/form/get.handler

  16.    events:

  17.      - http:

  18.          path: f/{formId}

  19.          method: get

  20.  formSubmit:

  21.    handler: backend/form/submit.handler

  22.    events:

  23.      - http:

  24.          path: f/{formId}

  25.          method: post

  26.  formResults:

  27.    handler: backend/form/results.handler

  28.    events:

  29.      - http:

  30.          path: f/{formId}/results

  31.          method: get

为此,我们需要至少两个 DynamoDB 数据库表资源:

  1. provider:

  2.  name: aws

  3.  runtime: nodejs6.10

  4.  timeout: 5

  5.    FORM_DYNAMODB_TABLE: ${self:service}-form-${opt:stage, self:provider.stage}

  6.    FORM_DATA_DYNAMODB_TABLE: ${self:service}-form-data-${opt:stage, self:provider.stage}

  7.    SLS_STAGE: ${self:custom.stage}

  8.  iamRoleStatements:

  9.    - Action:

  10.        - dynamodb:GetItem

  11.        - dynamodb:PutItem

  12.        - dynamodb:Query

  13.        - dynamodb:Scan

  14.      Resource:

  15.        - "arn:aws:dynamodb:${opt:region, self:provider.region}:*:table/${self:provider.environment.FORM_DYNAMODB_TABLE}"

  16.        - "arn:aws:dynamodb:${opt:region, self:provider.region}:*:table/${self:provider.environment.FORM_DATA_DYNAMODB_TABLE}"

  17.      Effect: Allow

未来,我们还需要用户的登录信息。

总体的代码与我们之前看到的 molog 的代码差不多。考虑到代码比较简单,我们就看一个获取表单的例子就好了:

  1. ...

  2. module.exports.handler = (event, context, callback) => {

  3.  const params = {

  4.    TableName: process.env.FORM_DYNAMODB_TABLE,

  5.    Key: {

  6.      id: event.pathParameters.formId,

  7.    },

  8.  };

  9.  dynamoDb.get(params, (error, result) => {

  10.    // handle potential errors

  11.    if (error) {

  12.        ...

  13.    }

  14.    // create a response

  15.    const response = {

  16.      statusCode: 200,

  17.      headers: {'Content-Type': 'text/html'},

  18.      body: generateHtml(result.Item)

  19.    };

  20.    callback(null, response);

  21.  });

  22. };

我们从 URL 中获得表单的 ID,然后返回对应的 HTML,就这么简单。获取所有的数据,实际上也和这个差不多。

结论

任何能够用 Serverless 架构实现的应用系统,最终都必将用 Serverless 实现。

欢迎试用并提出建议,地址是:https://www.pho.im/ 。移动端界面如下所示:

0?wx_fmt=pngmoform-mobile.png


点击阅读原文试用。

0?wx_fmt=jpeg



点击阅读原文试玩

版权声明:本文为博主原创文章,未经博主允许不得转载。

基于Web在线考试系统的设计与实现

这是一个课程设计的文档,源码及文档数据库我都修改过了,貌似这里复制过来的时候图片不能贴出,下载地址稍后贴出   数据库原理课程设计说明书              基于Web在线考试系统...
  • sdksdk0
  • sdksdk0
  • 2015年12月16日 17:39
  • 17480

highcharts如何在一个图表中使多条曲线在不同刻度下显示

问题:不同的曲线显示在同一种Y轴刻度下,因数据范围的差别,显示的曲线对数据的刻画明显程度便差别很大,一些数据范围小的曲线几乎成为一条直线,不能很清晰地反映出数据的变化趋势。如图所示:查了很多资料,也看...
  • Zhangjunjie789
  • Zhangjunjie789
  • 2015年07月30日 16:16
  • 3228

分页管理系统计算题 (在某个请求分页管理系统中,假设某进程的页表内容如下表所示)

在某个请求分页管理系统中,假设某进程的页表内容如下表所示。 页号 页框(Page Frame)号 有效位(存在位) 0 ...
  • qq_26816591
  • qq_26816591
  • 2016年07月14日 16:30
  • 5606

nero8激活码(使用此激活码激活后请于24小时内删除,购买正版)

  • 2012年12月25日 21:57
  • 74B
  • 下载

一个小时内学习 SQLite 数据库

  • 2014年10月30日 12:54
  • 40KB
  • 下载

一个小时内学习SQLite数据库

1. 介绍SQLite 是一个开源的嵌入式关系数据库,实现自包容、零配置、支持事务的SQL数据库引擎。 其特点是高度便携、使用方便、结构紧凑、高效、可靠。 与其他数据库管理系统不同,SQLite 的安...
  • neo_yin
  • neo_yin
  • 2016年01月04日 15:32
  • 214

一个小时内学习 SQLite 数据库

点击打开链接 1. 介绍 SQLite 是一个开源的嵌入式关系数据库,实现自包容、零配置、支持事务的SQL数据库引擎。 其特点是高度便携、使用方便、结构紧凑、高效、可靠。 与其他数据库管理系统不...
  • oShaPoLang
  • oShaPoLang
  • 2013年12月31日 18:21
  • 695

一个小时内学习SQLite数据库

1. 介绍 SQLite 是一个开源的嵌入式关系数据库,实现自包容、零配置、支持事务的SQL数据库引擎。 其特点是高度便携、使用方便、结构紧凑、高效、可靠。 与其他数据库管理系统不同,SQLit...
  • blueangle17
  • blueangle17
  • 2014年03月04日 11:48
  • 551

一个小时内学习 SQLite 数据库

SQLite 是一个开源的嵌入式关系数据库,实现自包容、零配置、支持事务的SQL数据库引擎。 其特点是高度便携、使用方便、结构紧凑、高效、可靠。 与其他数据库管理系统不同,SQLite 的安装和运行非...
  • blueangle17
  • blueangle17
  • 2014年02月11日 14:21
  • 468

一个小时内学习SQLite数据库

一个小时内学习SQLite数据库 SQLite 是一个开源的嵌入式关系数据库,实现自包容、零配置、支持事务的SQL数据库引擎。 其特点是高度便携、使用方便、结构紧凑、高效、可靠。 与其他...
  • wjeson
  • wjeson
  • 2012年08月27日 10:09
  • 400
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何在 8 小时内开发上线一个在线表单系统
举报原因:
原因补充:

(最多只允许输入30个字)