dva和Umi中两个小用法

简介: dva和Umi中两个小用法

Umi中的Proxy跨域代理



官网中给的例子


export default {
  proxy: {
    '/api': {
      'target':'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      'pathRewrite': {'^/api':'' },
    },
  },
}
proxy: {
      // api表示的是在/api路径下开启代理
    '/api': {
      //target表示的是要替换的地址
      'target':'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      //将api开头替换为空
      'pathRewrite': {'^/api':'' },
    },
  },


实际使用


在config文件夹下的config.js项目中使用

image.png

  proxy: {
    "/ci": {
      "target": "http://47.92.112.6:8055",
      "changeOrigin": true,
      "pathRewrite": { "^/ci": ''}
    }
  }


比如 我在本地访问的是

http://localhost:8000/ci/player/page?current=2&size=10

进入ci路径下会自动开启代理 将http://localhost:8000替换成了http://47.92.112.6:8055此时我访问的就是

http://47.92.112.6:8055/ci/player/page?current=2&size=10

但是我应该访问的是

http://47.92.112.6:8055/player/page?current=2&size=10

所以这时候要进行路径重写,将ci替换为空就可以成功访问


正向代理


正向代理就是一个位于客户端和目标服务器之间的服务器,这是一个代理服务器

客户端为了从目标服务器获取内容,但是客户端由于限制无法直接访问到目标服务器,那么客户端就可以向一个代理服务器发送一个请求并指定目标服务器

代理服务器收到请求后,就会向目标服务器转交请求并将获得的内容返回给客户端


image.png


正向代理用途


  • 突破访问显示:通过代理服务器,可以突破自身ip访问限制,访问国外网站等
  • 提高访问速度:通常代理服务器都设置一个较大的硬盘缓冲区,会将部分请求的响应保存到缓冲区中,当其他用户再访问相同的信息时,则直接由缓冲区中取出信息,传给用户,以提高访问速度
  • 隐藏客户端真实ip:上网者可以通过正向代理的方法隐藏自己的ip,免受攻击


Dva中在effects中获取state的值



首先,看官网给出effects中的例子 effects详情见


it('put multi effects in order', done => {
    const app = create();
    app.model({
      namespace: 'counter',
      state: {
        count: 0,
        resolveCount: 0,
      },
      reducers: {
        dump(state, { payload }) {
          return {
            ...state,
            ...payload,
          };
        },
      },
      effects: {
        *changeCountDelay({ payload }, { put, call }) {
          yield call(delay, 200);
          yield put({ type: 'dump', payload: { count: payload } });
        },
        *process({ payload }, { put, select }) {
          yield put.resolve({ type: 'changeCountDelay', payload });
          const count = yield select(state => state.counter.count);
          yield put({ type: 'dump', payload: { resolveCount: count } });
        },
      },
    });


从这个例子我们可以看出

在effects中想要获得state中的值,需要解构出select方法


用法具体如下

const xxx = yield select( state => state.namespcae(你自己起的命名空间).想要取得的值)


运用


export default {
  namespace: 'CWL_UserSettingsModel',
  state: {
    pagination:{},
    userData: [],
    userInfo: {},
  },
  effects: {
    *addUser({payload},{call,put,select}){
      console.log('addUser',payload);
     const pagination = yield select(state => state.CWL_UserSettingsModel.pagination)
      const response = yield call (UserSettingService.addUser,payload)
      const {code} = response;
      if (response.code === 0) {
        message.success('新增用户成功');
        yield put({
          type: 'getList',
          payload: pagination,
        });
      }
      else{
        message.error("新增用户失败");
      }
    }
  },


通过这句话取到了state中pagination的值

const pagination = yield select(state => state.CWL_UserSettingsModel.pagination)


另外,如果你想在model中取到另一个model中state值,我们可以举一反三一下,只要在后面添加上你想取的model的namespace的值即可


比如:我想一个model中取到globalModel中的值

const globalModelData = yield select((state) => state.globalModel);


这样,我们就可以在一个Model中取到globalModel中的state值了

目录
相关文章
|
11月前
|
人工智能 自动驾驶 算法
智能时代的伦理困境:AI决策的道德边界
在人工智能技术飞速发展的今天,我们面临着前所未有的伦理挑战。本文探讨了AI决策中的道德边界问题,分析了技术发展与人类价值观之间的冲突,并提出了建立AI伦理框架的必要性和可能路径。通过深入剖析具体案例,揭示了AI技术在医疗、司法等领域的应用中所引发的道德争议,强调了在追求技术进步的同时,必须审慎考虑其对社会伦理的影响,确保科技发展服务于人类的福祉而非成为新的困扰源。
umi 中如何使用 px2rem 插件做rem适配
在umi的src下面创建两个文件app.ts和document.ejs
456 0
|
Windows
windows开启路由转发
windows开启路由转发
1758 0
如何在 Umi 中使用 Keep Alive
如何在 Umi 中使用 Keep Alive
4320 0
如何在 Umi 中使用 Keep Alive
|
存储 开发工具 git
|
消息中间件 存储 监控
"微服务的神经中枢:深度解析DCM系统架构,打造智能配置管理的黄金时代!"
【8月更文挑战第21天】分布式配置管理(DCM)系统是微服务架构的核心,集中管理配置以确保一致性与灵活性。需满足集中管理、实时更新、高可用及安全性需求。架构包括配置存储、服务器、客户端代理、消息队列及监控组件。工作流程涵盖配置写入、变更通知、获取更新、本地缓存及配置生效。技术选型考虑etcd、Consul等存储方案,及RabbitMQ、Kafka等消息队列。安全性方面实施加密传输、访问控制及审计日志记录。高效可靠的DCM系统对于构建健壮微服务架构至关重要。
199 0
|
10月前
|
Go API 数据库
Go 语言中常用的 ORM 框架,如 GORM、XORM 和 BeeORM,分析了它们的特点、优势及不足,并从功能特性、性能表现、易用性和社区活跃度等方面进行了比较,旨在帮助开发者根据项目需求选择合适的 ORM 框架。
本文介绍了 Go 语言中常用的 ORM 框架,如 GORM、XORM 和 BeeORM,分析了它们的特点、优势及不足,并从功能特性、性能表现、易用性和社区活跃度等方面进行了比较,旨在帮助开发者根据项目需求选择合适的 ORM 框架。
845 4
|
11月前
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
|
算法 SoC
在写PWM风扇驱动之前:如何透过FG信号,获取风扇转速?
本文介绍了如何通过PWM风扇的FG信号线获取风扇转速的方法,包括风扇规格的解读、FG信号的公式推导、软件算法的解析,以及在全志H713平台上实现风扇转速获取的驱动代码示例。
1566 2
在写PWM风扇驱动之前:如何透过FG信号,获取风扇转速?
|
JSON 前端开发 API
前端与后端的协作与沟通
前端与后端的协作与沟通
1021 0