Vular (Vuetify + Laravel) 开发手记 #1:设计并实现一个拼插式应用程序框架

可视化编(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,从而腾出精力,专注于自己的业务逻辑。

前后端大致配合示意图:

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

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(新建的,还没有人)

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 4

厉害呀!

3年前 评论
idlewater (楼主) 3年前
西巴以及 (作者) 3年前
idlewater (楼主) 3年前
idlewater (楼主) 3年前

你这个域名好啊

3年前 评论
idlewater (楼主) 3年前
idlewater (楼主) 3年前

感觉跟这个项目类似 github.com/SmallRuralDog/laravel-v...

3年前 评论
idlewater (楼主) 3年前
aodaobi

nb,之前一直想做一个敏捷开发面板,完了懒 就没有开始

3年前 评论
idlewater (楼主) 3年前
aodaobi (作者) 3年前
idlewater (楼主) 3年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!