{ "err_no": 0, "err_msg": "success", "data": { "booklet": { "booklet_id": "6930553086918262798", "base_info": { "id": 0, "booklet_id": "6930553086918262798", "title": "从零开发H5可视化搭建项目", "price": 1990, "category_id": "6809637767543259144", "status": 1, "user_id": "3298190611978526", "verify_status": 2, "summary": "配套视频教学！由浅入深从根上理解可视化搭建这回事，紧贴业务设计符合业务需要的搭建体系。", "cover_img": "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9484a374e124a7c9bcd55ab2d5e8610~tplv-k3u1fbpfcp-watermark.image", "section_count": 19, "section_ids": "6930553086859542535|6930908881178591239|6930519748576804879|6930872180666269708|6931293403791491079|6931310561615413251|6931903833916309516|6931310524638429187|6931309406759944205|6932006578258182144|6931310524646817795|6931310146442559495|6931309783135830029|6932671493432147980|6931309942259318797|6931310017576435719|6931293403892154376|6931312051486720007|6931310879883886599|6934947639834181645", "is_finished": 1, "ctime": 1614246380, "mtime": 1655265353, "put_on_time": 1617807865, "pull_off_time": -62135596800, "finished_time": -62135596800, "recycle_bin_time": -62135596800, "verify_time": -62135596800, "submit_time": 1640782114, "top_time": -62135596800, "wechat_group_img": "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae6ef8d385504d12a4ded3ed7dbcf62e~tplv-k3u1fbpfcp-watermark.image?", "wechat_group_desc": "", "wechat_group_signal": "H5可视化", "read_time": 12474, "buy_count": 2410, "course_type": 1, "background_img": "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85b3a90baab241b88cee18c553dd2de2~tplv-k3u1fbpfcp-watermark.image?", "is_distribution": 1, "distribution_img": "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a222a5b228d6443f81ccd2691fcb0d4a~tplv-k3u1fbpfcp-zoom-1.image?", "commission": 398, "can_vip_borrow": true, "is_sign": false }, "reading_progress": { "id": 0, "booklet_id": "6930553086918262798", "user_id": "3210229681503629", "status": 1, "buy_type": 1, "reading_end": 0, "reading_progress": 0, "last_section_id": "0", "has_update": 1, "last_rtime": 1617843709, "ctime": 1617843696, "mtime": 1658224496, "valid_begin_time": 0, "valid_end_time": 0, "borrow_times": 0 }, "user_info": { "user_id": "3298190611978526", "user_name": "muwoo", "company": "某大型互医", "job_title": "前端/nodejs", "avatar_large": "https://p9-passport.byteacctimg.com/img/user-avatar/f21b9fb46eaeffecc3c6727252e5978f~300x300.image", "level": 4, "description": "一个前端", "followee_count": 23, "follower_count": 1601, "post_article_count": 29, "digg_article_count": 148, "got_digg_count": 4833, "got_view_count": 185917, "post_shortmsg_count": 18, "digg_shortmsg_count": 12, "isfollowed": false, "favorable_author": 1, "power": 5878, "study_point": 0, "university": { "university_id": "0", "name": "", "logo": "" }, "major": { "major_id": "0", "parent_id": "0", "name": "" }, "student_status": 0, "select_event_count": 0, "select_online_course_count": 0, "identity": 0, "is_select_annual": false, "select_annual_rank": 0, "annual_list_type": 0, "extraMap": {}, "is_logout": 0, "annual_info": [], "account_amount": 0, "user_growth_info": { "user_id": 3298190611978526, "jpower": 0, "jscore": 140, "jpower_level": 0, "jscore_level": 3, "jscore_title": "新星掘友", "author_achievement_list": [], "vip_level": 0, "vip_title": "" }, "is_vip": false }, "event_discount": null, "is_buy": true, "section_updated_count": 19, "is_new": false }, "introduction": { "id": 83482, "section_id": "6930553086859542535", "title": "小册介绍", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "

小册介绍

\n

在当下业务需求迭代飞快的互联网环境下，如何助力业务，为业务快速试错、迭代提供基础支持是不可规避的挑战之一。这其中最重要的一环就是“快”。有的时候为了满足业务诉求，我们不得不重复去开发一些活动页。所以你可能和我一样，非常想通过一款可以由运营自主组装页面的工具来自动生成页面，规避掉重复、无技术含量的劳动。

\n

相比业界现状，不管在阿里还是腾讯等大厂都有适配自己内部业务诉求场景的一套可视化搭建体系。实现细节虽然有着出入但是核心思想都是希望把原本由开发人肉堆代码的活，通过可视化的方式表达给运营同学使用。或者通过 lowcode 的形式减少开发者的重复劳动。因为与业务相关，所以基本上都不会开源。而现在大多数开源的可视化搭建项目，也只是实现了部分可视化搭建的能力，并不能完全结合业务场景使用。

\n

笔者希望借这本小册，一方面为没有接触过可视化搭建的同学提供一个解决问题的思路和方法。\n另一方面本小册将会从背景到架构设计再到技术实现细节来一步步介绍如何落地一个围绕业务场景的可视化搭建需求。

\n

小册说明

\n

由于可视化搭建课题本身设计到的知识面相对想多，为了帮助读者更好的理解和学习本小册，我们同步推出了免费的配套视频教程，视频更加注重细节，小册更加注重全局实现，读者可以结合视频一起学习本小册的内容，效果更棒！

\n

视频从 2021 年 11 月 9 日开始更新，预计每周更新一集。

\n

小册视频空间地址：https://space.bilibili.com/355783263/video

\n

作者介绍

\n

muwoo，前端攻城狮。之前在 51信用卡 搞过一年的可视化搭建平台鲁班，半年内发布了 1000+ 活动页。后面辗转反侧去了蚂蚁集团，接触到内部的云凤蝶项目，对自己的可视化搭建理念产生了一定的影响。现在团队内也落地了一套可视化搭建体系，也是踩过了颇多的坑。

\n

你可以在这里找到我

\n

Github: https://github.com/muwoo

\n

知乎：https://www.zhihu.com/people/monkey-wang-

\n

小册涉及源码：https://github.com/coco-h5

\n

小册视频地址：https://space.bilibili.com/355783263/video

\n

小册目录

\n\n

\"image.png\"

\n

你会学到什么？

\n\n

适宜人群

\n\n

购买须知

\n
    \n
  1. 本小册为图文形式内容服务，共计 19 节；
    2. \n
  2. 全部文章已于 03 月 01 日更新完成；
    3. \n
  3. 购买用户可享有小册永久的阅读权限；
    4. \n
  4. 购买用户可进入小册微信群，与作者互动；
    5. \n
  5. 掘金小册为虚拟内容服务，一经购买成功概不退款；
    6. \n
  6. 掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；
    7. \n
  7. 在掘金小册阅读过程中，如有任何问题，请邮件联系 xiaoce@xitu.io
    8. \n
", "draft_content": "", "draft_title": "小册介绍", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 343, "read_count": 0, "comment_count": 0, "ctime": 1613727976, "mtime": 1613727976, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, "sections": [ { "id": 83483, "section_id": "6930908881178591239", "title": "前言：可视化搭建诞生背景", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "前言：可视化搭建诞生背景", "markdown_content": "", "markdown_show": "", "is_free": 1, "read_time": 266, "read_count": 12100, "comment_count": 28, "ctime": 1613727976, "mtime": 1613727976, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83486, "section_id": "6930519748576804879", "title": "架构设计", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "架构设计", "markdown_content": "", "markdown_show": "", "is_free": 1, "read_time": 206, "read_count": 10657, "comment_count": 13, "ctime": 1613742252, "mtime": 1613742252, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83493, "section_id": "6930872180666269708", "title": "前置基础知识准备", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "前置基础知识准备", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 300, "read_count": 6174, "comment_count": 22, "ctime": 1613818884, "mtime": 1613818884, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83494, "section_id": "6931293403791491079", "title": "模板设计", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "模板设计", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 565, "read_count": 5996, "comment_count": 21, "ctime": 1613821231, "mtime": 1613821231, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83512, "section_id": "6931310561615413251", "title": "模板通信设计", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "模板通信设计", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 462, "read_count": 5328, "comment_count": 16, "ctime": 1613911659, "mtime": 1613911659, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83517, "section_id": "6931903833916309516", "title": "模板动态化交互", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "模板动态化交互", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 635, "read_count": 4173, "comment_count": 14, "ctime": 1613974482, "mtime": 1613974482, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83500, "section_id": "6931310524638429187", "title": "稳定性-模板更新策略", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "稳定性-模板更新策略", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 213, "read_count": 3245, "comment_count": 19, "ctime": 1613821491, "mtime": 1613821491, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83495, "section_id": "6931309406759944205", "title": "全局组件设计", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "全局组件设计", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 1070, "read_count": 3477, "comment_count": 11, "ctime": 1613821318, "mtime": 1613821318, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83522, "section_id": "6932006578258182144", "title": "全局组件注册", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "全局组件注册", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 541, "read_count": 2957, "comment_count": 22, "ctime": 1614053903, "mtime": 1614053903, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83501, "section_id": "6931310524646817795", "title": "稳定性-组件更新策略", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "稳定性-组件更新策略", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 435, "read_count": 2371, "comment_count": 2, "ctime": 1613821499, "mtime": 1613821499, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83502, "section_id": "6931310146442559495", "title": "设计实现 CLI 为开发助力", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "设计实现 CLI 为开发助力", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 1776, "read_count": 2631, "comment_count": 14, "ctime": 1613821574, "mtime": 1613821574, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83496, "section_id": "6931309783135830029", "title": "可视化编辑区实现", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "可视化编辑区实现", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 1796, "read_count": 3055, "comment_count": 14, "ctime": 1613821355, "mtime": 1613821355, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83529, "section_id": "6932671493432147980", "title": "可视化编辑区mock&预览", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "可视化编辑区mock&预览", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 372, "read_count": 2438, "comment_count": 8, "ctime": 1614145369, "mtime": 1614145369, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83497, "section_id": "6931309942259318797", "title": "vue3 Form render 实现", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "vue3 Form render 实现", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 1500, "read_count": 2615, "comment_count": 4, "ctime": 1613821373, "mtime": 1613821373, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83498, "section_id": "6931310017576435719", "title": "Server 端编译实现", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "Server 端编译实现", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 514, "read_count": 2508, "comment_count": 8, "ctime": 1613821403, "mtime": 1613821403, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83499, "section_id": "6931293403892154376", "title": "发布流程设计", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "发布流程设计", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 424, "read_count": 2127, "comment_count": 0, "ctime": 1613821451, "mtime": 1613821451, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83504, "section_id": "6931312051486720007", "title": "写在最后", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "写在最后", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 132, "read_count": 1892, "comment_count": 10, "ctime": 1613821924, "mtime": 1613821924, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83503, "section_id": "6931310879883886599", "title": "加餐：当前可视化搭建未解决的问题", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "加餐：当前可视化搭建未解决的问题", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 207, "read_count": 2405, "comment_count": 4, "ctime": 1613821846, "mtime": 1613821846, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null }, { "id": 83656, "section_id": "6934947639834181645", "title": "加餐：H5 可视化搭建项目如何在本地跑起来", "user_id": "3298190611978526", "booklet_id": "6930553086918262798", "status": 1, "content": "", "draft_content": "", "draft_title": "加餐：H5 可视化搭建项目如何在本地跑起来", "markdown_content": "", "markdown_show": "", "is_free": 0, "read_time": 694, "read_count": 3096, "comment_count": 21, "ctime": 1614767884, "mtime": 1614767884, "is_update": 0, "draft_read_time": 0, "vid": "", "reading_progress": null } ] } }