房源发布模块
目标
- 如何解决JS 文本输入框防抖(用户输入过快导致请求服务器的压力过大)
- 能够完成搜索模块
- 能够获取发布房源的相关信息
- 能够知道图片上传的流程
- 能够完成图片上传功能
- 能够完成房源发布功能
前期准备工作
功能
模板改动说明
- 修改首页(Index)去出租链接为: /rent/add
- 修改公共组件NoHouse的children属性校验为: node(任何可以渲染的内容)
- 修改公共组件HousePackage,添加onSelect的默认值
- 添加utils/city.js,封装当前定位城市 localStorage的操作
- 创建了三个页面组件:Rent(已发布房源列表)、Rent/Add(发布房源)、Rent/Search(关键词搜索校区信息)
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { API, BASE_URL } from '../../utils'
import NavHeader from '../../components/NavHeader'
import HouseItem from '../../components/HouseItem'
import NoHouse from '../../components/NoHouse'
import styles from './index.module.css'
export default class Rent extends Component {
state = {
// 出租房屋列表
list: []
}
// 获取已发布房源的列表数据
async getHouseList() {
const res = await API.get('/user/houses')
const { status, body } = res.data
if (status === 200) {
this.setState({
list: body
})
} else {
const { history, location } = this.props
history.replace('/login', {
from: location
})
}
}
componentDidMount() {
this.getHouseList()
}
renderHouseItem() {
const { list } = this.state
const { history } = this.props
return list.map(item => {
return (
<HouseItem
key={item.houseCode}
onClick={() => history.push(`/detail/${item.houseCode}`)}
src={BASE_URL + item.houseImg}
title={item.title}
desc={item.desc}
tags={item.tags}
price={item.price}
/>
)
})
}
renderRentList() {
const { list } = this.state
const hasHouses = list.length > 0
if (!hasHouses) {
return (
<NoHouse>
您还没有房源,
<Link to="/rent/add" className={styles.link}>
去发布房源
</Link>
吧~
</NoHouse>
)
}
return <div className={styles.houses}>{this.renderHouseItem()}</div>
}
render() {
const { history } = this.props
return (
<div className={styles.root}>
<NavHeader onLeftClick={() => history.go(-1)}>房屋管理</NavHeader>
{this.renderRentList()}
</div>
)
}
}
三个路由规则配置
- 在App.js 中导入Rent已发布房源列表页面
- 在App.js 中导入AuthRoute组件
- 使用AuthRoute组件,配置路由规则
- 使用同样方式,配置Rent/Add 房源发布页面,Rent/Search 关键词搜索小区信息页面
{/* 配置登录后,才能访问的页面 */}
<AuthRoute exact path="/rent" component={Rent} />
<AuthRoute path="/rent/add" component={RentAdd} />
<AuthRoute path="/rent/search" component={RentSearch} />
搜索模块(★★★)
关键词搜索小区信息
- 获取SearchBar 搜索栏组件的值
- 在搜索栏的change事件中,判断当前值是否为空
- 如果为空,直接return,不做任何处理
- 如果不为空,就根据当前输入的值以及当前城市id,获取该关键词对应的小区信息
- **问题:**搜索栏中每输入一个值,就发一次请求,这样对服务器压力比较大,用户体验不好
- **解决方式:**使用定时器来进行延迟执行(关键词:JS文本框输入 防抖)