前端技术-低代码平台-页面可视化编辑器
sinye56 2024-10-25 16:15 4 浏览 0 评论
页面可视化编辑器
1.背景
a) 公司是一个垂直的药品电商平台主营B2B，初创平台需要大量的营销活动来拉动商业需求。
b) 本人来公司近一年，一直负责营销活动的研发工作，主要有商家促销体系、平台营销、运营数据统计三大块。做了一个初步的统计，从今年2月到8月底累计上线的活动约200个，其中手工开发的页面占到120个左右，每个活动约2~4个页面（h5&pc），算下来几乎1天一个+活动。
c) 其中包括和运营梳理活动方案，制定各种活动开发方案及实施细节，并和各个部门的研发同学沟通技术细节。
d) 整体下来从运营活动发起、启动研发、活动上线、后期的数据统计，整个流程下来需要处理的事情非常多。
e) 经常碰到的一个问题，运营提报活动，并且要求快速上线，研发同事面对的就是没日没夜的加班，通宵已成习惯。但我们做为研发人，不能容忍这种问题长期出现，这时迫不及待地需要一个平台化的系统来支持运营部门的活动需求，加速活动上线流程，降低研发成本。
2.活动页面可视化编辑器
a) 先上图
主功能区
b) 从工具栏选择相应的UI组件，通过属性编辑器编辑对应的属性并保存到数据库。
c) 涉及到的后端领域模型如下
d) 前端交互领域模型
?e) 整体逻辑架构
f) 前端渲染时序
g) 前端渲染实现思路
i. 编译指令：angular自定义指令，用来加载可视化组件并绑定作用域及参数；
ii. 可视化组件：为页面中展示的一个楼层，
前端实现：为一个angular自定义指令，一个html，一个组件数据包括配置
加载过程：由自定义的编译指令通过组件模板配置的html模板地址进行加载并绑定对应的组件配置属性
iii. 组件模板：用来定义一个组件的构成，包括组件名称、唯一code标识、类型、组件所有的配置项
前端实现：一个工具栏展示图片，一个html模板，一个自定义指令。
加载过程：在配置页面初始化时展示在工具栏
iv. 属性编辑器：用来为每个组件编辑对应的配置项，通过组件模板code对应到组件模板。
前端实现：
加载过程：在每个组件被选中的同时通过组件对应的组件模板code进行切换
h) 实现思路-数据交互模型
i) 技术栈
j) 开发规范
k) 系统架构
3.自动产出活动统计数据
【待续】
4.未来的工作
?编辑
具体的活动页面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
?
相关推荐
- Linux在线安装JDK1.8
-
首先在服务器pingwww.baidu.com查看是否可以连网然后就可以在线下载一、下载安装JDK1.81、在下载安装的同时做好一些准备工作...
- Linux安装JDK，超详细
-
1、了解RPMRPM是Red-HatPackageManager（RPM软件包管理器）的缩写，这一文件格式名称虽然打上了RedHat的标志，但是其原始设计理念是开放式的，现在包括OpenLinux...
- Linux安装jdk1.8(超级详细)
-
前言最近刚购买了一台阿里云的服务器准备要搭建一个网站，正好将网站的一个完整搭建过程分享给大家！#一、下载jdk1.8首先我们需要去下载linux版本的jdk1.8安装包，我们有两种方式去下载安装...
- Linux系统安装JDK教程
-
下载jdk-8u151-linux-x64.tar.gz下载地址：https://www.oracle.com/technetwork/java/javase/downloads/index.ht...
- 干货|JDK下载安装与环境变量配置图文教程「超详细」
-
1.JDK介绍1.1什么是JDK?SUN公司提供了一套Java开发环境，简称JDK(JavaDevelopmentKit)，它是整个Java的核心，其中包括Java编译器、Java运行工具、Jav...
- Linux下安装jdk1.8
-
一、安装环境操作系统：CentOSLinuxrelease7.6.1810(Core)JDK版本：1.8二、安装步骤1.下载安装包...
- Linux上安装JDK
-
以CentOS为例。检查是否已安装过jdk。yumlist--installed|grepjdk或者...
- Linux系统的一些常用目录以及介绍
-
根目录（／）：“／”目录也称为根目录，位于Linux文件系统目录结构的顶层。在很多系统中，“／”目录是系统中的唯一分区。如果还有其他分区，必须挂载到“／”目录下某个位置。整个目录结构呈树形结构，因此也...
- Linux系统目录结构
-
一、系统目录结构几乎所有的计算机操作系统都是使用目录结构组织文件。具体来说就是在一个目录中存放子目录和文件，而在子目录中又会进一步存放子目录和文件，以此类推形成一个树状的文件结构，由于其结构很像一棵树...
- Linux文件查找
-
在Linux下通常find不很常用的，因为速度慢（find是直接查找硬盘），通常我们都是先使用whereis或者是locate来检查，如果真的找不到了，才以find来搜寻。为什么...
- 嵌入式linux基本操作之查找文件
-
对于很多初学者来说都习惯用windows操作系统，对于这个系统来说查找一个文件简直不在话下。而学习嵌入式开发行业之后，发现所用到的是嵌入式Linux操作系统，本想着跟windows类似，结果在操作的时...
- linux系统查看软件安装目录的方法
-
linux系统下怎么查看软件安装的目录？方法1：whereis软件名以查询nginx为例子...
- Linux下如何对目录中的文件进行统计
-
统计目录中的文件数量...
- Linux常见文件目录管理命令
-
touch用于创建空白文件touch文件名称mkdir用于创建空白目录还可以通过参数-p创建递归的目录...
- Linux常用查找文件方法总结
-
一、前言Linux系统提供了多种查找文件的命令，而且每种查找命令都具有其独特的优势，下面详细总结一下常用的几个Linux查找命令。二、which命令查找类型：二进制文件；...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- oracle忘记用户名密码 (59)
- oracle11gr2安装教程 (55)
- mybatis调用oracle存储过程 (67)
- oracle spool的用法 (57)
- oracle asm 磁盘管理 (67)
- 前端 设计模式 (64)
- 前端面试vue (56)
- linux格式化 (55)
- linux图形界面 (62)
- linux文件压缩 (75)
- Linux设置权限 (53)
- linux服务器配置 (62)
- mysql安装linux (71)
- linux启动命令 (59)
- 查看linux磁盘 (72)
- linux用户组 (74)
- linux多线程 (70)
- linux设备驱动 (53)
- linux自启动 (59)
- linux网络命令 (55)
- linux传文件 (60)
- linux打包文件 (58)
- linux查看数据库 (61)
- linux获取ip (64)
- 关闭防火墙linux (53)