案例github用上脚手架配置代理

1.完成静态页面构建

小技巧：先在原html页面搜索最外侧框 是否有样式存在，如果样式不存在则不需要剪切过去

1. 给需求或效果分好组件，分别是 Search 和 List 、App 组件

2. class都改为 className 给图片添加上特定的 alt 和图片地址

Search 框内简单的请求数据

Search组件需要用上 axios.get请求，第一步需要获取input框，有多重结构赋值可以用上，解构出value值

前提是给对象解构赋值

问题① 出现跨域限制问题怎么办？

端口号3000向端口号5000服务器请求无法回来数据，实际开发中基本不用 cors 解决跨域问题，最好用第二种方法: setupProxy 配置代理方法

在 src 文件夹下创建setupProxy 文件

在Search组件中 ，由于站在3000端口与发送请求端口号一致，可以省略成

axios.get(/api1/search/user?q=atguigu)

简单的组件通信

需求：搜索框内填关键词即可在 List 组件出现相关图片和登录名

由于兄弟组件以以现阶段能力无法进行传状态，所以是Search组件给父组件传状态，App父组件再给List组件传状态

查看效果记得打开服务器

请求数据后获取对象数组信息，只要求出现头像和登录名

问题② ？

在f12检查页面时出现了 localhost 3000无法访问的问题 先查看端口是否冲突

一、win+R输入cmd 二、输入 netstat -nao | findstr 3000 回车执行，查看哪个程序占用了端口号 三、输入 taskkill/F /pid 端口号终止进程即可

终止失败可以利用 管理员身份打开 cmd

问题③ ？

呵呵并不是端口冲突的问题，是我的版本过低，重新编译一下setupProxy

//低版本配置代码
const proxy = require('http-proxy-middleware')module.exports = function(app){app.use(proxy('/api',{target:'http://localhost:5000',changeOrigin:true,pathRewrite:{'^/api':''}}),proxy('/api2',{target:'http://localhost:5001',changeOrigin: true,pathRewrite:{'^/api2':''}}))
}-----------------------------------------------------------------//新版配置代码
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:5000changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000changeOrigin默认值为false，但我们一般将changeOrigin值设为true*/pathRewrite:{'^/api1':''} //重写请求路径，不加会报错  控制服务器接收到的请求头中host字段的值 去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)}),createProxyMiddleware('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}))
}

优化页面

需求：

• 第一次打开页面还没有搜索时 呈现出欢迎字样

• 正在搜索时 出现 loading

• 如果出错 出先错误提示信息

 问题③？ 报错 object are not valid as a React child ...

消息订阅-发布机制

子传给父，父再传给子。这种兄弟组件通信太麻烦了，学一个新的知识点直接兄弟两个通信

1. 工具库：PubSubJS

2. 下载 npm i pubsub -js --save

3. 使用:

   1) import PubSub from 'pubsub-js' //引入

   2) PubSub.subscribe('delete', function(data){ }); //订阅

   3) PubSub.publish('delete', data) //发布消息

运用在上一个案例中：

Search组件是发布 List组件是订阅

因为最后的状态都要交给List组件，于是将app组件的初始状态都交给 List组件

当页面一打开就呈现组件 用上componentDidMount() {}

pubsub 真神了 可能是刚学组建通信都是子传父 父传子很麻烦把 现在觉得有pubsub多好 

下面我要去补补promise的课程了 大家撑住加油