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

房源发布模块

目标

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

前期准备工作

功能

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d0yllDAe-1575112741215)(images/发布房源.png)]

模板改动说明

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wTlhzzyO-1575112741216)(images/noHouse.jpg)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MuCgqTDd-1575112741220)(images/onSelect.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oUpPCXcv-1575112741223)(images/city.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GZfe1Qn6-1575112741227)(images/rent.png)]

  • 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,不做任何处理
  • 如果不为空,就根据当前输入的值
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值