4.Vue 中的 ajax
4.Vue 中的 ajax
作用:使用代理服务器,解决开发环境 Ajax 跨域问题
4.1.配置代理
4.1.1.方式1
在vue.config.js
中添加如下配置:
devServer:{
proxy:"http://localhost:5000"
}
优点:配置简单,请求资源时直接发给起前端(8080)即可。
缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
工作方式:当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)。
4.1.2.方式2
在vue.config.js
中配置具体代理规则:
moudle.exports = {
devServer:{
proxy:{
'/xxx1':{ // '/xxx1':匹配所有以`/xxx1`开头的请求路径
target: 'http://localhost:5000', //代理目标的基础路径
changeOrigin: true,
pathRewrite:{'^/xxx1':''}
},
'/xxx2':{ // '/xxx2':匹配所有以`/xxx2`开头的请求路径
target: 'http://localhost:5000', //代理目标的基础路径
changeOrigin: true,
pathRewrite:{'^/xxx2':''}
},
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
vue中changeOrigin默认为true
react中changeOrigin默认为false
*/
优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
缺点:配置比较繁琐,请求资源时必须加前缀。
4.2.小案例
先安装axios:
npm install axios
List
search
main.js
引入bootsTrap
案例流程
- 创建两个组件:
List
和Search
- 在
public
下创建一个文件夹css
放bootstrap.css
文件,并且在index.html
页面中引入这个文件 - 在
search
和list
两个组件中编写基本的样式和标签 - 在
main.js
中安装全局事件总线
- 在
search
组件中- 在
输入框
添加一个双向绑定事件:v-model="keyWord"
,并且在data
中创建对应的keyWord
,用于收集输入的关键字、 - 导入
axios
- 给
搜索
按钮添加一个点击事件,事件的方法为查找用户
- 编写方法:使用
全局事件总线
,将当前需要的参数传给list
组件,并且使用axios
发送请求给github
进行搜索,记得携带参数
- 在
- 在
list
组件中- 在
data
中创建一个对象,对象有各个时间的属性 - 使用
全局事件总线
,接收search
传过来的参数 - 循环获取每个用户的信息并且展示
- 并且添加三个标签,用于展示欢迎,请求中以及错误信息,这三个标签要判断当前是否要展示
- 在
4.3.slot插槽
作用:可以让
父组件
将内容传递给子组件
,并在子组件
中渲染这些内容。 插槽允许组件在不同的上下文中重复使用,并且可以使组件更通用
和可复用
。 具体来说,插槽允许使用组件的开发者定义一个或多个具有特殊意义的占位符,然后让使用该组件的其他组件填充这些占位符。插槽可以有默认值,也可以具备一定的作用域。 让父组件
可以向子组件
指定位置插入html
结构,也是一种组件间通信
的方式,适用于父组件 ===> 子组件
父组件
向子组件
传递带数据的标签,当一个组件有不确定的结构时, 就需要使用slot
技术注意:插槽内容是在
父组件
中编译后, 再传递给子组件
的。
4.3.1.默认插槽
效果图
代码示例
插槽/子组件 | 使用者/父组件 |
---|---|
![]() |
![]() |
4.3.2.具名插槽
效果图
代码示例
插槽/子组件 | 使用者/父组件 |
---|---|
![]() |
![]() |
作用:给插槽起个名字,可以让使用该组件的其他组件指定的选一个坑进行填充
使用
-
在定义插槽时可以起一个名字:
name="插槽名字"
-
使用插槽
<!-- 方式1 --> slot="插槽名字" <!-- 方式2 --> 只能在template标签中使用:v-slot:插槽名字 !!!!!不带引号的
4.3.3.作用域插槽
可以在
子组件
中定义一个占位符和对应的数据,然后将该数据传递给父组件
,在父组件
中使用该数据来渲染内容。这样就可以在父组件
内部使用子组件
的数据,实现了组件之间更加灵活的通信方式。作用域插槽也可以起名字
效果图
代码示例
插槽/子组件 | 使用者/父组件 |
---|---|
![]() |
![]() |
作用:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定
使用
-
在定义插槽时可以绑定一个数据:
:挖坑者自定义名字:="数据名称"
-
使用插槽:只能在template标签中使用
<!-- 方式1 --> scope="使用者自定义名称" <!--然后再使用数据的地方使用 --> 使用者自定义名称.挖坑者自定义名字 <!-- 即可获取数据--> <!-- 方式2 --> slot-scope="使用者自定义名称" <!--然后再使用数据的地方使用 --> 使用者自定义名称.挖坑者自定义名字 <!-- 即可获取数据--> <!-- 也可以支持es6的语法-->