Vular开发手记#1：设计并实现一个拼插式应用程序框架

可视化编（rxeditor）辑告一段落，在知乎上发了一个问题，询问前景，虽然看好的不多，但是关注度还是有的，目前为止积累了21w流量，因为这个事，开心了好长一段时间。
这一个月的时间，主要在设计制作vular，基于vuetify跟larval实现的，可拼插式应用框架。并且把rxeditor可视化编辑也整合进来了。
前端代码地址：
前端演示地址： （尚未正式发布，很多地方未优化，服务器不在国内，加载会稍微有些慢，耐心等一下，一定能加载完）
框架已经具有雏形，页面布局（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，从而腾出精力，专注于自己的业务逻辑。

前后端大致配合示意图：

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

3、前端控件

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

3.1 导航菜单

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

上图展示了所有菜单功能。菜单项结构:
前置图标-菜单标题-后置图标-chip-badge
扁平的“hot”,“new”部分是chip， “8”跟“4”这样的数字是badge。
其中chip是在构造页面schema时确定，不能通过数据实时更新。badge展示的是前端框架中的全局变量，这些全局变量会在每一次跟后台api交互时刷新，是可以实时更新的。只需要要在后端，绑定相应的php function到全局变量即可。

菜单点击会跳到相应页面（vue路由实现，不是laravel路由，本项目尽量少使用laravel路由功能），通过菜单项的to变量设置跳转的目的页面。

3.2 工具栏

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

3.3 媒体管理

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

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

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

3.4 媒体选择

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

3.5 列表页面

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

3.6 编辑页面

实现了两种编辑页面：

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

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

4、校验

采用前端校验跟后端校验结合的方式，前端校验采用vee validate，前端仅支持预定义校验，不支持自定义校验，后端校验无限制。
后端代码可以方便配置校验规则：

vtextarea::make()
  ->field('summary')
  ->label('摘要')
  ->prependinnericon('insert_comment')
  ->maxlength(500)
  ->required()
  ->rule('email')

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

5、调试与错误提示

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

  

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

6、权限管理

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

vulartablecolumn::make('user','业务员')
->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、关联编辑卡

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

在后端，把这样一个对话框，绑定到一个1对1关联属性上。对话框的布局跟内容可以在后端php中设置。
4、下拉列表
这种方式只是用来选择一个关联，并不能对关联的对象进行编辑。

7.2 1对多关联

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

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

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

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

3、1对多下拉选择

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

8、可视化编辑

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

9、生态构建

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

9.1、应用层生态

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

9.2、vue层前端生态

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

9.3、可视化模板生态

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

草草写完了，感觉很多东西还没有说明白，本文档主要用于征集意见，查补自己设计上的疏漏，如果这个项目能顺利完成，就在文档里详细说说吧。
对这个项目感兴趣的可以加qq群：957619750（新建的，还没有人）