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.rhkb.cn/news/477037.html

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

相关文章

算法日记 32 day 动态规划(完全背包)

同样是背包问题&#xff0c;但01背包和完全背包是两个类型的问题。 完全背包&#xff1a; 完全背包与01背包的区别在于物品的个数是否是无限的。除此之外&#xff0c;在解决01背包的时候dp的背包遍历的顺利是倒序&#xff0c;为的是保证物品只被添加一次&#xff0c;而完全背包…

数据结构之树与二叉树

华子目录 1.树和二叉树的定义1.1树的定义1.2树的基本术语1.3线性结构和树结构1.4二叉树的定义 2.二叉树的性质和存储结构2.1二叉树的性质2.2二叉树的存储结构2.2.1顺序存储2.2.2链式存储 2.3遍历二叉树2.4大作业&#xff1a;二叉树的基本操作2.4.1代码思路&#xff08;仅供参考…

MYSQL——多表设计以及数据库中三种关系模型

大致介绍数据库中三种关系模型 一对多&#xff08;1:N&#xff09; 定义&#xff1a; 一个实体可以与另一个实体的多个实例相关联&#xff0c;而后者只能与前者的一个实例相关联。 例子&#xff1a; 学生和课程的关系。 学生&#xff08;1&#xff09;&#xff1a;每个学生…

企业网页设计的安全与数据保护

企业网页设计不仅要考虑美观和功能性&#xff0c;安全与数据保护也是重中之重。在这个信息爆炸的时代&#xff0c;用户的数据隐私和安全问题日益凸显&#xff0c;企业必须采取多种措施来保障用户的信息安全。 首先&#xff0c;**SSL加密**是基础中的基础。通过使用SSL证书&…

观察者模式和订阅模式

观察者模式和订阅模式在概念上是相似的&#xff0c;它们都涉及到一个对象&#xff08;通常称为“主题”或“发布者”&#xff09;和多个依赖对象&#xff08;称为“观察者”或“订阅者”&#xff09;之间的关系。然而&#xff0c;尽管它们有相似之处&#xff0c;但在某些方面也…

logback动态获取nacos配置

文章目录 前言一、整体思路二、使用bootstrap.yml三、增加环境变量四、pom文件五、logback-spring.xml更改总结 前言 主要是logback动态获取nacos的配置信息,结尾完整代码 项目springcloudnacosplumelog&#xff0c;使用的时候、特别是部署的时候&#xff0c;需要改环境&#…

工具学习_Docker

0. Docker 简介 Docker 是一个开源平台&#xff0c;旨在帮助开发者构建、运行和交付应用程序。它通过容器化技术将应用程序及其所有依赖项打包在一个标准化的单元&#xff08;即容器&#xff09;中&#xff0c;使得应用程序在任何环境中都能保持一致的运行效果。Docker 提供了…

基础知识学习上

基础知识学习上 1.关于print1.1 format 方法 2.运算符2.1 除法运算2.2 幂运算 3.条件控制语句3.1 if语句3.2 循环语句 4.复杂数据类型4.1列表4.2字典4.3字符串 5.函数 1.关于print 分隔符 print(1, 2, 3, 4, sep-) print(1, 2, 3, 4, sep。)结尾符 print(1, 2, 3, 4, end?) pr…

无监督跨域目标检测的语义一致性知识转移

Semantic consistency knowledge transfer for unsupervised cross domain object detection 无监督跨域目标检测的语义一致性知识转移 作者: Zichong Chen, Ziying Xia, Xiaochen Li, Junhao Shi, Nyima Tashi, Jian Cheng 所属机构: 电子科技大学信息与通信工程学院&…

AI智能稿件排版系统订单管理系统

在现代制造业和服务行业中&#xff0c;高效的生产流程和精确的订单管理是企业保持竞争优势的核心要素。AI智能稿件排版系统和订单管理系统作为一体化解决方案&#xff0c;以其强大的自动化能力和智能化技术&#xff0c;帮助企业实现排版效率提升、数据格式兼容性增强和生产流程…

Android Google登录接入

官方文献&#xff1a; 1、前期准备&#xff1a; https://developers.google.cn/identity/sign-in/android/legacy-start-integrating?hlzh-cnhttps://developers.google.cn/identity/sign-in/android/legacy-start-integrating?hlzh-cn 2、具体开发&#xff1a; 新版 Googl…

论文浅尝 | MindMap:知识图谱提示激发大型语言模型中的思维图(ACL2024)

笔记整理&#xff1a;和东顺&#xff0c;天津大学硕士&#xff0c;研究方向为软件缺陷分析 论文链接&#xff1a;https://aclanthology.org/2024.acl-long.558/ 发表会议&#xff1a;ACL 2024 1. 动机 虽然大语言模型&#xff08;LLMs&#xff09;已经在自然语言理解和生成任务…

Spring Cloud Data Flow快速入门Demo

1.什么是Spring Cloud Data Flow&#xff1f; Spring Cloud Data Flow 是一个用于构建和编排数据处理流水线的云原生框架。它提供了一种简化的方式来定义、部署和管理数据处理任务和流应用程序。以下是一些关键特性和组件&#xff1a; 关键特性 流处理&#xff1a; 支持实时数…

C# .NET环境下调用ONNX格式YOLOV8模型问题总结

我的环境是&#xff1a; Visual Studio: 2019 显卡&#xff1a; 一、遇到问题 1、EntryPointNotFoundException:无法在DLL“onnxruntime”中找到名为“OrtGetApiBase”的入口点。差了下原因&#xff0c;入口点是启动项中的问题。 原因&#xff1a;之前用yolov7时安装的版本在C…

量子感知机

神经网络类似于人类大脑&#xff0c;是模拟生物神经网络进行信息处理的一种数学模型。它能解决分类、回归等问题&#xff0c;是机器学习的重要组成部分。量子神经网络是将量子理论与神经网络相结合而产生的一种新型计算模式。1995年美国路易斯安那州立大学KAK教授首次提出了量子…

AI Large Language Model

AI 的 Large Language model LLM , 大语言模型&#xff1a; 是AI的模型&#xff0c;专门设计用来处理自然语言相关任务。它们通过深度学习和庞大的训练数据集&#xff0c;在理解和生成自然语言文本方面表现出色。常见的 LLM 包括 OpenAI 的 GPT 系列、Google 的 PaLM 和 Meta…

运维团队3D可视化智能机房管理方案

随着信息技术的飞速发展&#xff0c;机房作为信息技术基础设施的核心部分&#xff0c;其管理效率与可视化程度对运维团队的工作质量有着直接影响。本文将介绍一种结合3D可视化技术的机房管理方案&#xff0c;为运维团队提供一种新的视角和工具&#xff0c;以提升机房管理的效率…

CKA认证 | Day2 K8s内部监控与日志

第三章 Kubernetes监控与日志 1、查看集群资源状态 在 Kubernetes 集群中&#xff0c;查看集群资源状态和组件状态是非常重要的操作。以下是一些常用的命令和解释&#xff0c;帮助你更好地管理和监控 Kubernetes 集群。 1.1 查看master组件状态 Kubernetes 的 Master 组件包…

111 - Lecture 10

File I/O and GUI with JavaFX 文件输入/输出与JavaFX图形用户界面 一、Overview 1. File I/O &#xff08;1&#xff09; learning Java File I/O mechanism &#xff08;2&#xff09; writing into and reading from a file 使用文件I/O进行数据读取和…

分享一下arr的意义(c基础)(必看)(牢记)

arr 即数组名 一般指数组首元素地址 在两种情况下不是 1&#xff1a;sizeof&#xff08;arr&#xff09; arr指整个数组简单讲解一下strlen与sizeof&#xff08;c基础&#xff09;_strzeof在c语言中什么意思-CSDN博客 2&#xff1a;printf&#xff08;"%p",&…