基于React+Koa实现一个h5编辑器

原創

2020-11-02 17:18

{ logoText }

\n})\n复制代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的Header组件的props属性完全是由我们之前设计的json结构来定义的，在用户编辑的过程中将收据收集并传给Header组件。最后一步是将这些组件动态传给"},{"type":"text","marks":[{"type":"strong"}],"text":"dynamic"},{"type":"text","text":"组件，这块在上文也介绍过了，大家可以根据自己的实现来做动态化渲染。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"实现预览功能"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"预览功能这块比较简单, 我们只需要将用户生成的json数据丢进H5渲染器中即可, 这里我们需要做一个渲染页面单独用来预览组件. 先来看看几个预览效果:"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cc/cc2a3120fa3e9f91b8e4232ddba0b634.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/56/56dcc4129cf232980c2828be4ac04fbe.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前面的渲染器原理已经介绍了, 这里就不一一介绍了,感兴趣的可以交流讨论."}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"实现在线下载功能"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在线下载这块我们需要用到一个开源库: "},{"type":"text","marks":[{"type":"strong"}],"text":"file-saver"},{"type":"text","text":", 专门解决前端下载文件困难的窘境. 具体使用举例:"}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"var FileSaver = require('file-saver');\nvar blob = new Blob([\"Hello, world!\"], {type: \"text/plain;charset=utf-8\"});\nFileSaver.saveAs(blob, \"hello world.txt\");\n复制代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上代码可以实现将传入的数据下载为txt文件, 如果是Blob, 是不是还能在线下载图片, html呢? 答案是肯定的, 所以我们的下载任务采用该方案来实现."}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"后端部分实现"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"后端部分由于涉及的知识点比较多, 不是本文考虑的重点, 所以这里大致提几个点, 大家可以用完全不同的技术来实现后台服务, 比如说"},{"type":"text","marks":[{"type":"strong"}],"text":"PHP"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"strong"}],"text":"Java"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"strong"}],"text":"Python"},{"type":"text","text":"或者"},{"type":"text","marks":[{"type":"strong"}],"text":"Egg"},{"type":"text","text":". 笔者这里采用的是"},{"type":"text","marks":[{"type":"strong"}],"text":"koa"},{"type":"text","text":". 主要实现功能如下:"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"保存模板"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"真机原理的数据源存储"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用户相关功能"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"H5图床和静态文件托管"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"具体代码可以参考笔者的另一篇全栈开发文章"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"基于nodeJS从0到1实现一个CMS全栈项目"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"模式基本一致."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"github地址："},{"type":"link","attrs":{"href":"https://github.com/MrXujiang/h5-Dooring","title":null},"content":[{"type":"text","text":"Dooring传送门"}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"后期规划"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"后期"},{"type":"text","marks":[{"type":"strong"}],"text":"Dooring"},{"type":"text","text":"项目规划如下："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"丰富组件库组件，添加可视化组件"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加配置交互功能"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"组件细分和代码优化"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加PC端搭建平台"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加表单设计平台"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加typescript支持和单元测试"}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"最新迭代功能"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"优化H5编辑器界面"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加可视化组件——进度条"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"修复win下预览样式问题，添加移动端访问出现提示页"}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"最后"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果想学习更多"},{"type":"text","marks":[{"type":"strong"}],"text":"H5游戏"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"strong"}],"text":"webpack"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"node"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"gulp"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"css3"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"javascript"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"nodeJS"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"canvas数据可视化"},{"type":"text","text":"等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}