反向代理

反向代理的配置方法，官方文档 ➡️ 反向代理

配置步骤

• 首先，http-proxy-middleware使用npm或Yarn 安装：

$ npm安装http-proxy-middleware --save
$＃或
$ yarn添加http-proxy-middleware

• 接下来，创建src/setupProxy. js，并将以下内容放入其中：

const { createProxyMiddleware } = require('http-proxy-middleware'); 
module. exports = function(app) {
  app. use(

    '/ajax',
    createProxyMiddleware({
      target: 'https://m.maoyan.com',
      changeOrigin: true,
      headers: {
        Referer: 'https://m.maoyan.com'  // 在请求头中 验证数据请求来源 （看情况）
      }
    })

  ); 
}; 

const { createProxyMiddleware } = require('http-proxy-middleware'); 
module. exports = function(app) {
  app. use(

    '/ajax',
    createProxyMiddleware({
      target: 'https://m.maoyan.com',
      changeOrigin: true,
      headers: {
        Referer: 'https://m.maoyan.com'  // 在请求头中 验证数据请求来源 （看情况）
      }
    })

  ); 
}; 

也可以配置多个反向代理

css module

css module

在对应组件下面，新建index. module. css文件，css module仅支持 class id选择器

封装吸顶效果-高阶组件

如果，我想在Film首页中，通过监测浏览器滚动条滚动的距离，做一个FilmHeader组件吸顶的效果（当滚动条滚动过一定距离，FilmHeader组件会被固定在某一位置）

因为考虑到该吸顶效果组件可能重复被使用，所以想到用高阶组件包括Film组件，让其被包裹的子组件，有高阶组件内部实现的功能比如(吸顶：判断滚动条滚动距离，改变定义的isFixed状态)传递到子组件中，通过props过来的属性，判断是否加吸顶的样式类名。

封装WithScroll组件

包裹子组件Film