Javascript

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

本文主要是介绍基于AMIS 通过React、Node实现的的管理系统,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

背景:

基于AMIS编辑器做了个简单的管理系统,可以生成、编辑由AMIS生成的看板

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 就可以创建数据表

这里创建了chartuser 两个数据表
然后在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 端口号就可以访问了

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

这篇关于基于AMIS 通过React、Node实现的的管理系统的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!