使用React制作一个可配置的页面生成器[0]

背景

上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了11116的码农之旅。

因为公司做的是直播相关的业务,所以伴随着直播,不定期的就会有运营活动-.-

但是这类活动留给码农的开发周期都不太长,上半年比较激烈,基本一个月要上个三四个的活动。。。

由于这些活动页面基本类似,所以就萌生了做一个能够让运营、产品、设计同学直接去通过界面操作配置来生成一个活动页面。(其实是我下半年的KPI了...)

于是就有了本项目。(目前项目刚刚起步)

需要实现的功能

1. 有一个操作界面来进行组件的添加修改

2. 可以针对组件来配置数据的来源

3. 发布配置好的页面到线上环境

由于自己是写Node的,所以做起来比较舒服,不会涉及到前后端沟通的障碍。。。

待系统完工后的页面上线流程大致为:

1. 新建页面

2. 配置组件,绑定数据来源

3. 点击发布

4. 将本次配置生成一个json文件推到活动页面的展示服务器上并将配置存入MySQL中备份

5. ...后续步骤暂时省略,就是拿到json配置后的生成router相关事宜了

目前实现的功能

1. 添加组件、组件中添加组件

2. 改变组件的位置

3. 删除组件

4. 编辑组件的属性和样式

目前有两个可以看到效果的组件。。Container和Text

预计11月15日会实现一个较为完整的配置系统、11月20日实现上线部署相关事宜。

项目地址: https://github.com/Precursors/ultron-stage

时间: 2024-10-23 12:53:09

使用React制作一个可配置的页面生成器[0]的相关文章

制作一个银行卡用户登录页面,提交后连接数据库进行登录验证,根据验证结果跳转到不同页面

Login.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&quo

我学React Native开发的经历(一) 第一周学习,环境搭建及demo1,一个导航跳转页面

大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多. 作为新手,文章看的多,但是开始写具体应用的时候,往往一脸迷茫. 所以,我一边学习,一边把学习React_native写过的测试放和看过的资料在这里,供大家参考 . 我整理的要学RN 之前,最好要掌握的基础知识: HTML基础知识 CSS基础知识 Javascript 基础知识 Node JS基础

制作一个小黄鸭转圈跳舞的页面。

我们来制作一个小黄鸭转圈跳舞的页面. 分析一下 1.分析一下这个页面,要完成这些效果,一共需要3步: 把鸭子都放到一个盒子当中 在盒子里,把每个鸭子的位置摆好 让盒子旋转 2.让鸭子在盒子中的位置摆好,需要怎么做: 先让鸭子站在圆心的位置(需要先了解父相子绝定位方式) 沿一个方向移动一个半径的距离(3d) 每个鸭子旋转一个角度,让鸭子均匀的分布一圈 开始写代码 要用到的知识包括几个HTML标签和一部分的css知识. 先把图片放到页面里边. 先来在页面中添加一个img标签,将小黄鸭跳舞的gif图放

制作一个类似苹果VFL的格式化语言来描述UIStackView

在项目中总是希望页面上各处的文字,颜色,字体大小甚至各个视图控件布局都能够在发版之后能够修改以弥补一些前期考虑不周,或者根据统计数据能够随时进行调整,当然是各个版本都能够统一变化.看到这样的要求后,第一反应是这样的页面只能改成H5,或者尝试使用React Native来应对这种要求. 既然UIStackView已经提供了一种既先进又简洁的布局思路,为何不通过制作一个类似VFL这样的DSL语言来处理布局.这样不就能够通过下发一串DSL字符串的方式来进行内容样式甚至布局的更换,不用跟版,还能使多版本

制作一个听话的电影种子挖掘器

每次回到宿舍想看部电影才发现很长时间没有去bt站淘种子了, 然而天天去站上找适合自己类型的电影又是一件费时又费力的事儿, 所以周末花时间写了一个可配置的爬子, 能够根据不同人的不同需求去自动下载种子文件, 并且能够避免不同分类中的重复电影 后期还会加入下载队列的功能, 在检测宿舍无人用网的时候开启bt下载, 有人接入wifi就暂停 项目地址: https://github.com/hwding/btDigger , 众人拾柴火焰高, 欢迎共同制作... (爬子依赖'bt天堂'这个种子站) 运行起

SpringMVC实例:制作一个人员列表

目标:制作一个人员列表,可通过人员的id进行修改. 界面1: 界面2: 界面3: 一.利用myEclipse导入spring的特性后,让applicationContext.xml在WebRoot下. 二.过程: 1.建立index.jsp界面,使用jstl注解.(知识点C标签) 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%

【JSP】配置错误页面

1,使用JSP方式 如果配置是Jsp时,需要把isErrorPage设置为true, 以及设置 <%@ page language="Java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8" isErrorPage="true"%> 错误页面: <%@page import="java.io.PrintStream"

使用CSS3 制作一个material-design 风格登录界面

使用CSS3 制作一个material-design 风格登录界面 心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css3完成,还是遇到一些难点和bug,所以想笔记下来,以后方便查阅. 响应式设计 在这个页面中,使用下面3点来完成响应式设计 最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容. margin : 20px au

制作一个简洁的jquery插件

原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6efd3881d3397903e84752&scene=1&srcid=0125cT8n9FJMI1u2faaQgjcS&from=singlemessage&isappinstalled=0#wechat_redirect 英文原文链接:http://www.queness.co