借助开山斧在线云表单SDK，搭建一个简单清爽的博客系统

背景

表单的应用场景非常多，业务有提交数据的需求，就需要用到表单。但在表单开发中，每次都是差不多的逻辑，每次都是差不多的组件，每次都是差不多的HTML、CSS、JS，一旦遇到有成百上千的表单数据需要提交时，这个过程相当繁琐，费时费力，还容易出错。

这篇文章就教大家使用一套第三方的解决方案--开山斧在线云表单SDK，来完成一套简单的博客系统，把表单的复杂操作交由第三方来做。

温馨提示：本篇文章主要面向有一定产品和开发经验的互联网人，非专业人士阅读会比较吃力。

简单介绍

开山斧在线云表单是一款在线设计表单、管理表单、提供表单对接三方系统的表单工具平台。在平台上，可以借助开山斧表单设计器快速完成表单的设计，然后借助开山斧提供的SDK将设计好的表单无缝对接到自己的系统。

关于开山斧在线云表单的详细介绍，可以参考他的网站主页介绍文章《关于开山斧在线云表单工具的介绍》，本篇文章不过多讲解。

关于开山斧云表单SDK的介绍，可以参考SDK的NPM首页《开山斧在线云表单-客户端SDK》，本篇文章也不过多讲解。

本篇文章着重讲解，借助开山斧云表单工具平台搭建一套博客发布表单，并借助平台的三方接入能力，把表单接入到自己的系统。

第一步：设计博客字段

提示：这部分内容，每个人跟着步骤做都是可以操作的

我们进入到开山斧的后台管理，在信息采集菜单里找到我的开发管理界面

开山斧表单开发管理

如上图，我已经开发过好几个在线表单了，并且都已完成了接入。所谓没有实践就没有这篇经验，我们接着往下看。

我们点击开发表单右边的新建按钮，进入到开山斧设计器的开发模式。当然，你也可以直接点击链接进入：http://datagetter.cn/platform/designer/mode/dev

进入之后是这样的

表单设计器

接下来，我们就需要考虑设计一下，我们博客的发布表单需要哪些字段或者内容了。

一篇文章有标题、简介、正文、关键字、封面图、发布时间、发布人等信息，当然最重要的是每篇博客都需要一个唯一ID。

下面是以我自己的需求设计的博客字段，字段只包含了标题（单行文本组件）、简介（多行文本组件）、正文（Markdown组件）、关键字（单行文本组件），只需要点击或者拖拉拽右边的组件列表就可以生成。

博客字段设计

上图中，需要注意的一个字段就是博客文章的ID了，我们需要把它设置成隐藏字段。因为在我们发布博客的时候并不需要编辑这个博客ID，这个字段是交给后端程序员小哥用的。

设置隐藏字段的方法也比较简单，字段属性中有个是否隐藏的选项，直接打开就好

博客ID隐藏

字段搞定后，点击顶部的保存按钮即可。其中的字段还有很多详细属性，各位小伙伴就自己去挖掘了吧。

第二步：下载SDK编写前端接入代码

提示：这部分内容，需要有一定前端代码基础的人才看得懂哦~

通过模块工具npm、bower下载安装SDK

bower install @datagetter.cn/form-render-client

或者

npm install @datagetter.cn/form-render-client

接下来就需要编写一个简单的HTML界面来接入了，下面是我编写的一个示例

提示：看不懂的小伙伴直接跳过代码，看下面的逻辑讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单客户端SDK示例</title>
</head>
<body>
    <iframe id="iframe" src="" frameborder="0" height="500" width="800"></iframe>
</body>
</html>

<script src="https://unpkg.zhimg.com/axios@0.21.1"></script>
<script src="https://unpkg.zhimg.com/@datagetter.cn/form-render-client@1.1.3/build/sdk.min.js"></script>

<script>
    // 接入界面
    var iframe = document.getElementById('iframe');
    // 开发链接 在开山斧后台获取
    var devAddress = "http://datagetter.cn/platform/designer/dev/6109eba7b91ad47555378d1d";
    // 模拟一个博客ID 从本地存储获取
    var blogID = localStorage.getItem('blogID');
    // 获取文章详情的API 需要后台小哥提供
    var blogInfoAPI = 'http://xxxx/api/blog/info'+blogID
    
    // 初始化iframe和SDK
    var frc = new FormRenderClient();
    frc.connect(iframe,devAddress).then(onReady);

    // 监听提交成功后直接弹窗提示
    frc.onSubmitDone = function(){
        alert('提交成功！');
    }

    // SDK初始完成的回调
    function onReady(){
        // 博客ID不存在时，无需操作
        if(!blogID) return;

        // 博客ID存在时，需获取博客详情进行回显
        axios.get(blogInfoAPI).then(function(data){
            frc.sendAction('setFormVals',{formVals:{id:blogID,data:data}})
        })
    }
</script>

上面代码，我相信作为前端coder，应该非常容易理解，代码的大致逻辑如下：