项目在线浏览地址(推荐使用移动端设备:):http://8.210.122.12:9126
- 用户名:test2
- 密码: test2
- React
- React-router-dom
- ant design mobile
- jsx
- 百度地图API
- scss
- react-vertualize
- render-props
- HOC
- redux
- lazy-load
- NodeJS
- Mysql
- koa
node_modules nodejs模块依赖
public 公共资源文件
/src
/assets 资源文件,比如:图片、字体等
/components 公共组件,多个页面中都需要用到的组件
/pages 页面组件
/utils 工具函数、方法
App.js 根组件(用来配置路由等)
index.js 整个项目的入口文件
.env.development 开发环境环境变量配置
.env.production 生产环境环境变量配置
npm install
安装node依赖模块yarn start
或者npm start启动项目
- 或者使用
npm build
打包该项目, 把打包生成的dist文件夹下面的文件上传到web服务器中即可运行
- 使用react-router-dom中的BrowserRouter来控制项目的整体路由跳转, Router组件匹配路由信息,Redirect组件实现路由的重定向
- 使用antd-mobile组件库辅助进行页面的结构和样式辅助; 并使用
react-app-rewired
customize-cra
使组件库实现按需引入,解决全部引入导致的打包体积过大的问题; - 使用axios请求拦截器和相应拦截器,对需要token字段的请求进行统一处理; 相应拦截器实现对异常请求的统一处理,简化了具体模块中的代码,是核心逻辑更简洁
- React.lazy()+ import(),Suspence组件 把项目按照路由进行分割, 提高首屏加载速度
- 对后台返回的城市数据按照索引(字母)进行排序;
- 使用百度地图提供的api获取当前城市信息,并展示在列表顶部
- 使用
react-vertualize
库中提供的API,实现对城市列表和索引的渲染, 用户可以根据索引快速定位想选择的城市
- 使用
antd-moble
中的Coursel组件,实现对轮播图的渲染, 通过props控制每张轮播图的停留事件
- 使用flex布局, 使页面能兼容多种移动端设备
- 使用百度地图API, 通过用户选择的城市定位,渲染当前城市的地图信息;并添加了比例尺和缩放控件,提升用户体验
- 通过axios想后台发送请求,获取城市对应曲线下的具体房源信息; 通过百度地图提供的API渲染不同层级的label
- 通过点击label, 用户可以获取到不同行政区(街道)下的房源信息,最终可以定位到具体小区下面的房源
- Filter组件设计(筛选条件组件)
- 包含4个子组件,分别包含了区域,方式,租金,详细条件4个选择大类; 在Filter组件中通过axios获取筛选条件数据,在根据子组件的props把对应的数据传递给4个子组件; 选择时, 子组件会更新state,并在保存时会把所有的选择条件通过回调函数传递给父组件
- 列表页(Filter父组件)用户点击确定之后, Filter组件会将state中的数据处理后,通过回调函数传递给父组件(以对象的形式),并根据这些条件返回对应的数据列表
- 对于长列表的性能优化: 由于该系统数据量较大,一次性加载全部数据会导致页面滑动卡顿; 因此对于列表数据进行了懒加载处理; 通过一次性暂时加载20条数据, 当用户滑动的item个数超过15之后,自动调用loadMoreRows() 方法,并更新state,实现更多数据的加载;
- 通过受控组件的形式获取搜索框的value
- 根据onchange事件回调函数更新state和发送请求
- 由于onChange事件执行频率过高,导致请求太频繁,服务器压力过大,因此使用函数的柯里化封装了防抖函数, 有效减少了请求次数
- 模糊匹配法查询到用户输入的房源数据后,用户具体点击某一项后, 使用props的history中的方法返回列表搜索页,并将搜索项的id作为参数带到列表搜索页; 列表页中根据本次返回的id值查询小区下面的房源数据;
-
当通过条件筛选或搜索框查询当对应房源数据之后, 点击相应的数据进入房源详情页
-
通过路由参数获取房源id,通过axios发送请求获取详情数据
-
房源收藏功能:
- 点击底部按钮收藏,把房源添加到"我的收藏"; 该功能需要用户登录; 如果用户已登录,正常添加到收藏列表;如果未登录,提示用户去登录
-
在线咨询:
- 该功能正在开发中
-
电话预约
- 该功能正在完善, 当点击该按钮,会拨打该房源对应中介的电话号码
- 通过配置项目axios请求拦截器, 把所有需要用户token字段的请求做了同一拦截, 这些功能需要用户登录才能正常使用
- 当用户第一次登录时, 需要注册账号才能完成登录操作;