简单5分钟，将lowcode低代码融入到你的中后台管理系统

背景

你是否在做中后台项目中经常要重复做crud的业务逻辑，花费大量时间还时常有bug发生，但是现在只要几分钟就能让你快速连通前后端，拖拉拽实现后台业务逻辑。你就问香不香！

技术选型

🚀 选用百度出品的amis低代码开源框架, 基于amis-editor（React + TS），我们做的事情就是通过封装json数据上报、配置、自定义组件等，实现低代码管理后台实时更新，无需手动写json配置。如果你要在Vue中使用当然也可以。

👍 简单一句话： 你不用敲代码了！！

先附上github地址 github.com/ccj-007/low…

amis官方文档 github.com/baidu/amis

amis-editor编辑器 github.com/aisuda/amis…

在原框架上实现了哪些功能

1.支持url路由跳转对应的配置页面
2.支持历史记录修改
3.支持预览
4.支持重置
5.支持配置更新前端lowcode页面（不用敲代码喽！！！）
6.通过路由及项目名配置查询
7.支持切换环境

如何使用

 npm i //安装依赖npm run start //通过devserve启动前端页面npm run server//启动node服务，默认3001端口 

注意

1. 本地调试请在server文件夹下定义好文件名，本地调用通过文件名对应路由名。如果需要数据库连接，请定义好项目名和路由名。json配置在原来基础上，已经做了一个包裹, 核心数据配置在json属性内，为了方便定位以及后期维护扩展。

{"json": {"type": "page","title": "Hello world","body": []},"routeName": "test2.json","itemName": "cms2"
} 

核心

//src/App.tsximport React from 'react';
import { Editor } from 'amis-editor';
import './App.css'
import axios from 'axios'

interface StateType {json: anyrouteName: stringitemName: stringpreview: booleanhistoryList: any[]step: numbermaxHistoryNum: numberbaseURL: stringuseTestBaseURL: stringisLocalTest: boolean
}

class App extends React.Component&l