基于AMIS 通过React、Node实现的的管理系统

原文地址：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 端口号就可以访问了

项目整体做的比较简单，可以在此基础上继续添加所需的功能，比如看板的权限控制、登录体系的完善等

总结与思考：

搭建系统好多家都在做，其实搭建系统实现本身不难，难点在于需求的不确定性，这时候需要的是产品、开发、以及其他相关同学有搭建系统的意识，
搭建系统无非就是把常用的功能组件化，确实一般的需求也都是可以组件化的，当大家都有这个意识后，产品再提出需求就可以围绕搭建系统来进行，
具体操作可以是：首先看下搭建系统的组件里是否可以满足需求，如果满足需求最好，如果不能满足当前的需求，那么当前需求是否可以做成组件，积累到搭建系统中，
长此以往，搭建不仅可以推动公司需求往标准化发展，还可以积累搭建的组件，从而为开发同学减轻压力