# 反向代理

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

# 配置步骤

  • 首先,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组件

封装WithScroll组件

包裹子组件Film

包裹子组件Film