可视化编（rxeditor）辑告一段落，在知乎上发了一个问题，询问前景，虽然看好的不多，但是关注度还是有的，目前为止积累了 21w 流量，因为这个事，开心了好长一段时间。

这一个月的时间，主要在设计制作 Vular，基于 Vuetify 跟 larval 实现的，可拼插式应用框架。并且把 RXEditor 可视化编辑也整合进来了。

前端代码地址：github.com/vularsoft/vular-admin

前端演示地址：vular.now.sh （尚未正式发布，很多地方未优化，服务器不在国内，加载会稍微有些慢，耐心等一下，一定能加载完）

框架已经具有雏形，页面布局（Schema）等都是从模拟接口加载的数据，并未写死。

有过第一期 Vular 开发经验（自己使用，并未正式发布），本来以为第二期会开发速度很快，一两周的时间应该能结束前端。结果一做就是一个月，并且很多细节还不完善。不得不说，工作量好大，工作量好大，工作量好大。

如果是小项目，不建议自己做一个类似的框架，工作量太大。如果是开发项目的公司，可以集中一个团队的力量做一个，完成后，可以极大提高后续项目的开发效率。

本来就不是很喜欢多说话，结果还经常说废话。闲话少扯，正式开始说项目，希望读到这篇文章的朋友给个参考意见，帮忙看看这样的设计有没有什么致命缺陷，在下不胜感激。

1、什么是 Vular?

基于 vue,vuetify + laravel 实现的拼插式应用框架，希望可以通过后端 PHP 代码，像拼插积木一样拼插自己的应用。

第一版已经打通了相关技术环节，以学习自用为目的，虽然 Github 上有代码，并未正式发布。第二版开源，希望实现一个高度可扩展框架，能够在多个层面构建不同的生态（可能想多了，但是，没有梦想的开源作者，跟一条咸鱼有什么区别？野心要有的，万一实现了呢）。

2、Vular 框架结构

Vular 采用前后端分离的方式，构成主要有两部分：1、前端 Vue 部分，2、后端 Laravel 部分。通过大量预先制作前端控件，减少后端程序员在前端的工作，通过后端框架的编程，拼插前端表现层。

简单点说，就是少量后端代码，不需要写前端代码，就可以制作应用。并且能够同时享用 Laravel 跟 Vue 两大生态。

2.1 前端 Vue 部分

前端框架实现用户体验方面的功能，比如风格样式，美工配色，页面布局，页面之间的迁移方式等。主要的框架固定后，页面内部的元素是可以组合的，具体组合哪些元素，通过后端传来的 Json 数据确定。

在第一期项目的实践中发现，虽然可以在后端订制很细小的控件，比如 “div”，“span” 等。由于后端无法向前端传递 JS 代码，这样细的粒度，会使得前端更像一个大模板，无法充分使用 js 特性、发挥前后端分离的优势。并且产生成后端程序员不易理解的代码。

在第本期设计中，把前端的控件设计的足够大，给这些控件配详细文档跟样例，增加对后端程序员的友好性。

简单点，就是前端框架提供足够丰富的控件：比如列表页面，编辑页面，级联选择，列表选择等，供后端调用。后端不需要知道详细前端 html 细节。

这样的设计比起第一期，会失掉很多灵活性，但是增加了易用性。

前端展示层渲染分两步：第一步，通过后端 API 获取页面的 JSON 描述，这个 Json 描述我称它为 Schema。前端根据这个 Schema 动态渲染页面。第二步，根据 Schema 内的指示，通过后端 API 获取页面数据，这些数据我称它为 ViewModel。

2.2 后端 Laravel 部分

在设计这个项目前，参看了 Nova 跟 Laravel Admin 等一些优秀的框架，这些框架已经实现一些非常好的功能，为避免重复实现， 我尽量提供一个不一样的设计，来满足不同的使用场景。

设计时，尽量让前后端配合，形成 MVVM 模式。让框架使用者，用尽量少的代码，尽可能简单的方式构造 ViewModel 跟 View，从而腾出精力，专注于自己的业务逻辑。

前后端大致配合示意图：

1.png

光凭这个丑丑的图，可能收不明白详细原理，先大致有个印象吧。

3、前端控件

Vular 是一个更靠近应用层的框架，前端一定要实现足够多功能，才有存在的理由与价值。目前前端实现了如下控件，可供后端调用。

3.1 导航菜单

本版本实现两级导航菜单，以后可以升级更多级的导航菜单，目前没有需求，为节省时间，只实现两级：

2.png

上图展示了所有菜单功能。菜单项结构:
前置图标 - 菜单标题 - 后置图标 - Chip-Badge
扁平的 “hot”,“new” 部分是 Chip， “8” 跟 “4” 这样的数字是 Badge。
其中 Chip 是在构造页面 Schema 时确定，不能通过数据实时更新。Badge 展示的是前端框架中的全局变量，这些全局变量会在每一次跟后台 API 交互时刷新，是可以实时更新的。只需要要在后端，绑定相应的 Php function 到全局变量即可。
菜单点击会跳到相应页面（Vue 路由实现，不是 Laravel 路由，本项目尽量少使用 Laravel 路由功能），通过菜单项的 to 变量设置跳转的目的页面。

3.2 工具栏

工具栏比较简单，只实现了通知跟一些简单的账户操作，目前不支持工具栏插入自定义项目，后期有需求可以加。

3.3 媒体管理

一个集中管理图片、视频、文档等文件的地方。目前只支持单级目录，第一期支持树状多级目录，使用过程中发现，需求并不高，本次取消多级。

medias.gif

可以用拖放的方式，调整文件夹的顺序。可以用拖放的方式，把文件放到某个文件夹下。

5.png

预计实现一个可能会有争议的功能，就是图片置换。只选中一个图片的时候，工具栏最右侧显示置换按钮，可以把一个图片置换成另一个图片，图片 URL 不变。具体应用，自行脑补一下好了。

3.4 媒体选择

媒体选择输入控件，可以从媒体库单选或者多选媒体，可以拖放设置顺序，如果是图片还可以设置相应的 alt 文本：

medias2.gif

3.5 列表页面

7.png

列数，列宽，过滤条件，操作指令等都可以在后端 PHP 代码中配置，数据的显示形式如图片，标签等也可以在后端 PHP 代码中配置。

3.6 编辑页面

实现了两种编辑页面：

8.png

这个页面的布局（几行，几列）内容都可以在后台的 PHP 代码中订制。

9.png

这个页面的内容也可以在后台的 PHP 代码中订制，卡片宽度可以订制，控件的布局也可以订制，卡片只有一个。

4、校验

采用前端校验跟后端校验结合的方式，前端校验采用 vee validate，前端仅支持预定义校验，不支持自定义校验，后端校验无限制。

后端代码可以方便配置校验规则：

  ->field('summary')
  ->label('摘要')
  ->prependInnerIcon('insert_comment')
  ->maxLength(500)
  ->required()
  ->rule('email')

最后三行是添加校验规则的代码。

5、调试与错误提示

前端跟后端的通讯错误，用对话框方式提示，这些错误的详细信息会被记录，可以在 Debug 模块查看。没有错误时，底部的 Dubug 图标是灰色的，有错误时，图标是红色的：

10.png 11.png 12.png 13.png

后期，可以在这个模块添加更多调试功能，比如直接从 API 接口获取数据等。

6、权限管理

提供细粒度权限管理，可以根据权限 ID，显示、隐藏或者禁用界面控件，也可以根据权限 ID 验证业务逻辑。一期实现示例：

  ->hiddenBy('order_user_column')
  ->sortable(),

其中的 hiddenBy 就是根据权限 ID 隐藏表格的 order_user_column 这一列。

7、关联编辑

框架预期使用 MVVM 模式，View Model 可以屏蔽 Laravel Model 之间的关系。但是，有时 Laravel Model 到 View Model 只需要简单映射就可以，就避免不掉在界面并编辑各种关联关系。

7.1 1 对 1 关联

1 对 1 关联的编辑，目前实现这几种方式：1、普通输入控件；2、关联编辑卡；3、弹出对话框；4、下拉选择列表。

1、普通数据控件

在绑定数据时，用点号区分，一期实现示例：

VTextField::make()
->field('seoMeta.title')
->label('SEO 标题')
其中 field 便是绑定一个一对一关联的字段。

2、关联编辑卡

14.png

在后端，把这样一个卡片，绑定到一个 1 对 1 关联属性上。卡片的布局跟内容可以后端 PHP 中设置。

3、弹出对话框

15.png

在后端，把这样一个对话框，绑定到一个 1 对 1 关联属性上。对话框的布局跟内容可以在后端 PHP 中设置。

4、下拉列表

这种方式只是用来选择一个关联，并不能对关联的对象进行编辑。

7.2 1 对多关联

1 对多关联，是最复杂的，目前支持这样的编辑方式：1、1 对多表格编辑； 2、1 对多面板编辑；3、1 对多下拉列表选择。

1、1 对多表格编辑

16.png

不需要过多解释，后端绑定一个关联到表格就行，表格内容可以订制。

2、1 对多面板 ，相当于这个表格的展开版：

17.png

面板内容跟布局可以在 PHP 端订制。

3、1 对多下拉选择

18.png

为了应对可能出现大数据的情况，这个列表，可以根据输入的内容动态从后端获取。

8、可视化编辑

目前通过 RXEditor 积累了可视化编辑经验，后期可以添加可视化编辑功能，比如基于 Vular 构建的 CMS 系统，可以可视化编辑页面。可以可视化生成后端表单代码等。

9、生态构建

未来可以从这么几个层面构建生态

9.1、应用层生态

找到一个业务领域，比如我自己是做外贸的，熟悉外贸领域。在该领域内，通过 Laravel 扩展包的方式，可以构建针对这个业务的所有应用。就外贸行业而言，可以构建外贸建站 CMS 模块，订单管理模块，客户管理模块，还可以做一些 Chrome 插件，结合社交网络，构建社交营销模块。

9.2、VUE 层前端生态

根据 业务需要构建丰富的前端控件库，通过 vue 动态组件形式加载，比如不同风格的列表页面，不同风格对话框及编辑页面，级联选择框，穿梭框等 。可以充分发挥 VUE JS 优势，跟随需要，随时构建。

9.3、可视化模板生态

我是一个做外贸的，我一定要在外贸的垂直领域，做一个针对外贸行业的 CMS 模块，外贸网站用到的前端模板，基于我的可视化编辑，也可以自成一个生态系统。

草草写完了，感觉很多东西还没有说明白，本文档主要用于征集意见，查补自己设计上的疏漏，如果这个项目能顺利完成，就在文档里详细说说吧。

对这个项目感兴趣的可以加 QQ 群：957619750（新建的，还没有人）