原文地址: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 hooktypescriptkoa2mysql 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 就可以创建数据表

基于AMIS 通过React、Node实现的的管理系统-冯金伟博客园

这里创建了chartuser 两个数据表
然后在user表里添加一条测试账号的数据,如下图所示

基于AMIS 通过React、Node实现的的管理系统-冯金伟博客园

4、启动项目

npm run start 启动前端项目
npm run server 启动server端项目
然后通过 http://localhost:8000 就可以访问项目了

5、项目展示

登录页面如下:

基于AMIS 通过React、Node实现的的管理系统-冯金伟博客园

账号密码 都是 test

列表页面如下,对看板的创建、删除、编辑、发布、撤销都在这个页面

基于AMIS 通过React、Node实现的的管理系统-冯金伟博客园

编辑页面如下, 可以编辑、保存、预览

基于AMIS 通过React、Node实现的的管理系统-冯金伟博客园

用测试数据生成的看板示例如下:

基于AMIS 通过React、Node实现的的管理系统-冯金伟博客园

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 端口号就可以访问了

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

总结与思考:

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