react好租客项目Day06-axios封装&封装搜索导航栏组件&实现筛选功能

axios优化&环境变量

目标

• 能够通过 axios.create() 方法来构建axios实例对象，并且配置baseURL
• 能够知道 .env.development 和 .env.production 两个文件的作用
• 能够配置开发环境变量
• 能够在代码中引入配置的环境变量的值

每一次我们请求接口的时候，每一次都需要写相同的baseUrl。例如：http://localhost:8080，这样太繁琐，所以我们可以对网络请求进行优化，接口域名、图片域名、分为开发环境和生产环境，直接写在代码中，项目发布时，很难替换

配置统一的URL（★★）

axios.defaults.baseURL = 'http://localhost:8080'
// 或者
const instance = axios.create({
    baseURL: 'http://localhost:8080'
})

配置生产环境和开发环境（★★★）

// 通过脚手架的环境变量来解决 开发环境
在开发环境变量文件 .env.development 中，配置 REACT_APP_URL= http://localhost:8080

// 通过脚手架的环境变量解决， 生成环境
在生产环境变量文件 .env.production 中，配置 REACT_APP_URL=线上接口地址

使用环境变量（★★★）

在react官网中，有详细说明环境变量的配置

在里面会发现对应的文件还有个 .local 后缀的文件，这个文件的优先级更高，以下就是你输入不同命令，执行文件的优先级

• 在项目根目录中创建文件 .env.development

• 在该文件中添加环境变量 REACT_APP_URL（注意：环境变量约定REACT_APP 开头）,设置 REACT_APP_URL=http://localhost:8080

REACT_APP_URL =http://localhost:8080

• 重新启动脚手架，脚手架在运行的时候就会解析这个文件
• 在utils/url.js 中，创建 BASE_URL 变量，设置值为 process.env.REACT_APP_URL
• 导出BASE_URL

// 配置baseURL
export const BASE_URL = process.env.REACT_APP_URL

• 在我们页面引入就能使用了

import {BASE_URL} from '../../utils/url.js'

axios 优化（★★★）

• 在utils/api.js 中，导入 axios和BASE_URL
• 调用 axios.create() 方法创建一个axios实例
• 给 create 方法，添加配置baseURL，值为 BASE_URL
• 导出API对象

import axios from 'axios'
import { BASE_URL } from './url.js'

// 创建axios的配置文件，里面配置baseURL路径
const config = {
    baseURL: BASE_URL
}

// 根据create 方法来构建axios对象
const instance = axios.create(config)

export { instance }

• 导入API，代替之前直接利用axois请求的代码

import {instance} from '../../utils/api.js'

列表找房功能

目标

• 说出抽取搜索导航栏的好处
• 能够说出抽取搜索导航栏的思路，并且参照老师代码能够实现抽取功能
• 能够说出条件筛选功能的大致思路，Filter组件作用，FilterTitle组件作用，FilterPicker组件作用，FilterFooter组件作用
• 能够参照老师代码实现FilterTitle组件中的逻辑代码
• 能够参照老师代码实现FilterPicker组件的逻辑代码

功能分析

• 搜索导航栏组件的封装
• 条件筛选栏组件封装
• 条件筛选栏吸顶功能
• 房屋列表

顶部搜索导航栏

封装搜索导航栏组件（★★★）

• 在components 目录中创建组件 SearchHeader/index.js
• 把之前写过的结构拷贝到这个文件中
• 然后把跟首页相关的数据去掉，标题，城市名称
• 通过props来进行传递

import { Flex } from 'antd-mobile';
import React from 'react'
import {withRouter} from 'react-router-dom'
import './index.scss'
import PropTypes from 'prop-types'

function