# user-hub-frontend-master

**Repository Path**: Gigifactory/user-hub-frontend-master

## Basic Information

- **Project Name**: user-hub-frontend-master
- **Description**: 基于 React + Spring Boot 的用户统一集中接入平台，实现了用户注册、登录、查询等基础功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-05-04
- **Last Updated**: 2024-10-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Ant-Design

## README

# UserHub 前端项目



### 一、初始化项目

🕳️【注意⚠️】按照 ant design pro 官网最新 6 版本的文档初始化项目时，官方的脚手架不提供 umi3 版本，默认 umi4 版本，但 umi4 不支持 umi ui，所以一定要使用以下含 @3.1.0 的命令



1、终端执行 `npm i @ant-design/pro-cli@3.1.0 -g` 安装 pro-cli 脚手架

2、执行 `pro -v` 检查 pro-cli 版本

3、在**项目要生成的位置**打开终端，执行 `pro create user-hub-frontend-master` 创建项目

4、选择 umi3 ✅ or umi4

5、选择 simple ✅ or complete

6、idea 打开项目，可以看到 package.json 中 项目是 5 版本

![image-20240505230412765](../user-hub-frontend-master/readme.png)



### 二、安装依赖

执行 `yarn`



### 三、运行项目

package.json 执行 `start`（使用 mock 假数据），`start:dev`（不使用 mock 假数据）

【注意⚠️】node 版本要降到16（sudo n）



### 四、开启umi-ui

执行 `yarn add @umijs/preset-ui -D`

【注意⚠️】node 版本要升到18



### 五、项目瘦身

1、package.json 执行 `i18n-remove`、删除 `src/locales` 文件夹去除国际化
2、e2e 自动化测试
3、services - swagger 接口文档
4、config - oneapi.json 接口定义、config.ts 配置文件中 openApi:[] 部分删掉
5、tests 单元测试
6、jest.config.ts 单元测试配置
7、playwright.config.ts 自动化测试配置
8、mock 假数据



### 六、个性化（改系统名&logo）

1、全局替换 ant design pro/ant design -> UserHub 系统名
2、config - defaultSettings.ts 修改 title、logo、primaryColor
3、public - logo.svg、favicon.ico、pro_icon.svg 替换
4、src - pages - document.ejs 227行 src 修改成 `<%= context.config.publicPath +'pro_icon.svg'%>`、
26行 修改成 `<link rel="icon" href="<%= context.config.publicPath +'logo.svg'%>" type="image/x-icon" />`



### 七、跨域代理
1、后端项目 application.yml 配置文件中，配置跟路径 `server.servlet.context-path: /api`
2、前端项目 app.tsx 自定义 umi.request 请求配置 `export const request: RequestConfig = { timeout: 10000 }`
3、前端项目 proxy.ts 配置跨域代理
`
dev: {
    // localhost:8000/api/** -> http://localhost:8088/api/**
    '/api/': {
        // 要代理的地址
        target: 'http://localhost:8088',
        // 配置了这个可以从 http 代理到 https
        // 依赖 origin 的功能可能需要这个，比如 cookie
        changeOrigin: true,
    },
},
`



### 八、部署上线
1、准备：域名、云数据库 mysql8、云服务器 centos8

2、修改配置
2.1、前端项目
[1] app.tsx 35行 `alert(process.env.NODE_ENV);`，打印环境变量
[2] package.json 执行 `start`/`start:dev`，开发环境运行项目，环境变量输出为 `development`
[3] package.json 执行 `build` 构建打包项目，生成 dist 文件夹，gitignore 忽略 dist 文件夹 `# production /dist`，
右键 dist 文件夹 open with terminal 输入 `serve` (全局安装serve：`npm i -g serve`)，生产环境运行项目，环境变量输出为 `production`
[4] 根据环境变量不同，区分配置
1：请求前缀 🌟
app.tsx 配置 prefix
`
export const request: RequestConfig = {
timeout: 1000000,
prefix: process.env.NODE_ENV === 'production'? 'http://user-backend.gigi-code.asia' : undefined
}
`
2：配置
config - config.ts 公用配置、config.dev.ts 开发环境配置、config.production.ts 生产环境配置
2.2、后端项目
1、新建 application-prod.yml 生产环境配置，application.yml 公用配置
2、application-prod.yml 配置云数据库
`
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://cd-cdb-9atzowjw.sql.tencentcdb.com:28134/userhub
username: root
password: zyy123123&
`
3、执行 maven - package 打包项目，生成 target - jar 文件（勾选 toggle skip tests model 跳过单元测试）
4、右键 target open with terminal 输入 `java -jar user-hub-backend-master-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod` 运行项目，验证注册数据是否存储到云数据库

3、部署 【腾讯云-轻量应用服务器-应用模式-宝塔linux】