提交 f57fcc16 编写于 作者: Z zhult13

修改zlt-web说明

上级 b2f1e0f7
# Central-Platform UI
本模块是基于`企业级微服务框架`后端 API 所开发的前端项目。
采用[Ant Design Pro](https://pro.ant.design/)框架,基于[UmiJS v3.x](https://v3.umijs.org/)[ProComponents](https://procomponents.ant.design/);
图表采用[Ant Design Charts](https://charts.ant.design/)
## 一、目录说明
考虑到react的复杂性,保留了layui版本的前端。
```lua
├─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.2. react-web
**以下 3 种运行方式,选一种运行即可。**
需要先安装 `nodejs` 官网地址:https://nodejs.org/en/download/
#### 2.2.1. 方式一:本地运行
##### 2.2.1.1. 安装node_modules
执行以下命令:
```bash
npm install
```
##### 2.2.1.2. 运行
运行 `frontend\start.bat` 文件或者执行 `npm start` 命令。
运行成功后,浏览器访问:http://localhost:8066
 
#### 2.2.2. 方式二:静态服务器运行
运行 `frontend\build.bat` 文件或者执行 `npm run build` 命令进行编译。
编译成功后,把 `react-web\src\main\frontend\dist` 下的内容复制到类似 `Nginx` 之类的静态服务器运行。
 
#### 2.2.3. 方式三:使用Java运行
模块已集成Maven插件`frontend-maven-plugin`用于编译前端代码
>由于需要安装前端环境并编译前端代码,**首次运行需要时间较长**。
执行 maven 命令 `mvn package` 打包。
在target目录下生成zlt-web-x.x.x.jar(springboot jar)。
```bash
java -jar zlt-web-5.4.0.jar
```
或者直接在IDE中运行 `react-web\src\main\java\ui\ReactUiBootApplication.java`
> 运行前必需先使用 maven 对 react-web 工程进行编译或打包。
 
## 三、后端接口地址修改
两个前端默认请求的后端接口地址默认都是:http://127.0.0.1:9900/
### 3.1. layui-web
修改 `layui-web\src\main\resources\static\module\apiUrl.js` 中的地址。
 
### 3.2. react-web
修改 `react-web\src\main\frontend\config\proxy.ts` 中的地址。
 
## 四、More
开发参考
* [Ant Design Pro](https://pro.ant.design/) 开箱即用的中台前端/设计解决方案
* [UmiJS v3.x](https://v3.umijs.org/) 可扩展的企业级前端应用框架
* [Ant Design](https://ant.design/index-cn) 基于 Ant Design 设计体系的 React UI 组件库
* [ProComponents](https://procomponents.ant.design/) 基于 Ant Design 设计规范,提供更高程度的抽象,提供更上层的设计规范
* [Ant Design Charts](https://charts.ant.design/) 简单好用的 React 图表库
# Central-Platform UI
本模块是基于`企业级微服务框架`后端 API 所开发的前端项目。
采用[Ant Design Pro](https://pro.ant.design/)框架,基于[UmiJS v3.x](https://v3.umijs.org/)[ProComponents](https://procomponents.ant.design/);
图表采用[Ant Design Charts](https://charts.ant.design/)
## 1.目录说明
考虑到部署方便,集成了SpringBootWeb,目录结构基于Maven规范。
```lua
├─src -- 源码
├─main --
├─frontend -- 前端源码
├─java -- 后端源码
```
## 2.后端使用说明
模块已集成Maven插件`frontend-maven-plugin`用于编译前端代码
>由于需要安装前端环境并编译前端代码,首次运行需要时间较长
### 打包运行
```bash
mvn package
```
在target目录下生成zlt-web-5.4.0.jar(springboot jar)。
```bash
java -jar zlt-web-5.4.0.jar
```
### IDE中运行
如在本地开发,在运行`SpringBootApplication`前必须先执行
```bash
mvn compile
```
### 配置
前缀:`zlt.ui`
| 配置项 | 类型 | 是否必须 | 默认值 | 说明 |
|--------------|--------|------|-----|-------|
| path-context | String | 否 | "/" | 上下文路径 |
## 3.前端使用说明
所有前端代码在`frontend`目录下。
### 环境准备
安装 `node_modules`:
```bash
npm install
```
or
```bash
yarn
```
### 运行项目
```bash
npm start
```
### 编译项目
```bash
npm run build
```
### More
开发参考
* [Ant Design Pro](https://pro.ant.design/) 开箱即用的中台前端/设计解决方案
* [UmiJS v3.x](https://v3.umijs.org/) 可扩展的企业级前端应用框架
* [Ant Design](https://ant.design/index-cn) 基于 Ant Design 设计体系的 React UI 组件库
* [ProComponents](https://procomponents.ant.design/) 基于 Ant Design 设计规范,提供更高程度的抽象,提供更上层的设计规范
* [Ant Design Charts](https://charts.ant.design/) 简单好用的 React 图表库
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册