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

1.完成静态页面构建

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

给需求或效果分好组件，分别是 Search 和 List 、App 组件
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:5000
          changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
          changeOrigin默认值为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 ...

消息订阅-发布机制

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

工具库：PubSubJS
下载 npm i pubsub -js --save
使用:

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

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

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

运用在上一个案例中：

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

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

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