# antd-pro-helper

**Repository Path**: xiaolongzaixian/antd-pro-helper

## Basic Information

- **Project Name**: antd-pro-helper
- **Description**: Ant Design Pro 最佳实践
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 13
- **Forks**: 4
- **Created**: 2020-01-26
- **Last Updated**: 2024-07-15

## Categories & Tags

**Categories**: backend

**Tags**: None

## README

<h1 align="center">Antd Pro 最佳实践</h1>

<div align="center">

</div>

## 依赖关系

#### Antd 基础框架

Ant Design Pro

[https://github.com/ant-design/ant-design-pro](https://github.com/ant-design/ant-design-pro) 

#### API接口服务

SpringBoot Antd Pro

[https://gitee.com/xiaolongzaixian/springboot-antd-pro.git](https://gitee.com/xiaolongzaixian/springboot-antd-pro.git) 

## 演示功能

```
- DEMO页面
  - 基础表单
  - 复杂表单(BackTop组件)
  - 查询表格
- 测试功能
  - 基础表单
  - 查询表格(跨域)
- 演示功能(CRUD访问RESTful接口)
  - 新增表单
  - 查询表格
  - 查看详情
```

用户主页

<img src="http://xiaolongzaixian.gitee.io/imagedb/img/antd-pro-helper/2020013101.png" width = "1024" height = "512"/>

表格列表

<img src="http://xiaolongzaixian.gitee.io/imagedb/img/antd-pro-helper/2020013103.png" width = "1024" height = "512"/>

## 开发内容

#### 功能特性

- 支持多环境部署：dev-开发环境、pro-生产环境

- 支持跨域访问API接口：config.xxx.js配置proxy

- 支持RESTful接口：演示功能(CRUD)

- 预留token扩展参数Auth-Token

#### 优化

- 调整登录后主页整体布局、菜单

- 表格组件显示行号

- 分页组件显示数据总数、当前页起止数据序号

- 分页组件修改可选分页参数[10,20,50,100]

#### 漏洞修复

暂无~

## 快速开发

```bash
$ git clone https://gitee.com/xiaolongzaixian/antd-pro-helper.git --depth=1
$ cd antd-pro-helper
$ npm install
```

推荐IDE: WebStorm

## 编译运行

#### Node.js使用npm命令编译、部署

```bash
$ npm start
```
默认访问地址：http://localhost:8000


#### Nginx部署html等静态文件

npm命令编译生成html等静态文件

```bash
$ npm run build
```

html等静态文件目录为dist，包含index.html等

将html等静态文件拷贝到nginx目录下即可


#### Spring Boot部署html等静态文件

npm命令编译生成html等静态文件

Spring Boot工程可选的静态资源目录如下：
- src/main/resources/static
- src/main/webapp

将html等静态文件拷贝到Spring Boot工程的静态资源目录下即可

## 常见问题

#### Node.js运行如何全部访问后台/api/xxx接口

Antd Pro请求数据的/api/xxx接口，默认访问mock数据接口，需要禁用mock数据

```bash
$ npm run start:no-mock
```

#### Nginx部署运行访问不到/api/xxx接口

除了安装官方说明部署html等静态文件之外，还需要在nginx中设置后台API接口代理

Nginx代理后台API接口参考设置如下：

```bash
location /api/{
    proxy_pass http://localhost:9080/api/; #后台API接口实际访问地址
    proxy_set_header X-Real-Ip $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr; 
}
```

#### SpringBoot开发后台接口返回数据格式

Antd组件的数据参数都支持扩展，可以结合项目情况进行定义

例如表格组件的JSON数据格式默认为

```bash
{
    list:[],
    pagination: {current: 1, pageSize: 10, total: 100}
}
```