使用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,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...
随机推荐
- SSIS 参数的值
一,SSIS Parameter Value 的type 一个Parameter的Value共有三种类型,分别是Design Value,Server Value,Execution Value. D ...
- CSS系列:CSS3新增选择器
1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...
- 【求助】WPF 在XP下 有的Textbox光标会消失
最近做个项目,一直有一个问题没有解决,就是在XP下,有的Textbox里在文本框里没有东西的时候,会没有光标.不同的XP机器,失去光标的Textbox也不一样. 各位大师看下面的三张图,当Textbo ...
- Eclipse迁移到Android studio步骤如下:
一.从Eclipse中导出:1.将你的ADT插件版本升级到22.0以上.2.在Eclipse中,选择File-->Export.3.在弹出的导出窗口中,打开Android的文件夹,选择“Gene ...
- Backup Volume 操作 - 每天5分钟玩转 OpenStack(59)
本节我们讨论 volume 的 Backup 操作. Backup 是将 volume 备份到别的地方(备份设备),将来可以通过 restore 操作恢复. Backup VS Snapshot 初看 ...
- Web APi之认证(Authentication)两种实现方式后续【三】(十五)
前言 之前一直在找工作中,过程也是令人着实的心塞,最后还是稳定了下来,博客也停止更新快一个月了,学如逆水行舟,不进则退,之前学的东西没怎么用,也忘记了一点,不过至少由于是切身研究,本质以及原理上的脉络 ...
- android图片透明度跟缩放大小动画事件
概序 : 动画事件写在xml中,然后用AnimationUtils去加载动画事件,再监听动画结束事件,隐藏imageview. 1. player_double_click_animation.xml ...
- MySQL学习笔记四:字符集
1.字符集就是字符和其编码的集合,查看数据库支持的字符集 show character set 2.查看服务端启动时默认的字符集 mysql> show variables like 'char ...
- Lua 学习笔记(九)协同程序(线程thread)
协同程序与线程thread差不多,也就是一条执行序列,拥有自己独立的栈.局部变量和命令指针,同时又与其他协同程序共享全局变量和其他大部分东西.从概念上讲线程与协同程序的主要区别在于,一个具有多个线程的 ...
- canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...