web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)

页面可视化编辑器

1.背景

a) 公司是一个垂直的药品电商平台主营B2B,初创平台需要大量的营销活动来拉动商业需求。

b) 本人来公司近一年,一直负责营销活动的研发工作,主要有商家促销体系、平台营销、运营数据统计三大块。做了一个初步的统计,从今年2月到8月底累计上线的活动约200个,其中手工开发的页面占到120个左右,每个活动约2~4个页面(h5&pc),算下来几乎1天一个 活动。

c) 其中包括和运营梳理活动方案,制定各种活动开发方案及实施细节,并和各个部门的研发同学沟通技术细节。

d) 整体下来从运营活动发起、启动研发、活动上线、后期的数据统计,整个流程下来需要处理的事情非常多。

e) 经常碰到的一个问题,运营提报活动,并且要求快速上线,研发同事面对的就是没日没夜的加班,通宵已成习惯。但我们做为研发人,不能容忍这种问题长期出现,这时迫不及待地需要一个平台化的系统来支持运营部门的活动需求,加速活动上线流程,降低研发成本。

2.活动页面可视化编辑器

a) 先上图

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(1)

主功能区

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(2)

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(3)

主功能区

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(4)

主功能区

b) 从工具栏选择相应的UI组件,通过属性编辑器编辑对应的属性并保存到数据库。

c) 涉及到的后端领域模型如下

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(5)

领域模型

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(6)

d) 前端交互领域模型

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(7)

前端交互领域模型

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(8)

​e) 整体逻辑架构

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(9)

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(10)

逻辑架构

f) 前端渲染时序

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(11)

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(12)

g) 前端渲染实现思路

i. 编译指令:angular自定义指令,用来加载可视化组件并绑定作用域及参数;

ii. 可视化组件:为页面中展示的一个楼层,

前端实现:为一个angular自定义指令,一个html,一个组件数据包括配置

加载过程:由自定义的编译指令通过组件模板配置的html模板地址进行加载并绑定对应的组件配置属性

iii. 组件模板:用来定义一个组件的构成,包括组件名称、唯一code标识、类型、组件所有的配置项

前端实现:一个工具栏展示图片,一个html模板,一个自定义指令。

加载过程:在配置页面初始化时展示在工具栏

iv. 属性编辑器:用来为每个组件编辑对应的配置项,通过组件模板code对应到组件模板。

前端实现:

加载过程:在每个组件被选中的同时通过组件对应的组件模板code进行切换

h) 实现思路-数据交互模型

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(13)

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(14)

i) 技术栈

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(15)

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(16)

j) 开发规范

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(17)

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(18)

k) 系统架构

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(19)

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(20)

3.自动产出活动统计数据

【待续】

4.未来的工作

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(21)

web前端最好用的编辑器(前端技术-低代码平台-页面可视化编辑器)(22)

​编辑

具体的活动页面demo:http://act.mypharma.com/activity/p/411.html

http://act.mypharma.com/activity/p/4582.html

很多组件还在规划和研发中,敬请期待

文中图片ppt地址:http://download.csdn.net/download/philip502/9963680

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页