# react-zh-tourism

**Repository Path**: react_18/react-zh-tourism

## Basic Information

- **Project Name**: react-zh-tourism
- **Description**: 旅游网demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-24
- **Last Updated**: 2025-08-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Redux

## README

## Available Scripts

In the project directory, you can run:`npm start`、`npm test`、`npm run build`

## 一、业务

1. 展示旅游路线

   - 主页搜索
   - 关键词搜索

2. 网站登录

   - 用户注册

3. 购物车结算

   - 添加购物车
   - 删除购物车 

4. 下单购买

   - 订单历史记录

## 二、模块

- 产品模块
- 用户模块
- 购物模块
- 订单模块

## 三、软件开发流程

1. 需求分析

   - PRD《业务需求文档》

2. 系统设计

   - 界面设计《UI 设计规范》
   - 需求设计 《需求设计规范》

3. 开发

   - 测试
   - 上线

## 四、开发过程

#### （1）项目搭建与首页开发

1. 项目初始化
2. 项目 header、content、footer 开发
3. 组件化

#### （2）路由搭建

1. 路由 link 与动态导航
   - 使用超链接代替导航中的 history.push
2. 路由初始化，配置 react-router
   - react-router 现在为 v6 版本，该项目使用 v5 版本
3. 基础路由
4. 页面导航
5. 页面导航 withRouter 与 useRouter

#### （3）state 与 redux

1. 【创建 state】creareStore
   - 链接：[redux](https://cn.redux.js.org/introduction/getting-started)
2. 【访问 state】获取 store
3. 【更新 state】Action 与 Reducer 处理
4. 【订阅 state】store 的连接与订阅
   - store.subscribe(this.handleStoreChange)
5. 【i18n】完成网站语言切换
   - 语言包作为静态资源单独保存：json、xml，切换语言时，语言文件随之切换
   - 方式： npm install react-i18next i18next --save
   - i18n 配置[react.i18next](https://react.i18next.com/guides/quick-start)
   - `withTranslation` 高阶组件。高阶函数完成语言配置的数据注入，并导出高阶组件
   - `WithTranslation` 为类型定义，定义在泛型
6. 【redux 重构】action 的拆分与统一
7. 【redux 封装】类组件中使用 react-redux
   - 使用其 provider，把 store 订阅从组件中剥离出来
   - connect 用来定义高阶组件类型。由两个按顺序调用的函数组成。第一个函数接受 mapState 和 mapDispatch 作为参数，并返回第二个函数。第二个函数接受要被包裹的组件，并返回一个新的包裹组件，该组件将来自 mapState 和 mapDispatch 的 props 向下传递。通常，这两个函数会一起调用，例如 connect(mapState, mapDispatch)(MyComponent)
     连接 store。`connect 其实是高阶函数组件，只是没有使用 withXXX 这样的命名规范，将 store 的 state 与 dispatch 联系起来`
   - useSelector 解决组件和 store 的耦合问题，从存储状态中读取一个值并订阅更新，而 useDispatch 返回存储的调度方法以允许调度操作。
   - 链接: [react-redux](https://react-redux.js.org/introduction/getting-started)
8. 【redux 封装】在函数式组建中使用 react-redux
   - 类组件中使用繁琐，充斥大量模版代码
   - 使用函数式组件，hooks 函数完成订阅和分发，避免大量模版代码

#### （4）redux

1. 【reducer 管理】combineReducers
2. 【中间件】使用 redux-thunk 中间价实现异步 action
   - redux-thunk 用于处理 reducer 无法处理的异步
3. 【中间件】自定义中间件 actionLog

#### （5） redux

1. 详情页搭建：页面框架、详情、日期选择
2. 【redux-toolkit】createSlice、reducer、与 immer
   - 链接：[redux-toolkit](https://cn.redux.js.org/redux-toolkit/overview/)
3. 【redux-toolkit】sotre 配置(configureStore)与异步处理(createAsyncThunk)

#### （6）布局

1. 【布局重构】页面布局
   - props.children
   - [链接]()
2. 【注册页面】
3. 【登录页面】登录登出
4. 【redux-persist】登录持久化
   - JWT 无状态登录，使用 localStorage
   - 链接:[redux-persist1](https://gitee.com/zhangwei227/redux-persist) 或者[redux-persist2](https://react-redux-firebase.com/docs/integrations/redux-persist.html)

#### （7）完善页面

1. 私有路由搭建
2. 购物车页面初始化、slice、加载、下单
3. 在线支付页面初始化
4. 订单 slice，完成在线支付

## 前端框架与库

- React ：项目核心框架，文件扩展名 .tsx 以及 index.tsx 中使用 React 和 ReactDOM 表明项目基于 React 开发。
- React Router ：版本为 v5，用于实现路由功能，完成页面导航和动态路由配置。
- Redux ：用于状态管理，结合 @reduxjs/toolkit 进行更高效的状态操作，还使用了 redux-thunk 处理异步 action。
- redux-persist ：用于登录状态持久化，搭配 JWT 和 localStorage 实现无状态登录。
- Ant Design ：UI 组件库
- i18next 和 react-i18next ：用于实现网站的多语言切换功能。
- Web Vitals ：用于测量和报告网页性能指标，如 CLS、FID、FCP 等。

### HTTP 请求
- Axios ：用于发起 HTTP 请求，处理与后端的数据交互。
- JWT-decode ：用于解码 JWT 令牌，处理用户认证信息。

### 开发工具
- ESLint ：结合 @typescript-eslint 插件，用于代码质量检查和规范。
- TypeScript Plugin CSS Modules ：支持在 TypeScript 中使用 CSS Modules。
- npm 或 yarn ：包管理工具，用于安装和管理项目依赖。


## api

- 旅游路线
  - 搜索
  - 获得
  - 推荐列表
- 身份认证
  - login
  - register
- 购物车

  - 获得
  - 批量删除
  - 删除
  - 添加
  - 结算

    主页、搜索页
    ![alt text](./src/assets/image.png)

    产品详情
    ![alt text](./src/assets/image-1.png)

    登录
    ![alt text](./src/assets/image-2.png)

    注册
    ![alt text](./src/assets/image-3.png)

    登录成功
    ![alt text](./src/assets/image-7.png)

    购物车
    ![alt text](./src/assets/image-4.png)

    在线支付
    ![alt text](./src/assets/image-5.png)

    订单历史
    ![alt text](./src/assets/image-6.png)