百度360必应搜狗淘宝本站头条
linux文件压缩linux用户组查看linux磁盘mysql安装linuxlinux多线程
当前位置：网站首页 > 优雅编程 > 正文

前端技术-低代码平台-页面可视化编辑器

sinye56 2024-10-25 16:15 12 浏览 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

?

相关推荐

程序员:JDK的安装与配置(完整版)_jdk的安装方法

对于Java程序员来说，jdk是必不陌生的一个词。但怎么安装配置jdk，对新手来说确实头疼的一件事情。我这里以jdk10为例，详细的说明讲解了jdk的安装和配置，如果有不明白的小伙伴可以评论区留言哦下...

Linux中安装jdk并配置环境变量_linux jdk安装教程及环境变量配置

一、通过连接工具登录到Linux(我这里使用的Centos7.6版本)服务器连接工具有很多我就不一一介绍了今天使用比较常用的XShell工具登录成功如下：二、上传jdk安装包到Linux服务器jdk...

麒麟系统安装JAVA JDK教程_麒麟系统配置jdk

检查检查系统是否自带java在麒麟系统桌面空白处，右键“在终端打开”，打开shell对话框输入：java–version查看是否自带java及版本如图所示，系统自带OpenJDK，要先卸载自带JDK...

学习笔记-Linux JDK - 安装&配置

前提条件#检查是否存在JDKrpm-qa|grepjava#删除现存JDKyum-yremovejava*安装OracleJDK不分系统#进入安装文件目...

Linux新手入门系列:Linux下jdk安装配置

本系列文章是把作者刚接触和学习Linux时候的实操记录分享出来，内容主要包括Linux入门的一些理论概念知识、Web程序、mysql数据库的简单安装部署，希望能够帮到一些初学者，少走一些弯路。注意：L...

测试员必备:Linux下安装JDK 1.8你必须知道的那些事

1.简介在Oracle收购Sun后，Java的一系列产品就被整合到Oracle官网中，打开官网乍眼一看也不知道去哪里下载，还得一个一个的摸索尝试，而且网上大多数都是一些Oracle收购Sun前，或者就...

Linux 下安装JDK17_linux 安装jdk1.8 yum

一、安装环境操作系统：JDK版本：17二、安装步骤第一步：下载安装包下载Linux环境下的jdk1.8，请去官网（https://www.oracle.com/java/technologies/do...

在Ubuntu系统中安装JDK 17并配置环境变量教程

在Ubuntu系统上安装JDK17并配置环境变量是Java开发环境搭建的重要步骤。JDK17是Oracle提供的长期支持版本，广泛用于开发Java应用程序。以下是详细的步骤，帮助你在Ubuntu系...

如何在 Linux 上安装 Java_linux安装java的步骤

在桌面上拥抱Java应用程序，然后在所有桌面上运行它们。--SethKenlon（作者）无论你运行的是哪种操作系统，通常都有几种安装应用程序的方法。有时你可能会在应用程序商店中找到一个应用程序...

Windows和Linux环境下的JDK安装教程

JavaDevelopmentKit（简称JDK），是Java开发的核心工具包，提供了Java应用程序的编译、运行和开发所需的各类工具和类库。它包括了JRE（JavaRuntimeEnviro...

linux安装jdk_linux安装jdk软连接

JDK是啥就不用多介绍了哈，外行的人也不会进来看我的博文。依然记得读大学那会，第一次实验课就是在机房安装jdk，编写HelloWorld程序。时光飞逝啊，一下过了十多年了，挣了不少钱，买了跑车，娶了富...

linux安装jdk,全局配置，不同用户不同jdk

jdk1.8安装包链接：https://pan.baidu.com/s/14qBrh6ZpLK04QS8ogCepwg提取码：09zs上传文件解压tar-zxvfjdk-8u152-linux-...

运维大神教你在linux下安装jdk8_linux安装jdk1.7

1.到官网下载适合自己机器的版本。楼主下载的是jdk-8u66-linux-i586.tar.gzhttp://www.oracle.com/technetwork/java/javase/downl...

window和linux安装JDK1.8_linux 安装jdk1.8.tar

Windows安装JDK1.8的步骤：步骤1：下载JDK打开浏览器，找到JDK下载页面https://d.injdk.cn/download/oraclejdk/8在页面中找到并点击“下载...

最全的linux下安装JavaJDK的教程(图文详解)不会安装你来打我?

默认已经有了linux服务器，且有root账号首先检查一下是否已经安装过java的jdk任意位置输入命令：whichjava像我这个已经安装过了，就会提示在哪个位置，你的肯定是找不到。一般我们在...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表