# 租房

**Repository Path**: gccBlog/xyzf

## Basic Information

- **Project Name**: 租房
- **Description**: 小雅租房项目 前后端分离 
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 3
- **Created**: 2021-08-11
- **Last Updated**: 2024-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目名称: 小雅租房

## 技术栈：

### 前端：

#### 前台：

|            使用组件             |       使用的目的       |
| :-----------------------------: | :--------------------: |
|             react17             |        基础框架        |
|              redux              |      全局状态管理      |
|           react-redux           | react 对 redux 的封装  |
|              yarn               |         包管理         |
|     ant-design-mobile - ant     |   ant 移动端 ui 框架   |
|        react-router-dom         |     react 路由导航     |
|              Sass               |      css 样式包装      |
|          React-BMapGL           |  百度地图 react 版本   |
|          react-sticky           |        吸顶效果        |
|              axios              |      发送网络请求      |
|        react-virtualized        |         长列表         |
|          react-spring           |       react 动画       |
| formik ( validationSchema+ yup) |        表单验证        |
|            AuthRoute            | （自己封装的）路由鉴权 |
|                                 |                        |

#### 后台：还没开打

## 开发日志：

### 第一天：

0. 搭建基础架构
1. 实现 TabBer 功能以及路由跳转
2. 对 TabBer 组件进行进一步封装，并将其中部分属性放入到 redux 进行保存方便日后使用
3. 对 react-redux 进行代码优化，减少代码量

### 第二天

0. 进一步封装 axios
1. 优化轮播图的搭建，并解决 bug
2. 搭建导航菜单
3. 加入 Sass
4. 搭建租房小组的前端功能--》根据地理位置去获取推荐的租房信息
5. 实现最新咨询的功能 --》根据地区获取地区的最新咨询
6. 实现搜索框的功能==》后端应该用 es 来处理

### 第三天

0. 优化搜索框，提取成组件
1. 整合 React-BMapGL，并搭建 map 组件
2. 优化定位信息，并配置 react-redux 的中城市信息
3. 获取城市列表数据，并进行模块提取和优化
4. 使用 react-virtualized 实现局部数据渲染,以优化大列表性能

### 第四天

0. AutoSizer 组件使用来调整组件模块大小
1. 增加右侧索引列表以及实现其功能,包括滚动屏幕来改变右侧索引，以及点击右侧索引来改变左侧列表
2. 解决 2 个 bug 关于获取当前位置的 😊
3. 开发 MyBombBox 组件，来显示当前的索引以及未来的信息显示
4. 优化位置的业务逻辑，cache_city_msg 用来存放选择的位置信息
5. 思考 localStore 和 react-redux 同时储存当前城市信息

   > 只有遇到 React 实在解决不了的问题，你才需要 Redux
   > 下面就不需要用
   > 用户的使用方式非常简单
   > 用户之间没有协作
   > 不需要与服务器大量交互，也没有使用 WebSocket
   > 视图层（View）只从单一来源获取数据

之前使用 react-redux 有点意气用事，画蛇添足,这个项目中用到的用来练手与熟悉，切记以后这样 😭

### 第五天

0. 又做了一个 NavBar 这个是固定位置的，
1. withRouter 高阶组件可以避免获取不到路由信息，但是因为设计问题 没有用到 哈哈 😊
2. 添加 props-types 校验,
3. CSS IN JS 中的 CSS Modules 解决组件间样式冲突，之前截图冲突是在组件外侧套一个 wrapper。
4. 第三点 =m=，顺便再修改一个 bug
5. 增加地图样式覆盖组件 MyCustomOverlay ，并美化 😀
6. 反转 百度地图 的自定义覆盖样式 没有 onClick 的功能，想办法也不行，我的天/(ㄒ o ㄒ)/~~
7. 改用 Label 文本标注 来实现

### 第 六 天

0. 添加地区覆盖物渲染，我的天呀，写了一早上结果结果馁，改了一早上/(ㄒ o ㄒ)/~~到下午才出来效果，React-BMapGL 文档好差

### 第 七 天

0. 发现 compoments 拼写错误 为时已晚=m=
1. 废除又一个组件，编写新的组件并适配，实现小区房源信息展示功能
2. 优化地图上的用户体验
3. 增加生产和环境变量配置
4. 误删除 2 个组件/(ㄒ o ㄒ)/~~ 对不起 好在核心组件还在 日后再补
5. 误删除原因 =》想把公用组件和页面单用组件分开 然后编译器就鬼畜了就没了~~~~马上添加 gitee
   https://gitee.com/gccBlog/xyzf
6. 添加 react-sticky 来做吸顶效果
7. 制作过滤器 Filter 组件中，今天是完不成了,最后优化了一下地区选择功能 886

### 第 八 天

1. 本来打算做一个通用的组件去做 Filter 中的 PickView 但是 想了想后期的定制化开发，就做了四个组件
2. 现阶段 组件复用的还是少，组件主要用来组成一个页面，就像各自扎堆的孩子
3. 1 做 4 个不显示 做了个通用的
4. 经验+1 封装尽量要抽象一点，组件如果不能服用 就是构件了 切记 💪
5. 重构 Filter 组件中！！！
6. 重构失败 继续！！
7. 公用组件 不共用 嘿嘿 就是玩=，=

### 第 九 天

1. 完成并且优化 Filter 组件，完美~
2. 更完美了~ 就是后端请求返回来数据的事件有点长
3. 一下午的尝试 最总还是没有解决 2 个组件的兼容问题，然后进行了版本的回退
4. 自己开发了个长列表 效率是真的差/(ㄒ o ㄒ)/~~

### 第十天

0. 研究了 2 天的长列表，最后在无尽的修改下崩溃了，最后还是沿用自己的第二版代码，实测效率还可以呢，而且没有什么 bug,修改起来也方便 😀，还有七夕快乐，我爱我的胡宝贝
1. 审查代码的是否可以适应各个手机和平板，结果还是很好的，除了 IPhone4
2. 添加 react-spring 组件来优化用户体验

### 第十一天

0. 编写房子详情页面
1. 更加熟练的掌握了布局和页面样式的编写，以及数据的处理

### 第十二天

0.  详情页面的的收尾阶段
1.  完成注册和登录模块，登录模块使用自己的表单认证(其实准确的说是数据认证)，注册模块采用 formik ( validationSchema+ yup) 来做表单验证(不好用呀/(ㄒ o ㄒ)/~~)
2.  1 中其实回了之后还是很好用的 😊，然后使用 formik 中的 Form 和 Field 简化了代码
3.  进一步完善登录和注册模块，但是 找回密码模块没有写，等写后端的时候写呢 💪

### 第十三天

0. 完成登录功能以及退出功能
1. 封装 AuthRoute 组件用来，路由鉴权
2. 完成收藏房屋功能

### 第十四天

0. 完成房源发布功能
1. 解决房屋详情模块数据请求的 BUG
2. 完善发布房源的数据，但是因为服务器还没开始动，图片功能暂未开发，
3. 优化，实现按需加载 ant-mobile
4. 优化，基于路由的代码优化 React.lazy()记得使用 Suspense 包裹

示例图片：

![img1](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%281%29.png)
![img2](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%282%29.png)
![img3](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%283%29.png)
![img4](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%284%29.png)
![img5](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%285%29.png)
![img6](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%286%29.png)
![img7](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%287%29.png)
![img8](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%288%29.png)
![img9](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%289%29.png)
![img10](https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1%20%2810%29.png)
!