【第3189期】信使 Web builder：拖拽组件构建响应式页面的前端开源框架
前言
年前就陪伴到这了，24年有招聘需求的可以联系wx：zhgb_f2er。如果是找工作的，来这里看看。一款适合进阶的基于 Material 的 Angular 前端框架的开源项目，今日前端早读课文章由 @表歌投稿分享。
正文从这开始～～
信使 Web builder 是基于 Material 的 Angular 前端框架， 丰富的组件库可提供优秀的数字创新体验，通过拖拽组件快速构建响应式、自定义多主题的 Web 页面，体验：https://www.zhaobg.com/
【第2388期】使用 resize 实现强大的图片拖拽切换预览功能
前端可以学习到
这个开源项目非常适合初学者学习或者进阶，它涵盖了绝大部分 Angular 技术知识点，但并不仅限于以下内容。
服务端渲染（SSR）
懒加载，Inject 依赖注入
路由守卫
请求拦截缓存
动态组件
动态表单
动态表格
Material 多主题
自定义指令
自定义管道 pipe
自定义 icon
数据图表
Rxjs
Flex Layout 布局
Storybook
Typescript
Provider
地图应用
作为建站者你可以体验到
CMS 只是一个数据管理中心的低代码平台，PC 端或者小程序端可以通过 API 访问后台数据。
Drupal 是如何真正的实践前后端分离的
JSONAPI 的应用
View REST full 的应用
技术选型
前端：Angular + Material + FlexLayout
动态表单：ngx-formly
web 动画：gsap
图表：Echarts
视频：Video.js
文件生成：jspdf 生成 pdf，html2canvas 生成图像，file-saver 下载文件，jszip 压缩文件
编辑器：quill, ang-jsoneditor
幻灯片：swiper
字体图标：material design icons + 自定义 svg icon
加密：crypto-js
工具函数：lodash-es
测试预览：storybook
web 服务：Nginx
后端：Drupal (推荐)，通过 Drupal 的 views 视图可灵活配置动态组件、动态 api；
Web Builder 功能说明
1、Layout builder 动态布局：可以自定义栏数，栏数可增加多个，响应式配置
2、边栏可拖拽：直接从边栏选择组件放入内容区
3、选择示例页加载：加载示例页面到内容区
4、切换全宽：方便大屏编辑，减少干扰
5、内容区组件导航：边栏可通过导航查看组件，可上下拖动排序
6、智能生成页面：根据一定的规则从组件库中生成页面
7、多主题切换预览：预览在多主题下的组件显示情况
8、页面预览：调转到新窗口查看真实的页面
9、复制整个页面的 JSON：可直接复制 json，部署到后台发布
10、下载设计的页面：可保存当前页面截图到本地
11、组件编辑：文字图片即时更新、删除、复制 JSON、拖动上下排列
12、Builder：暗黑风格 支持切换浅色风格和暗黑风格，专注内容创作
13、响应式预览：可切换不同设备尺寸查看页面响应式排版
14、媒体库浏览：查看后台上传的媒体资源文件
15、页面历史版本：当提交、清空、加载示例等覆盖操作时新增历史版本
Layout Builder
动态构建 Flex 布局，可配置每栏的响应式配置，还有通用的样式配置，比如背景色、背景图。通过 Layout builder 可以构建无数种形态的复合组件。
弹窗的方式选择插入基组件
基组件也做了可视化的配置，比如 swiper 幻灯片
也可以 inline 的方式快速编辑文本
组件选择
鼠标经过组件会显示预览，可拖拽到编辑区
可以使用应用中静态媒体库或者切换到后台媒体库
响应式预览
历史版本
当提交、清空或者加载示例页等覆盖操作时生成历史版本，选择具体的版本再进行编辑提交。
其他组件
应用场景
框架除了可以构建静态组件之外，像列表页、搜索页、Dashboard 页面也是可以配置 API 获取数据。通过 Web builder 可以快速构建页面发布营销活动，适应市场的变化。示例站点使用 Web Builder 创建了十多个首页示例页面，可直接使用或者当做模板进行二次更新修改。
文档
项目使用 Storybook 来做组件的开发测试和文档更新，可查看：https://ui.zhaobg.com/
项目架构
大部分的逻辑都会往适应不同项目的方向考虑，很多使用了注入的方式，这样你可以根据自己的项目需要覆写业务的逻辑。
使用人群
前端开发：在 Storybook 中开发测试维护组件；
产品经理：快速构建和预览页面；
运维人员：构建页面和测试 UI
市场营销：给客户演示数字创新能力
开源地址：https://github.com/biaogebusy/web-builder
关于本文
作者：@表歌
原文：https://app.yinxiang.com/fx/09033d9e-639a-47d3-9b3b-8428953f7a5c
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。