# airbnb

**Repository Path**: coderhxl/airbnb

## Basic Information

- **Project Name**: airbnb
- **Description**: Airbnb —— 基于 React、React Router、TypeScript、Redux Tookit、Ant Design、Material UI  等技术开发。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2022-11-08
- **Last Updated**: 2024-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Airbnb

Airbnb 是基于 React、TypeScript、React Router、Redux Tookit、Styled Components、Ant Design、 Material UI 等技术实现的高仿 Airbnb 房源网，拥有房源搜索、地区房源、更多地区房源、房源详情、个人信息。

> 如果对您有帮助，可以给 [Airbnb 存储库](https://github.com/coder-hxl/airbnb) 点个 star 支持一下！

## 技术栈

- 开发工具: Visual Studio Code
- 编程语言: TypeScript 4
- 构建工具: Create React App
- 前端框架: React 18
- 路由工具: React Router Dom
- 状态管理: Redux Tookit
- UI 框架: Ant Design / Material UI
- CSS 预编译: Less
- CSS 编写方式: Styled Components
- HTTP 工具: Axios

**更多请查看 package.json 文件**

## 介绍

进行模糊讲解，具体实现方式需到对应的源文件查看。

### 组件

#### 通用组件

##### ScrollView 组件

该组件时一个滚动组件，用于需要横向滚动内容，并且左右侧控件在有可以的滚动内容才会显示。

##### Indicator 组件

该组件是一个轮播图的指示器组件，其特点在当 items 超出容器时，在滚动时，多出的 item 会一直在容器中间滚动，开头 item 和结尾 item 不受影响。

##### PictureBorwser 组件

该组件是一个图片浏览器，使用 Indicator 组件当底部的预览器。

**更多请查看 src/base-ui**

#### 特殊组件

##### Header 组件

该组件用于进行搜索房源、控制登录弹窗等操作。中间的搜索框包含两种动画，展示效果由 Store 的 Main State 属性决定, 可设置 fixed 和 alpha 属性。

##### RoomItem 组件

该组件用作展示一个房间。会根据图片数量是否展示轮播效果，并使用 Indicator 组件当指示器。被点击时跳转到 Room 页。

**更多请查看 src/components**

### 页面

- 头部: 使用 Header 组件。

- 内容: 通过 Router 展示 Home / Area / Room / User。

- 底部: 使用 Footer 组件。

##### Home

- 数据来源：派发 Action (发起网络请求将 Home 数据存入 Store 的 Home State 中)，并从 Store 的 Home State 获取数据。
- 内容：
  - Header：修改 Header 组件，派发 Action 将 Store 的 Main State 的 fixed 和 alpha 设置为 true 。
  - Banner：展示大长图 。
  - 精彩之地：请求 `/api/home/wonderfulplace` 。使用 HomeSectionV2 组件展示房源数据。
  - 热门目的地：请求 `/api/home/hotplace` 。使用 HomeSectionV2 组件展示房源数据。
  - 你可能想去：请求 `/api/home/longfor` 。使用 HomeLongFor 组件展示地区数据。
  - 高分好评：请求 `/api/home/highscore` 。使用 HomeSectionV1 组件展示房源数据。
  - 高性价比：请求 `/api/home/goodprice` 。使用 HomeSectionV1 组件展示房源数据。
  - plus 房源：请求 `/api/home/plus` 。使用 HomeSectionV3 组件展示房源数据。
- 子组件
  - HomeSectionV1：内部使用 RoomItem 组件展示房间数据。
  - HomeSectionV2：内部使用 ScrollView 组件对 Tab 栏数据进行展示，使用 RoomItem 组件展示房间数据。
  - HomeSectionV3：内部使用 ScrollView 组件对 RoomItem 组件进行展示。
  - HomeLongFor：内部使用 ScrollView 组件对地区数据进行展示。

##### Area

- 数据来源：派发 Action (根据 offset 和 size 发起网络请求将 Area 数据存入 Store 的 Area State 中)，并从 Store 的 Area State 获取数据。
- 内容：
  - Header：修改 Header 组件，派发 Action 将 Store 的 Main State 的 fixed 设置为 true，alpha 设置为 false。
  - 区域房间：请求 `/api/area/:areaName` 。使用 RoomItem 组件展示房间数据。
  - 分页器组件：使用 Material UI 的 Pagination 组件。

##### Room

- 数据来源：从 Store 的 Room State 获取数据。
- 内容：
  - Header：修改 Header 组件，派发 Action 将 Store 的 Main State 的 fixed 和 alpha 设置为 false。
  - 房间图像：请求 `/api/room/193581217` 。点击图片或查看图片，会显示 PictureBorwser 组件。
  - 详情信息：请求 `/api/room/193581217` 。
  - 评论数据：请求 `/api/room/review` 。使用 Material UI 的 Pagination 组件控制评论分页展示。

##### User

- 数据来源：派发 Action (根据用户 id 发起网络请求将 User 数据存入 Store 的 User State 中)，并从 Store 的 Home State 获取数据。
- 内容：
  - Header：修改 Header 组件，派发 Action 将 Store 的 Main State 的 fixed 和 alpha 设置为 false。
  - 侧边栏：请求 `/api/user/:userId` 。展示用户头像等，使用 Ant Design 进行更新头像和裁剪头像。
  - 信息：请求 `/api/user/:userId` 。展示用户信息，更新信息功能。

## API 文档

API 文档: https://documenter.getpostman.com/view/19782726/2s8Z6yWsaF

## 后端

Airbnb-API Github 地址: https://github.com/coder-hxl/airbnb-api

Airbnb-API Gitee 地址: https://gitee.com/coderhxl/airbnb-api