前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ZLT-MP v5.5.0 发布

ZLT-MP v5.5.0 发布

作者头像
陶陶技术笔记
发布2023-01-11 15:34:00
4570
发布2023-01-11 15:34:00
举报
文章被收录于专栏:陶陶技术笔记陶陶技术笔记

架构图

功能介绍

更新内容

特性/增强

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

内容说明

新增ReactJS前端工程

采用 Ant Design Pro 框架,基于 UmiJS v3.xProComponents 图表采用 Ant Design Charts

一、目录说明

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

代码语言:javascript
复制
│  ├─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 目录下执行以下命令:

代码语言:javascript
复制
//设置使用淘宝的镜像源
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 的配置如下:

代码语言:javascript
复制
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;
}

配置了两条路由,页面请求的各个 api-xxx 地址重定向到指定的接口地址;其他的则访问静态文件。

2.2.3. 方式三:使用Java运行

模块已集成 Maven 插件 frontend-maven-plugin 用于编译前端代码。

由于需要安装前端环境并编译前端代码,「首次运行需要时间较长」

react-web 目录下执行 Maven 命令 mvn package 打包。

在target目录下生成 zlt-web-x.x.x.jar(springboot jar)。

代码语言:javascript
复制
java -jar zlt-web-5.4.0.jar

或者直接在IDE中运行 react-web\src\main\java\ui\ReactUiBootApplication.java

运行前必需先使用 Maven 对 react-web 工程进行编译或打包。

贡献列表

非常感谢以下同学对本版本的贡献:

  • @Gao Shan gs_ica@163.com
  • @qujay 371226673@qq.com

项目地址

Gitee地址:https://gitee.com/zlt2000/microservices-platform

Github地址:https://github.com/zlt2000/microservices-platform

项目文档

https://www.kancloud.cn/zlt2000/microservices-platform/919417

项目更新日志

https://www.kancloud.cn/zlt2000/microservices-platform/936235

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2022-11-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 陶陶技术笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 更新内容
    • 特性/增强
    • 内容说明
      • 新增ReactJS前端工程
        • 一、目录说明
          • 二、运行方式
            • 2.1. layui-web
            • 2.2. react-web
            • 2.2.1. 方式一:本地运行
        • 贡献列表
        • 项目地址
        • 项目文档
        • 项目更新日志
        相关产品与服务
        容器服务
        腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档