react好租客项目Day11-发布房源模块(js输入框防抖&图片上传)&项目打包&项目优化(按需加载&路由代码分割)

房源发布模块

目标

• 如何解决JS 文本输入框防抖（用户输入过快导致请求服务器的压力过大）
• 能够完成搜索模块
• 能够获取发布房源的相关信息
• 能够知道图片上传的流程
• 能够完成图片上传功能
• 能够完成房源发布功能

前期准备工作

功能

• 获取房源的小区信息，房源图片上传，房源发布等

模板改动说明

• 修改首页（Index）去出租链接为： /rent/add
• 修改公共组件NoHouse的children属性校验为： node（任何可以渲染的内容）

• 修改公共组件HousePackage，添加onSelect的默认值

• 添加utils/city.js，封装当前定位城市 localStorage的操作

• 创建了三个页面组件：Rent（已发布房源列表）、Rent/Add（发布房源）、Rent/Search（关键词搜索校区信息）

• Rent 模板代码

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文本框输入 防抖）