vue2-代理服务器插槽

解决跨域问题
配置代理服务器

代理服务器位于前端应用(客户端)和真实的后端服务器之间。当配置了代理服务器后,前端应用的请求不再直接发送到后端服务器,而是发送到代理服务器。代理服务器在接收到请求后,会根据预先配置的规则将请求转发到真正的后端服务器。例如,在 Vue 项目的开发服务器配置中,如果前端应用的请求路径是以/api开头,代理服务器可以将这个请求转发到http://backend - server - address对应的后端服务器上

cli文档

  1. 方式一:只能配置一个代理,不能灵活配置走不走代理

    优点:配置简单,请求资源时直接发给前端(8080)即可。

    缺点:不能配置多个代理,不能灵活的控制请求是否走代理。

    工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)

    // vue.config.js
    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({transpileDependencies: true,// 开启代理服务器devServer:{// 开启8888端口的代理proxy:"http://localhost:8888"}
    })
  2. 方式二:可以配置多个代理,可以灵活配置走不走代理

    优点:可以配置多个代理,且可以灵活的控制请求是否走代理。

    缺点:配置略微繁琐,请求资源时必须加前缀。

    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({transpileDependencies: true,devServer:{proxy:{// 如果请求的前缀带api,则触发该代理转发,否则不触发代理转发// http://localhost:8888/前缀/xxxxxxx"/api":{// 转发的服务器target:"http://localhost:5001",// 是否重写路径 {"正则规则":""} ,如果不写 默认以带前缀的url进行请求,http://localhost:5001/前缀/xxxxxxx// 使用正则把前缀替换为空,则请求URL 不带前缀 ,http://localhost:5001/xxxxxxxpathRewrite:{"^/api":""},ws:true, // 用于支持websocketchangeOrigin:true // 用于控制请求头中的host值 是转发服务器地址还是真实服务器地址}}}
    })
插槽

让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件

默认插槽

默认插槽一个组件如果有多个,有多少个插槽,数据会重复多少份(插槽数*插槽数的数量的重复)

<!-- Category组件(子组件)-->
<template><div class="box"><h1>{{ title }}</h1><ul><li v-for="(data,index) of dataList" :key="index">{{ data }}</li></ul><!-- 定义一个插槽 --><slot></slot></div>
</template>
<!-- App组件(父组件) --><Category title="1" :dataList="[1,2,3]"><!-- 在组件标签内写对应内容,会显示在子元素slot插槽定义的地方--><!-- 如果要给插槽的代码设置样式,设置父组件内--><h2>哈哈哈哈</h2></Category>
具名插槽

一个组件可以有多个具名插槽,会根据名字插入代码

  1. 子组件
<!-- 子组件定义一个插槽,名字是h1Text --><slot name="h1Text"></slot>
  1. 父组件使用slot
<!-- 父组件在指定名字插槽插入代码--><Category title="1" :dataList="[1,2,3]"><!--在name= h1Text的插槽里面插入代码--><!-- 如果插槽名字是表达式or变量--><h2 slot="h1Text">哈哈哈哈</h2></Category>
  1. 父组件使用v-slot
<!-- v-slot指定插槽,只能在 template 标签使用-->
<Category title="1" :dataList="[1,2,3]"><template v-slot:h1Tet><h2 slot="h1Text">哈哈哈哈</h2></template>
</Category>
作用域插槽

数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(数据在子组件中,但使用数据所遍历出来的结构由父组件决定)

  1. 子组件
<script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Category",data() {// 定义了一个dataList数组return {"infoList": [1, 2, 3, 4, 5]}}}
</script><template><div class="box"><!--   定义插槽,将dataList传递给插槽的使用者 --><slot v-bind:infoList="infoList" name="context"></slot></div>
</template>
  1. 父组件
<template><div class="container"><Category><!--      作用域插槽必须使用template标签 --><!--    vue2.6废弃了slot-scope  --><!--    vue2.5废弃了scope  --><!--       v-scope --><!-- vue2.6以上使用v-slot:插槽名字="要使用的数据" --><template v-slot:context="infoList"><!--  这里收到的数据是一个对象 {infoList:[xxxxxxx]}--><ul><li v-for="(info,index) of infoList.infoList" :key="index">{{ info }}</li></ul></template></Category></div>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/887117.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

12 —— Webpack中向前端注入环境变量

需求&#xff1a;开发模式下打印语句生效&#xff0c;生产模式下打印语句失效 使用Webpack内置的DefinePlugin插件 const webpack require(webpack) module.exports { plugins: [ new webpack.DefinePlugin({ process.env.NODE_ENV:JSON.stringify(process.env.NODE_ENV) }…

【vba源码】导入excel批注信息

Hi&#xff0c;大家好呀&#xff01; 又到了一周一分享的时间&#xff0c;上周繁忙的我都没有给大家直播&#xff0c;视频也没更新&#xff0c;那这周大家放心&#xff0c;都会给大家更新&#xff0c;今天我们来讲点啥呢&#xff1f;每周找优质的内容给大家更新是我最最痛苦的…

Java设计模式 —— Java七大设计原则详解

文章目录 前言一、单一职责原则1、概述2、案例演示 二、接口隔离原则1、概述2、案例演示 三、依赖倒转原则1、概述2、案例演示 四、里氏替换原则1、概述2、案例演示 五、开闭原则1、概述2、案例演示 六、迪米特法则1、概述2、案例演示 七、合成/聚合复用原则1、概述2、组合3、聚…

服务器数据恢复—DS5300存储硬盘指示灯亮黄灯的数据恢复案例

服务器存储数据恢复环境&#xff1a; 某单位一台某品牌型号为DS5300的服务器存储&#xff0c;1个机头4个扩展柜&#xff0c;底层是2组分别由数十块硬盘组建的RAID5阵列。存储系统上层一共分了11个卷。 服务器存储故障&分析&#xff1a; 存储设备上一组raid5阵列上的2块磁盘…

Cloud Native 云原生后端的开发注意事项

在云原生后端开发里&#xff0c;数据管理和存储这块得好好弄。数据库选型得综合考虑&#xff0c;像关系型数据有复杂查询需求就选 MySQL、PostgreSQL&#xff0c;海量非结构化数据就可以考虑 MongoDB、Cassandra 这些。设计数据库得遵循规范化原则&#xff0c;像设计电商订单表…

Mac vscode 激活列编辑模式

列编辑模式在批量处理多行文本时&#xff0c;非常有效&#xff0c;但 vscode 默认情况下&#xff0c;又没有激活&#xff0c;因此记录一下启动方法&#xff1a; 激活列编辑模式 然后就可以使用 Alt&#xff08;Mac 上是 Option 或 Command 键&#xff09; 鼠标左键 滑动选择了…

c#使用高版本8.0步骤

一、找到项目所在怒路&#xff0c;记事本打开.proj文件。 二、记事本打开此文件&#xff0c;<PropertyGroup>后面加入如下语句&#xff1a; <LangVersion>8.0</LangVersion> 关闭并保存。 根据提示全部重新加载即可。

【蓝桥杯C/C++】深入解析I/O高效性能优化:std::ios::sync_with_stdio(false)

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: 蓝桥杯C/C 文章目录 &#x1f4af;前言&#x1f4af;C 语言与 C 语言的输入输出对比1.1 C 语言的输入输出1.2 C 语言的输入输出 &#x1f4af; std::ios::sync_with_stdio(false) 的作用与意义2.1 什么是 std::ios::sync_with_st…

浏览器的事件循环机制

一、请简述浏览器的事件循环机制&#xff08;Event Loop&#xff09;基本原理 浏览器的事件循环机制是用于协调处理 JavaScript 中的异步任务与同步任务执行顺序的一种机制&#xff0c;它确保了代码能够按照合理的顺序执行&#xff0c;避免阻塞页面渲染等情况。其基本原理如下…

GaussDB 华为高斯数据库

GaussDB 是华为推出的一款企业级分布式数据库&#xff0c;旨在为企业提供高效、可靠、安全的数据库服务。GaussDB 基于华为在数据库领域的多年积累&#xff0c;结合人工智能技术和分布式架构&#xff0c;支持多种场景的数据存储与管理需求&#xff0c;是云计算、大数据、人工智…

【Word】一键批量引用论文上标——将正文字体改为上标格式

【Word】一键批量引用论文上标——将正文字体改为上标格式 写在最前面Word一键批量引用论文上标技巧分享核心思路&#xff1a;Word 替换功能 通配符步骤详解1. 打开 Word 替换功能2. 输入通配符模式3. 设置替换格式为上标4. 批量替换 实际效果展示技巧扩展 &#x1f308;你好呀…

SAP 零售方案 CAR 系统的介绍与研究

前言 当今时代&#xff0c;零售业务是充满活力和活力的业务领域之一。每天&#xff0c;由于销售运营和客户行为&#xff0c;它都会生成大量数据。因此&#xff0c;公司迫切需要管理数据并从中检索见解。它将帮助公司朝着正确的方向发展他们的业务。 这就是为什么公司用来处理…

【深度学习之一】2024最新pytorch+cuda+cudnn下载安装搭建开发环境

兵马未动&#xff0c;粮草先行。作为深度学习的初学者&#xff0c;快速搭建一个属于自己的开发环境就是头等大事&#xff0c;可以让我们节省许多的时间。这一期我们主要讲一讲2024年最新pytorchcudacudnn下载安装搭建开发环境&#xff0c;以及安装过程中可能遇到的一些问题以及…

STM32-- 串口介绍

rs485、rs232、rs422 rs485使用&#xff1a; max3485&#xff1a;3.3v左右驱动 max485&#xff1a;5v左右驱动&#xff0c;不过有时候3.3v驱动也可以使用&#xff0c;具体有什么问题或者通过电路规避问题还没有了解过。 rs485和rs422有相同的地方&#xff0c;485满足422的规…

python oa服务器巡检报告脚本的重构和修改(适应数盾OTP)有空再去改

Two-Step Vertification required&#xff1a; Please enter the mobile app OTPverification code: 01.因为巡检的服务器要双因子认证登录&#xff0c;也就是登录堡垒机时还要输入验证码。这对我的巡检查服务器的工作带来了不便。它的机制是每一次登录&#xff0c;算一次会话…

AI安全:从现实关切到未来展望

近年来&#xff0c;人工智能技术飞速发展&#xff0c;从简单的图像识别到生成对话&#xff0c;从自动驾驶到医疗诊断&#xff0c;AI技术正深刻改变着我们的生活。然而&#xff0c;伴随着这些进步&#xff0c;AI的安全性和可控性问题也日益凸显。这不仅涉及技术层面的挑战&#…

c++ 笔记

基础知识 1. 指针、引用2. 数组3. 缺省参数4. 函数重载5. 内联函数6. 宏7. auto8. const9. 类和对象10. 类的6个默认成员函数11. 初始化列表12. this指针13. C/C的区别14. C 三大特性15. 结构体内存对齐规则16. explicit17. static18. 友元类、友元函数19. 内部类20. 内存管理&…

介绍一下strncmp(c基础)

strncmp是strcmp的进阶版 链接介绍一下strcmp(c基础)-CSDN博客 作用 比较两个字符串的前n位 格式 #include <string.h> strncmp (arr1,arr2,n); 工作原理&#xff1a;strcmp函数按照ACII&#xff08;字符编码顺序&#xff09;比较两个字符串。它从两个字符串的第一…

得物彩虹桥架构演进之路-负载均衡篇

文 / 新一 一、前言 一年一更的彩虹桥系列又来了&#xff0c;在前面两期我们分享了在稳定性和性能2个层面的一些演进&优化思路。近期我们针对彩虹桥 Proxy 负载均衡层面的架构做了一次升级&#xff0c;目前新架构已经部署完成&#xff0c;生产环境正在逐步升级中&#xf…

【ubuntu】数学人的环境搭建

Python 语言环境 python 的 pip 第三方库管理 sudo apt install python3-pippython 的 idle 界面 sudo apt install idle3R 语言环境 sudo apt install r-cran-zoo### RStudio 界面 ubuntu sudo snap install rstudio --classicJulia 语言环境 sudo snap install julia --…