我们在浏览购物网站的商品详情页时，通常都会有一个展示商品图片的放大镜，如下所示：





![GIF 2022-4-26 17-19-08.gif](https://s2.loli.net/2022/04/26/WywPGfKIjtm2Q64.gif)

下面我们就来仿一下这个功能。

首先是结构的搭建：

```html
<div id="container">
    <div id="left">
        <img src="img.jpg" alt="" style="width: 100%;">
        <span></span>
    </div>
    <div id="right">
        <img style="position: absolute;" src="bigimg.jpg" alt="">
    </div>
</div>
```

然后做亿点样式：

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#left {
    left: 50px;
    top: 50px;
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

#left span {
    position: absolute;
    width: 250px;
    height: 250px;
    left: 0;
    top: 0;
    background-color: rgba(192, 149, 83, .6);
}

#right {
    position: absolute;
    left: 460px;
    top: 50px;
    width: 500px;
    height: 500px;
    border: 1px solid black;
    overflow: hidden;
}
```

现在我们的页面是这样：

![image.png](https://s2.loli.net/2022/04/26/Wnr2jHalkiFqvGV.png)

接下来将 `#left span` 与 `#right` 设置为不显示，`display: none;`，然后为左边的 `div` 添加鼠标移入移出事件：

```js
let leftDiv = document.getElementById('left')
let rightDiv = document.getElementById('right')
let span = document.querySelector('#left span')
let bigImg = document.querySelector('#right img')

leftDiv.onmouseover = () => {
    span.style.display = 'block'
    rightDiv.style.display = 'block'
}

leftDiv.onmouseout = () => {
    span.style.display = 'none'
    rightDiv.style.display = 'none'
}
```

这样，当鼠标悬浮于 `leftDiv` 时，`span` 与 `rightDiv` 便会显现。

下面为`leftDiv`添加 `onmousemove` 事件：

```js
leftDiv.onmousemove = (e) => {
    let spanLeft = e.clientX - leftDiv.offsetLeft - span.offsetWidth / 2
    let spanTop = e.clientY - leftDiv.offsetTop - span.offsetHeight / 2
    let maxLeft = leftDiv.offsetWidth - span.offsetWidth
    let maxTop = leftDiv.offsetHeight - span.offsetHeight
    
    spanLeft = spanLeft < 0 ? 0 : (spanLeft > maxLeft ? maxLeft : spanLeft)
    spanTop = spanTop < 0 ? 0 : (spanTop > maxTop ? maxTop : spanTop)

    span.style.left = spanLeft + 'px'
    span.style.top = spanTop + 'px'

    let imgLeft = spanLeft * (bigImg.width - 500) / (400 - 250)
    let imgTop = spanTop * (bigImg.height - 500) / (400 - 250)

    bigImg.style.left = -imgLeft + 'px'
    bigImg.style.top = -imgTop + 'px'
}
```

最后为`span`更换一下指针样式，与购物网站更接近：

```css
#left span:hover {
    cursor: move;
}
```

效果如下：

![最终效果展示](https://s2.loli.net/2022/04/26/jUWsMyrZHYfoX25.gif)

完整代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿购物网站放大</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #left {
            left: 50px;
            top: 50px;
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }

        #left span {
            position: absolute;
            width: 250px;
            height: 250px;
            left: 0;
            top: 0;
            background-color: rgba(192, 149, 83, .6);
            display: none;
        }

        #left span:hover {
            cursor: move;
        }

        #right {
            display: none;
            position: absolute;
            left: 460px;
            top: 50px;
            width: 500px;
            height: 500px;
            border: 1px solid black;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="left">
            <img src="img.jpg" alt="" style="width: 100%;">
            <span></span>
        </div>
        <div id="right">
            <img style="position: absolute;" src="bigimg.jpg" alt="">
        </div>
    </div>
    <script>
        let leftDiv = document.getElementById('left')
        let rightDiv = document.getElementById('right')
        let span = document.querySelector('#left span')
        let bigImg = document.querySelector('#right img')

        leftDiv.onmouseover = () => {
            span.style.display = 'block'
            rightDiv.style.display = 'block'
        }

        leftDiv.onmouseout = () => {
            span.style.display = 'none'
            rightDiv.style.display = 'none'
        }

        leftDiv.onmousemove = (e) => {
            let spanLeft = e.clientX - leftDiv.offsetLeft - span.offsetWidth/2
            let spanTop = e.clientY - leftDiv.offsetTop - span.offsetHeight/2
            let maxLeft = leftDiv.offsetWidth - span.offsetWidth
            let maxTop = leftDiv.offsetHeight - span.offsetHeight
            spanLeft = spanLeft < 0 ? 0 : (spanLeft > maxLeft ? maxLeft : spanLeft)
            spanTop = spanTop < 0 ? 0 : (spanTop > maxTop ? maxTop : spanTop)
            
            span.style.left = spanLeft + 'px'
            span.style.top = spanTop + 'px'

            let imgLeft = spanLeft * (bigImg.width - 500) / (400 -250)
            let imgTop = spanTop * (bigImg.height - 500) / (400 -250)

            bigImg.style.left = -imgLeft + 'px'
            bigImg.style.top = -imgTop + 'px'
        }
    </script>
</body>
</html>
```

仿购物网站商品图片放大镜

Promise学习

Ajax学习

## 写在前面

1. React本身只关注于界面，并不包含发送ajax请求的代码
2. 前端应用需要通过ajax请求与后台进行交互（json数据）
3. React应用中需要集成第三方ajax库（或自己封装）





**常用的ajax请求库**

- jQuery：比较重，如果需要另外引入不建议使用
- axios：轻量级，建议使用
  - `npm i axios`
  - 封装XmlHttpRequest对象的ajax
  - promise风格
  - 可以用在浏览器端和node服务器端

**启动`server.js`服务**

server1.js

```js
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	console.log('请求来自于',request.get('Host'));
	console.log('请求的地址',request.url);
	next()
})

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})
```

server2.js

```js
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器2了');
	next()
})

app.get('/cars',(request,response)=>{
	const cars = [
		{id:'001',name:'奔驰',price:199},
		{id:'002',name:'马自达',price:109},
		{id:'003',name:'捷达',price:120},
	]
	response.send(cars)
})

app.listen(5001,(err)=>{
	if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})
```



## 脚手架配置代理

直接发送请求时会跨域，需要为脚手架配置代理（跨域时请求可发出，服务器可接收，但客户端无法接收返回的信息）

### 方法一

在`package.json`中追加配置：`"proxy": "http://localhost:5000",`，请求时直接请求项目地址。

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）。

### 方法二

在`src`目录下创建配置文件：`src/setupProxy.js`

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。

```js
// commonJS写法，不能用ES6写法

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    createProxyMiddleware('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      /*
      	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
      */
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    createProxyMiddleware('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}
```

## gitee搜索用户案例

![image.png](https://s2.loli.net/2022/04/13/hWKAPFolHw4dZpk.png)

### 静态组件

**App.jsx**

```jsx
import React, { Component } from 'react'

import List from './components/List'
import Search from './components/Search'

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <Search />
                <List />
            </div>
        )
    }
}
```

**components/Search/index.jsx**

```jsx
import React, { Component } from 'react'

export default class Search extends Component {
    render() {
        return (
            <section className="jumbotron">
            <h3 className="jumbotron-heading">搜索Gitee用户</h3>
            <div>
                <input type="text" placeholder="键入想要搜索的内容"/>&nbsp;<button>搜索</button>
            </div>
            </section>
        )
    }
}
```

**components/List/index.jsx**

```jsx
import React, { Component } from 'react'
import './index.css'

export default class List extends Component {
    render() {
        return (
            <div className="row">
                <div className="card">
                    <a rel="noreferrer" href="https://github.com/reactjs" target="_blank">
                    <img alt="name" src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{width: '100px'}}/>
                    </a>
                    <p className="card-text">reactjs</p>
                </div>
            </div>
        )
    }
}

```

**components/List/index.css**

```css
.album {
    min-height: 50rem;
    /* Can be removed; just added for demo purposes */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #f7f7f7;
}

.card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
}

.card>img {
    margin-bottom: .75rem;
    border-radius: 100px;
}

.card-text {
    font-size: 85%;
}
```

### axios发送请求

请求地址：https://gitee.com/api/v5/search/users?q=xxxxx

据天禹老师所讲，请求过于频繁可能会401，因此提供了一个本地的服务器用于存放一部分数据以保证项目的顺利展示，这里就不写了

```jsx
export default class Search extends Component {

    searchUser = () => {
        // 获取用户的输入
        const {keyWordElement: {value: keyWord}} = this // 解构赋值的连续写法 + 重命名
        // 发送网络请求
        axios.get(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            value => {
                console.log('success', value.data)
            },
            reason => {
                console.log('fail', reason)
            }
        )
    }

    render() {
        return (
            <section className="jumbotron">
            <h3 className="jumbotron-heading">搜索Gitee用户</h3>
            <div>
                <input ref={c => this.keyWordElement = c} type="text" placeholder="键入想要搜索的内容"/>&nbsp;
                <button onClick={this.searchUser}>搜索</button>
            </div>
            </section>
        )
    }
}
```



> 解构赋值与连续解构赋值：
>
> ```js
> let obj = {a: {b: {c: 1}}}
> let obj2 = {a: {b: 1}}
> 
> console.log('@', obj.a.b.c)
> 
> const {a: {b: {c}}} = obj
> console.log('#', c)
> 
> const {a: {b: data}} = obj2
> console.log('$', data)
> ```
>
> ![image.png](https://s2.loli.net/2022/04/13/oHAqBnzQukIjVsO.png)

### 展示数据

App组件接收用户数据并传递给List组件

```jsx
export default class App extends Component {

    state = {users: []} // 初始化状态，users初始值为数组

    saveUsers = (users) => {
        this.setState({users})
    }

    render() {
        return (
            <div className="container">
                <Search saveUsers={this.saveUsers}/>
                <List users={this.state.users}/>
            </div>
        )
    }
}
```

List组件展示数据

```jsx
export default class List extends Component {
    render() {
        return (
            <div className="row">
                {
                    this.props.users.map((userObj) => {
                        return (
                            <div key={userObj.id} className="card">
                                <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                <img alt={userObj.name} src={userObj.avatar_url==='https://gitee.com/assets/no_portrait.png' ? 'https://avatars.githubusercontent.com/u/6412038?v=3' : userObj.avatar_url + '!avatar200'} style={{width: '100px'}}/>
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
```

![GIF 2022-4-13 18-09-24.gif](https://s2.loli.net/2022/04/13/tlhJEm2ebIfacuQ.gif)

### 优化展示

**App.jsx**

```jsx
import React, { Component } from 'react'

import List from './components/List'
import Search from './components/Search'

export default class App extends Component {

    state = { // 初始化状态
        users: [], // users初始值为数组
        isFirst: true, // 是否首次打开页面
        isLoading: false, // 是否加载中
        err: '' // 存储请求错误
    }

    // 更新App的state
    updateAppState = (stateObj) => {
        this.setState(stateObj)
    }

    /*saveUsers = (users) => {
        this.setState({users})
    }

    changeIsFirst = (users) => {
        this.setState({users})
    }

    changeIsLoading = (users) => {
        this.setState({users})
    }

    saveErr = (users) => {
        this.setState({users})
    }*/

    render() {
        return (
            <div className="container">
                <Search updateAppState={this.updateAppState}/>
                <List {...this.state}/>
            </div>
        )
    }
}
```

**components/Search/index.jsx**

```jsx
import React, { Component } from 'react'
import axios from 'axios'

export default class Search extends Component {

    searchUser = () => {
        // 获取用户的输入
        const {keyWordElement: {value: keyWord}} = this // 解构赋值的连续写法 + 重命名
        // 发送请求前通知App更新状态
        this.props.updateAppState({isFirst: false, isLoading: true})
        // 发送网络请求
        axios.get(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            value => {
                // 请求成功后通知App更新状态
                this.props.updateAppState({isLoading: false, users: value.data})
            },
            reason => {
                // 请求失败后通知App更新状态
                this.props.updateAppState({isLoading: false, err: reason.message})
            }
        )
    }

    render() {
        return (
            <section className="jumbotron">
            <h3 className="jumbotron-heading">搜索Gitee用户</h3>
            <div>
                <input ref={c => this.keyWordElement = c} type="text" placeholder="键入想要搜索的内容"/>&nbsp;
                <button onClick={this.searchUser}>搜索</button>
            </div>
            </section>
        )
    }
}
```

**components/List/index.jsx**

```jsx
import React, { Component } from 'react'
import './index.css'

export default class List extends Component {
    render() {
        const {users, isFirst, isLoading, err} = this.props
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用</h2> : isLoading ? <h2>加载中...</h2> :
                    err ? <h2 style={{color: 'red'}}>{err}</h2> :
                    users.map((userObj) => {
                        return (
                            <div key={userObj.id} className="card">
                                <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                <img alt={userObj.name} src={userObj.avatar_url==='https://gitee.com/assets/no_portrait.png' ? 'https://avatars.githubusercontent.com/u/6412038?v=3' : userObj.avatar_url + '!avatar200'} style={{width: '100px'}}/>
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
```



## 消息订阅与发布

> 在需要接收数据的组件里订阅消息，当其他组件发布该消息时，就会执行其中的回调

使用PubSubJS库：`npm install pubsub-js`

引入PubSubJS库：`import PubSub from 'pubsub-js'`

App组件删除所有与state相关的操作，将state保存在List组件中

List组件中消息订阅；

```jsx
componentDidMount() {
    this.token = PubSub.subscribe('state', (msg, data) => { // msg适用于多个订阅时，区分订阅来源
        this.setState(data)
    })
}

componentWillUnmount() {
    PubSub.unsubscribe(this.token) // 在组件销毁前取消订阅，防止状态泄露
}
```

Search组件中消息发布：

```jsx
searchUser = () => {
    // 获取用户的输入
    const {keyWordElement: {value: keyWord}} = this // 解构赋值的连续写法 + 重命名
    // 发送请求前通知List更新状态
    PubSub.publish('state', {isFirst: false, isLoading: true})
    // 发送网络请求
    axios.get(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
        value => {
            // 请求成功后通知List更新状态
            PubSub.publish('state', {isLoading: false, users: value.data})
        },
        reason => {
            // 请求失败后通知List更新状态
            PubSub.publish('state', {isLoading: false, err: reason.message})
        }
    )
}
```

## fetch发送请求

[fetch文档地址](https://github.github.io/fetch/)

[segmentfault上的fetch介绍](https://segmentfault.com/a/1190000003810652)

通过`console.log()`感受一下fetch的“关注分离”：

```js
fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
    response => {
        console.log('联系服务器成功')
        return response.json()
    },
    reason => {console.log('联系服务器失败', reason)}
).then(
    response => {
        console.log('获取数据成功', response);
    },
    reason => {console.log('获取数据失败', reason)}
)
```

![image.png](https://s2.loli.net/2022/05/14/DhFqaEWRJ7vziPG.png)

> 如果联系服务器失败了（比如断网时发送请求）会输出什么？
>
> > ```
> > 联系服务器失败 reason
> > 获取数据成功 undefined
> > ```

1. `fetch`: 原生函数，不再使用`XmlHttpRequest`对象提交`ajax`请求
2. 老版本浏览器可能不支持

全部代码：

```jsx
import React, { Component } from 'react'
import PubSub from 'pubsub-js'
// import axios from 'axios'

export default class Search extends Component {

    searchUser = async() => {
        // 获取用户的输入
        const {keyWordElement: {value: keyWord}} = this // 解构赋值的连续写法 + 重命名
        // 发送请求前通知List更新状态
        // this.props.updateAppState({isFirst: false, isLoading: true})
        PubSub.publish('state', {isFirst: false, isLoading: true})
        //#region 发送网络请求 --- 使用axios发送
        /* axios.get(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            value => {
                // 请求成功后通知List更新状态
                // this.props.updateAppState({isLoading: false, users: value.data})
                PubSub.publish('state', { isLoading: false, users: value.data })
            },
            reason => {
                // 请求失败后通知List更新状态
                // this.props.updateAppState({isLoading: false, err: reason.message})
                PubSub.publish('state', { isLoading: false, err: reason.message })
            }
        ) */
        //#endregion
    
        //#region 发送网络请求 --- 使用fetch发送 -- 未优化
        /* fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            response => {
                console.log('联系服务器成功')
                return response.json()
            },
            reason => {
                console.log('联系服务器失败', reason)
                return new Promise() // 中断Promise链
            }
        ).then(
            response => {
                console.log('获取数据成功', response);
            },
            reason => {console.log('获取数据失败', reason)}
        ) */
        //#endregion

        //#region 发送网络请求 --- 使用fetch发送 -- 优化版本
        /* fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`).then(
            response => {
                console.log('联系服务器成功')
                return response.json()
            }
        ).then(
            response => {
                console.log('获取数据成功', response);
            }
        ).catch(
            error => {console.log('请求出错', error)}
        ) */
        //#endregion

        try {
            const response = await fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`)
            const data = await response.json() // await要在async里用
            // console.log(data)
            PubSub.publish('state', { isLoading: false, users: data })
        } catch (error) {
            // console.log('请求出错', error)
            PubSub.publish('state', { isLoading: false, err: error.message })
        }

    }

    render() {
        return (
            <section className="jumbotron">
            <h3 className="jumbotron-heading">搜索Gitee用户</h3>
            <div>
                <input ref={c => this.keyWordElement = c} type="text" placeholder="键入想要搜索的内容"/>&nbsp;
                <button onClick={this.searchUser}>搜索</button>
            </div>
            </section>
        )
    }
}
```

## 总结

1. 设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办

2. ES6解构赋值+重命名：

   ```js
   let obj = {a: {b: 1}}
   const {a} = obj // 传统解构赋值
   const {a: {b}} = obj // 连续解构赋值
   const {a: {b: value}} = obj // 连续解构赋值 + 重命名
   ```

3. 消息订阅与发布机制

   * 先订阅，再发布
   * 适用于任意组件间通信
   * 要在组件的`componentWillUnmount`中取消订阅

4. fetch发送请求（关注分离的设计思想）

   ```js
   try {
       const response = await fetch(`https://gitee.com/api/v5/search/users?q=${keyWord}`)
       const data = await response.json() // await要在async里用
       // console.log(data)
       PubSub.publish('state', { isLoading: false, users: data })
   } catch (error) {
       // console.log('请求出错', error)
       PubSub.publish('state', { isLoading: false, err: error.message })
   }
   // 外面需要包一个 async function
   ```

Promise介绍与基本使用

理解

抽象表达

原生Ajax

简介

Ajax

写在前面

初始化脚手架

使用 npx 创建