使用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,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...
随机推荐
- 蓝桥杯 十六进制转八进制(超大测试数据,java实现)
问题描述 给定n个十六进制正整数,输出它们对应的八进制数.输入格式 输入的第一行为一个正整数n (1<=n<=10). 接下来n行,每行一个由0~9.大写字母A~F组成的字符串,表示要转换 ...
- ClickOnce部署
(1):一些发布方式 ClickOnce是什么玩意儿,这个问题嘛,在21世纪的互联网严重发达的时代,估计也没有必要大费奏章去介绍了,弄不好的话,还有抄袭之嫌.因此,有关ClickOnce的介绍,各位朋 ...
- LINQ系列:Linq to Object聚合操作符
聚合函数在一系列的值上执行特定的运算,并返回单个值,如在给定元素的值上执行求和或计数运算. LINQ共有7种聚合操作符:Aggregate.Average.Count.LongCount.Max.Mi ...
- 【WP开发】加密篇:单向加密
单向加密,简单地说就是对数据进行哈希处理,平时我们见得较多的有MD5.SHA1等,都属于单向加密.上一篇文章中,老周跟大家扯了有关双向加密的事,本文咱们就扯一下单向加密吧. 要对数据进行哈希处理也不是 ...
- Android之登录那点事
随着互联网的高速发展,一个应用为了保护用户的隐私,通常会通过设置用户名+密码的验证方式保证用户隐私的相对安全,我知道一般网站的登录验证,通常会设置一个二维码,通过验证二维码,防止恶意软件通过机械程序, ...
- Codeforces Round #326 (Div. 2) B. Pasha and Phone C. Duff and Weight Lifting
B. Pasha and PhonePasha has recently bought a new phone jPager and started adding his friends' phone ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
- EntityFramework 外键值映射
如果在 EF OnModelCreating 中配置了实体外键映射,也就是 SQL Server 中的 ForeignKey,那么我们在添加实体的时候,主实体的主键值会自动映射到子实体的外键值,并且这 ...
- 小菜学习设计模式(二)—单例(Singleton)模式
前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...
- Mysql5.0没有nvarchar,national
mysql采用utf-8编码,而传统的数据库采用unicode,一个汉字要用两个unicode的char,而在mysql中由于使用了utf-8,所以无论汉字还是字母,都是一个长度的char,所以就不用 ...