原文地址：https://www.cnblogs.com/yalong/p/15479411.html

背景：

想自己實現(xiàn)一套完整的搭建系統(tǒng)，來應(yīng)對常規(guī)的看板需求， 但是精力有限，所以想采用別人開發(fā)的搭建工具，特此 基于AMIS編輯器做了個簡單的管理系統(tǒng)，
可以生成、編輯由AMIS生成的看板，對于常規(guī)的看板完全需求可以使用該系統(tǒng)制作完成，解放了前端生產(chǎn)力。
想使用該系統(tǒng)還需要后端的配合，后端需要根據(jù)AMIS的數(shù)據(jù)格式要求返回數(shù)據(jù)

AMIS的示例看這個： https://baidu.gitee.io/amis/examples/index

AMIS官網(wǎng)： https://baidu.gitee.io/amis/zh-CN/docs/index

項目倉庫地址： https://github.com/YalongYan/amis-react-node

項目技術(shù)棧： react hook、 typescript、 koa2、mysql sequelize

---

1、安裝依賴

npm i 

2、創(chuàng)建mysql數(shù)據(jù)庫

mysql數(shù)據(jù)庫的配置信息在 server/conf/db.js 里面
如下所示：

const { isProd } = require('../utils/env');

let MYSQL_CONF = {
  host: 'localhost',
  user: 'root',
  password: '12345678',
  port: '3306',
  database: 'ugp',
};

if (isProd) {
  // 生產(chǎn)環(huán)境的數(shù)據(jù)庫配置 這里先用本地配置代替了
  MYSQL_CONF = {
    host: 'localhost',
    user: 'root',
    password: '12345678',
    port: '3306',
    database: 'ugp',
  };
}

module.exports = {
  MYSQL_CONF,
};

這里生產(chǎn)環(huán)境和本地環(huán)境都寫成一樣的配置了，實際線上的配置可自行修改

3、通過sequelize 創(chuàng)建數(shù)據(jù)表

如下圖所示，在server/db目錄下執(zhí)行 node sync.js 就可以創(chuàng)建數(shù)據(jù)表

這里創(chuàng)建了chart 和 user 兩個數(shù)據(jù)表
然后在user表里添加一條測試賬號的數(shù)據(jù)，如下圖所示

4、啟動項目

npm run start 啟動前端項目
npm run server 啟動server端項目
然后通過 http://localhost:8000 就可以訪問項目了

5、項目展示

登錄頁面如下：

賬號密碼 都是 test

列表頁面如下，對看板的創(chuàng)建、刪除、編輯、發(fā)布、撤銷都在這個頁面

編輯頁面如下， 可以編輯、保存、預(yù)覽

用測試數(shù)據(jù)生成的看板示例如下：

6、 script 命令介紹

start 前端項目啟動
umiBuild 前端代碼打包
build 把前端代碼打包，并把打包后的index.html 移動到 server/views目錄下，作為server的靜態(tài)資源的入口文件
prod 通過pm2 啟動項目，一般就是在生產(chǎn)環(huán)境上使用該命令，就可以node項目的守護進程
debDebug node項目的熱更新啟動，平常開發(fā)node項目的時候用，可實現(xiàn)熱更新
server 正常啟動node項目，這個不能熱更新，如果對node端代碼修改，需要重啟server才能生效

7、項目發(fā)布

在線上機器上執(zhí)行 npm run build 打包前端代碼
然后執(zhí)行 npm run prod 啟動pm2
該機器的ip 加上 1751 端口號就可以訪問了

項目整體做的比較簡單，可以在此基礎(chǔ)上繼續(xù)添加所需的功能，比如看板的權(quán)限控制、登錄體系的完善等

總結(jié)與思考：

搭建系統(tǒng)好多家都在做，其實搭建系統(tǒng)實現(xiàn)本身不難，難點在于需求的不確定性，這時候需要的是產(chǎn)品、開發(fā)、以及其他相關(guān)同學(xué)有搭建系統(tǒng)的意識，
搭建系統(tǒng)無非就是把常用的功能組件化，確實一般的需求也都是可以組件化的，當大家都有這個意識后，產(chǎn)品再提出需求就可以圍繞搭建系統(tǒng)來進行，
具體操作可以是：首先看下搭建系統(tǒng)的組件里是否可以滿足需求，如果滿足需求最好，如果不能滿足當前的需求，那么當前需求是否可以做成組件，積累到搭建系統(tǒng)中，
長此以往，搭建不僅可以推動公司需求往標準化發(fā)展，還可以積累搭建的組件，從而為開發(fā)同學(xué)減輕壓力

總結(jié)

以上是生活随笔為你收集整理的基于AMIS 通过React、Node实现的的管理系统的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。