coder-hxl / airbnb

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

Home Page:http://47.113.218.204:3001

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About

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

http://47.113.218.204:3001


Languages

Language:TypeScript 98.1%Language:HTML 0.7%Language:JavaScript 0.6%Language:Less 0.6%