解决跨域问题
配置代理服务器
代理服务器位于前端应用(客户端)和真实的后端服务器之间。当配置了代理服务器后,前端应用的请求不再直接发送到后端服务器,而是发送到代理服务器。代理服务器在接收到请求后,会根据预先配置的规则将请求转发到真正的后端服务器。例如,在 Vue 项目的开发服务器配置中,如果前端应用的请求路径是以
/api
开头,代理服务器可以将这个请求转发到http://backend - server - address
对应的后端服务器上
cli文档
-
方式一:只能配置一个代理,不能灵活配置走不走代理
优点:配置简单,请求资源时直接发给前端(8080)即可。
缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
// vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({transpileDependencies: true,// 开启代理服务器devServer:{// 开启8888端口的代理proxy:"http://localhost:8888"} })
-
方式二:可以配置多个代理,可以灵活配置走不走代理
优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
缺点:配置略微繁琐,请求资源时必须加前缀。
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>
具名插槽
一个组件可以有多个具名插槽,会根据名字插入代码
- 子组件
<!-- 子组件定义一个插槽,名字是h1Text --><slot name="h1Text"></slot>
- 父组件使用slot
<!-- 父组件在指定名字插槽插入代码--><Category title="1" :dataList="[1,2,3]"><!--在name= h1Text的插槽里面插入代码--><!-- 如果插槽名字是表达式or变量--><h2 slot="h1Text">哈哈哈哈</h2></Category>
- 父组件使用v-slot
<!-- v-slot指定插槽,只能在 template 标签使用-->
<Category title="1" :dataList="[1,2,3]"><template v-slot:h1Tet><h2 slot="h1Text">哈哈哈哈</h2></template>
</Category>
作用域插槽
数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(数据在子组件中,但使用数据所遍历出来的结构由父组件决定)
- 子组件
<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>
- 父组件
<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>