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

简介: 背景 上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了11116的码农之旅。 因为公司做的是直播相关的业务,所以伴随着直播,不定期的就会有运营活动-.- 但是这类活动留给码农的开发周期都不太长,上半年比较激烈,基本一个月要上个三四个的活动。

背景

上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了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

目录
相关文章
create-react-app配置环境变量
create-react-app配置环境变量
240 0
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
748 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
6月前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
179 58
|
6月前
|
前端开发
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
167 57
|
6月前
|
前端开发 UED
在React Router中,如何处理路由的404错误页面?
在React Router中,如何处理路由的404错误页面?
243 57
|
6月前
|
前端开发
如何在React Router中进行嵌套路由配置?
如何在React Router中进行嵌套路由配置?
332 57
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
136 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
前端开发
React页面跳转取消上一个页面的所有请求
React页面跳转时取消上一个页面的所有axios请求,通过axios拦截器设置cancelToken,并在页面跳转时调用cancel函数取消未完成的请求。
259 2
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
419 2
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式:通过在package.json中添加代理配置,以及通过创建setupProxy.js文件来实现更复杂的代理规则。
606 2