使用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,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...
随机推荐
- 【WP8.1开发】用手机来控制电脑的多媒体播放
为了用电脑看电影时方便控制,我就突发其想,做一个手机app来通过无线网络远程调节电脑上的音量.后来进行尝试成功后,我就想,光是调音量似乎单调了些,就把播放/暂停,上一首,下一首,等多媒体控制功能也加上 ...
- Newtonsoft.json中 linq to json 和序列化哪个快?
Newtonsoft.json是最常用的json序列化组件,当然他不是最快的,但是是功能最全的.. using System; using System.Collections.Generic; us ...
- CSS3 Media Queries实现响应式布局
概念我就不在这里写啦.大家可以看看以下网页: http://www.runoob.com/cssref/css3-pr-mediaquery.html http://www.w3cplus.com/c ...
- 前端学PHP之命名空间
× 目录 [1]定义 [2]多命名空间 [3]名称解析[4]访问内部元素[5]全局空间[6]别名和导入 前面的话 从广义上来说,命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念.例如,在 ...
- 被嫌弃的eval和with
× 目录 [1]eval [2]with 前面的话 eval和with经常被嫌弃,好像它们的存在就是错误.在CSS中,表格被嫌弃,在网页中只是用表格来展示数据,而不是做布局,都可能被斥为不规范,矫枉过 ...
- JavaScript中的日期处理注意事项
在业务逻辑比较多的系统里面,一般都会涉及到日期的处理.包括选择起始日期和结束日期,结束日期要大于起始日期,日期的显示和输入等. 输入这一块基本都是使用jQuery datetimepicker,后来系 ...
- Kubernetes集群搭建过程中遇到的问题
1. 创建Nginx Pod过程中报如下错误: #kubectlcreate -f nginx-pod.yaml Error from server: error when creating &quo ...
- spring笔记--通过注解(annotation)配置Bean
Spring能够在classpath下自动扫描,侦测和实例化具有特定注解的组件,这在Spring中成为组件扫描(Component scanning). 特定组件的注解包括: @Component:基 ...
- webmagic的设计机制及原理-如何开发一个Java爬虫
之前就有网友在博客里留言,觉得webmagic的实现比较有意思,想要借此研究一下爬虫.最近终于集中精力,花了三天时间,终于写完了这篇文章.之前垂直爬虫写了一年多,webmagic框架写了一个多月,这方 ...
- Linux 学习笔记
Linux学习笔记 请切换web视图查看,表格比较大,方法:视图>>web板式视图 博客园不能粘贴图片吗 http://wenku.baidu.com/view/bda1c3067fd53 ...