您现在的位置是：首页 > 文章详情

zlt-mp v5.5.0 发布，基于 Spring Cloud Alibaba 的微服务平台

日期：2022-11-14点击：305收藏

架构图

功能介绍 更新内容

更新内容

特性 / 增强

新增 ReactJS 前端工程(Ant Design Pro)
修复 oidc-sso 样例工程的数据问题
升级 spring-cloud 到 2020.0.6

更新内容

新增ReactJS前端工程

采用 Ant Design Pro 框架，基于 UmiJS v3.x 和 ProComponents 图表采用 Ant Design Charts

一、目录说明

考虑到react的复杂性，保留了layui版本的前端。

 │  ├─layui-web -- layui前端 │  │  ├─src │  │  │  ├─main │  │  │  │  ├─java -- java启动类 │  │  │  │  ├─resources -- 前端源码 │  │  │  │  │  ├─static -- 前端源码 │  ├─react-web -- react前端 │  │  ├─src │  │  │  ├─main │  │  │  │  ├─frontend -- 前端源码(Ant Design Pro) │  │  │  │  ├─java -- java启动类(集成frontend-maven-plugin)

二、运行方式

2.1. layui-web

以下 2 种运行方式，「选一种运行即可」。

2.1.1. 方式一：直接运行

运行类 com.central.web.BackWebApplication

基于 SpringBoot 内嵌的 web 容器运行。

2.1.2. 方式二：静态服务器运行

把 layui-web\src\main\resources\static 下的所有内容复制到类似 Nginx 之类的静态服务器运行。

2.1.3. 后端接口地址修改

修改 layui-web\src\main\resources\static\module\apiUrl.js 中的地址。

2.2. react-web

以下 3 种运行方式，「选一种运行即可」。

需要先安装 nodejs 官网地址：https://nodejs.org/en/download/
然后安装 「node_modules」：

在 react-web\src\main\frontend 目录下执行以下命令：

 //直接使用淘宝的镜像源 npm config set registry https://registry.npm.taobao.org/ // 安装 npm install

2.2.1. 方式一：本地运行

2.2.1.1. 运行

运行 frontend\start.bat 文件或者执行 npm start 命令。

运行成功后，浏览器访问：http://localhost:8066

2.2.1.2. 后端接口地址修改

修改 react-web\src\main\frontend\config\proxy.ts 中的地址。

2.2.2. 方式二：静态服务器运行

2.2.2.1. 源码编译

运行 frontend\build.bat 文件或者执行 npm run build 命令进行编译。

编译成功后，把 react-web\src\main\frontend\dist 下的所有内容复制到类似 Nginx 之类的静态服务器运行。

2.2.2.2. 后端接口地址修改

通过反向代理，例如 Nginx 的配置如下：

 location ~ ^/api-* {     proxy_set_header X-Real-IP $remote_addr;     proxy_set_header X-Real-Port $remote_port;     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;     proxy_pass http://127.0.0.1:9900; } location / {     root /usr/share/nginx/html;     index index.html;     expires 7d; }