coder-hxl / airbnb

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

Airbnb

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

如果对您有帮助，可以给 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