使用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
使用React制作一个可配置的页面生成器[0]的更多相关文章
- D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)
现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...
- 集成omnibus-ctl+ chef 制作一个可配置的软件包
前边有写过使用omnibus-ctl 制作软件包的,但是当时没有集成chef,只有一个空壳子,实际上omnibus-ctl 已经内置 了对于chef 的操作(但是我们还需要在添加一个依赖),以下简单说 ...
- D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例: //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...
- D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)
上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html 这一章做散点图. 散点图(Scatter Chart),通常是一横一竖 ...
- vue.js 作一个用户表添加页面----初级
使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...
- 我学React Native开发的经历(一) 第一周学习,环境搭建及demo1,一个导航跳转页面
大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多 ...
- flutter 制作一个用户登录页面
flutter 制作一个用户登录页面 用户登录效果图如下: 登录页面如下: import 'package:flutter/material.dart'; import 'package:flutte ...
- 制作一个类似苹果VFL的格式化语言来描述UIStackView
在项目中总是希望页面上各处的文字,颜色,字体大小甚至各个视图控件布局都能够在发版之后能够修改以弥补一些前期考虑不周,或者根据统计数据能够随时进行调整,当然是各个版本都能够统一变化.看到这样的要求后,第 ...
- Swift 制作一个新闻通知中心插件1
使用 Swift 制作一个新闻通知中心插件(1) 随着 iOS 8 的发布,苹果为开发者们开放了很多新的 API,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...
随机推荐
- Entity Framework Code First属性映射约定
Entity Framework Code First与数据表之间的映射方式有两种实现:Data Annotation和Fluent API.本文中采用创建Product类为例来说明tity Fram ...
- 字典 Key值转换为数组
public static string[] GetCategories() { Dictionary<string, int> itemMap = new Dictionary<s ...
- 区分元素特性attribute和对象属性property
× 目录 [1]定义 [2]共有 [3]例外[4]特殊[5]自定义[6]混淆[7]总结 前面的话 其实attribute和property两个单词,翻译出来都是属性,但是<javascript高 ...
- Icinga使用总结
1. 在定义命令的时候,往往需要修改commands.cfg配置文件,如果使用NPRE插件监控远程服务器,其实,定义命令也没这么复杂 commands.cfg中有关check_nrpe的命令定义如下: ...
- jdk8中java.util.concurrent包分析
并发框架分类 1. Executor相关类 Interfaces. Executor is a simple standardized interface for defining custom th ...
- java 中多线程之间的通讯之生产者和消费者 (多个线程之间的通讯)
在真实开发 中关于多线程的通讯的问题用到下边的例子是比较多的 不同的地方时if 和while 的区别 如果只是两个线程之间的通讯,使用if是没有问题的. 但是在多个线程之间就会有问题 /* * 这个例 ...
- SSH框架入门知识总结
chap01 领略清晰的MVC流程----Struts讲解技术资料.pdf 提取码:wwi5 chap02 体验控制反转的理念----Spring介绍技术文档.pdf 提取码:0mp3 ch ...
- ZOJ Problem Set - 1078 Palindrom Numbers
属于水题,主要是涉及到回文问题. 这里标注下进制转换的方法: while(n) { p[i]=n%basis; n/=basis; } 见代码: #include <stdio.h> in ...
- selenium操作隐藏的元素
有时候我们会碰到一些元素不可见,这个时候selenium就无法对这些元素进行操作了.例如,下面的情况: Python 页面主要通过“display:none”来控制整个下拉框不可见.这个时候如果直接操 ...
- 一台电脑上的git同时使用两个github账户
需求: 公司有github账号,自己有github账号,想在git上同时使用,两者互不干扰. 思路: 管理两个SHH key. 解决方案: 一.生成两个SSH key 为了举例方便,这里使用“one” ...