原文地址：https://www.cnblogs.com/yalong/p/15479411.html
背景：
想自己實現一套完整的搭建系統，來應對常規的看板需求， 但是精力有限，所以想采用別人開發的搭建工具，特此 基於AMIS編輯器做了個簡單的管理系統，
可以生成、編輯由AMIS生成的看板，對於常規的看板完全需求可以使用該系統制作完成，解放了前端生產力。
想使用該系統還需要后端的配合，后端需要根據AMIS的數據格式要求返回數據
AMIS的示例看這個： https://baidu.gitee.io/amis/examples/index
AMIS官網： https://baidu.gitee.io/amis/zh-CN/docs/index
項目倉庫地址： https://github.com/YalongYan/amis-react-node
項目技術棧： react hook、 typescript、 koa2、mysql sequelize
1、安裝依賴
npm i
2、創建mysql數據庫
mysql數據庫的配置信息在 server/conf/db.js 里面
如下所示：
const { isProd } = require('../utils/env');
let MYSQL_CONF = {
host: 'localhost',
user: 'root',
password: '12345678',
port: '3306',
database: 'ugp',
};
if (isProd) {
// 生產環境的數據庫配置 這里先用本地配置代替了
MYSQL_CONF = {
host: 'localhost',
user: 'root',
password: '12345678',
port: '3306',
database: 'ugp',
};
}
module.exports = {
MYSQL_CONF,
};
這里生產環境和本地環境都寫成一樣的配置了，實際線上的配置可自行修改
3、通過sequelize 創建數據表
如下圖所示，在server/db目錄下執行 node sync.js 就可以創建數據表
這里創建了chart 和 user 兩個數據表
然后在user表里添加一條測試賬號的數據，如下圖所示
4、啟動項目
npm run start 啟動前端項目
npm run server 啟動server端項目
然后通過 http://localhost:8000 就可以訪問項目了
5、項目展示
登錄頁面如下：
賬號密碼 都是 test
列表頁面如下，對看板的創建、刪除、編輯、發布、撤銷都在這個頁面
編輯頁面如下， 可以編輯、保存、預覽
用測試數據生成的看板示例如下：
6、 script 命令介紹
- start 前端項目啟動
- umiBuild 前端代碼打包
- build 把前端代碼打包，並把打包后的index.html 移動到 server/views目錄下，作為server的靜態資源的入口文件
- prod 通過pm2 啟動項目，一般就是在生產環境上使用該命令，就可以node項目的守護進程
- debDebug node項目的熱更新啟動，平常開發node項目的時候用，可實現熱更新
- server 正常啟動node項目，這個不能熱更新，如果對node端代碼修改，需要重啟server才能生效
7、項目發布
在線上機器上執行 npm run build 打包前端代碼
然后執行 npm run prod 啟動pm2
該機器的ip 加上 1751 端口號就可以訪問了
項目整體做的比較簡單，可以在此基礎上繼續添加所需的功能，比如看板的權限控制、登錄體系的完善等
總結與思考：
搭建系統好多家都在做，其實搭建系統實現本身不難，難點在於需求的不確定性，這時候需要的是產品、開發、以及其他相關同學有搭建系統的意識，
搭建系統無非就是把常用的功能組件化，確實一般的需求也都是可以組件化的，當大家都有這個意識后，產品再提出需求就可以圍繞搭建系統來進行，
具體操作可以是：首先看下搭建系統的組件里是否可以滿足需求，如果滿足需求最好，如果不能滿足當前的需求，那么當前需求是否可以做成組件，積累到搭建系統中，
長此以往，搭建不僅可以推動公司需求往標准化發展，還可以積累搭建的組件，從而為開發同學減輕壓力