Vue 04 Vue 中的 Ajax、slot 插槽

Vue学习

  • Vue 04
  • 01 Vue中的Ajax
    • 服务器准备
    • axios使用
      • 跨域问题解决
      • Vue-CLI 配置代理1
      • Vue-CLI 配置代理2
      • 案例: 用户搜索
      • vue-resource
    • 02 slot插槽
      • 默认插槽
      • 具名插槽
      • 作用域插槽
      • slot总结

Vue 04

B站 Vue全家桶（BV1Zy4y1K7SH） 学习笔记

Vue 中的 ajax

01 Vue中的Ajax

服务器准备

老师写好了一个服务器 V:\Web\Vue_\myCode_Vue2\test_proxy_server

在这里插入图片描述

在 cmd 中 node server1 运行

在这里插入图片描述

服务器1 开在电脑的5000端口。

是普通的GET请求，返回一些学生的信息，通过浏览器可以看到：

在这里插入图片描述

服务器2 开在电脑的5001端口。

在这里插入图片描述

常用的发送一个AJAX请求的方式有：

1、xhr：new XMLHttpRequest() xhr.open() xhr.send() 不常用

2、jQuery $.get $.post 里面封装了很多DOM操作 但vue react不操作DOM

3、axios 尤雨溪推荐

4、fetch

jQuery axios是对 XHR的封装，fetch和XHR平级，fetch是promise风格的

axios使用

记得先打开自己写的服务器 http://localhost:5000/students

① 下载 npm i axios

② 引入 import ‘axios’ from axios

③ 使用 axios

<template><div><button @click="getStudent">获取学生信息</button></div>
</template><script>
import axios from 'axios'
export default {name: 'App',methods: {getStudent() {axios.get('http://localhost:5000/students').then(response=>{console.log('请求成功', response.data);},error => {console.log('请求失败', error.message);})}}
}
</script>

跨域问题解决

发现报错

在这里插入图片描述

捕获到关键信息 CORS 、‘Access-Control-Allow-Origin’ 得知跨域了。

跨域的意思是：违背了同源策略（同源策略规定了三个一致：协议名、主机名、端口号）。比如我们在电脑上运行这个代码的时候处于8080端口号，http://localhost:8080/ 协议名是http 主机名是 localhost，端口号是8080。

请求发出去了，服务器接收到了，也返回了数据，但是浏览器发现跨域，就没有把数据给我们。

在这里插入图片描述

怎么解决跨域？

1、cors解决：不用前端人员做什么事情，写服务器的程序员返回响应的时候，加几个特殊的响应头，浏览器看到之后知道数据必须给你。

2、jsonp解决：借助了script标签的src属性在引入外部资源的时候不受同源策略的限制这个特点，实现的。真正开发用的很少。而且也只能解决 GET 请求。

3、配置一个代理服务器：开发中用的很多。

代理服务器本身是一个服务器，代理服务器跟我们（前端人员）所处的端口号是一样的。代理服务器接受到我们的请求之后，向服务器请求，并把数据给我们。

在这里插入图片描述

代理服务器（8080）和服务器（5000）打交道不需要AJAX，因为AJAX是前端技术。两台服务器之间通信使用HTTP请求就可以了。

  • 代理服务器的开启

1、nginx 利用 nginx 开启，比较复杂

2、vue-cli（本节课使用）

Vue-CLI 配置代理1

Vue-CLI开启代理服务器

官方文档：https://cli.vuejs.org/zh/config/#devserver-proxy

module.exports = {devServer: {proxy: 'http://localhost:4000'}
}

目前来说在我们的电脑上有三台服务器，① 开在本机8080端口号上的服务器（vue网页），是vue-cli帮忙开的 ② server1 ③ server2

待会配置完之后电脑上又会多出一台，端口号是8080（代理服务器）

在这里插入图片描述

  • 具体使用（vue.config.js中）

在这里插入图片描述
在这里插入图片描述

注意事项/问题

① 代理服务器不会把所有的请求转发给5000（当请求的数据代理服务器有、8080本来就有）

  • 说明

刚才说过 vue-cli 帮我们开了一个服务器 http://localhost:8080/ （网页），注意public 文件夹是我们的根目录，8080服务器下到底有什么，就看 public 文件夹下有什么。
在这里插入图片描述

假如当前public文件夹下有students，那么代理服务器就不会把请求给5000。

② 不能配置多个代理

当前的代理服务器只能 把数据转发给 5000 不能转发给别的。

Vue-CLI 配置代理2

官方文档：https://cli.vuejs.org/zh/config/#devserver-proxy

module.exports = {devServer: {proxy: {'/api': {target: '<url>',ws: true,changeOrigin: true},
// 注意注意注意注意注意注意注意注意注意 下面的部分是上面部分精简而来的'/foo': {target: '<other_url>'}}}
}

/api 是请求前缀。我们（ http://localhost:8080/）给代理服务器发送请求后，它会判断前缀是不是api，如果不是就不走代理，如果是就 走。这个api是可以改名字的，比如改成 /atguigu

target：如果前缀是api，目标地址是哪里

  • 实例
    在这里插入图片描述
    在这里插入图片描述

VUE脚手架配置代理

方法一

在 vue.config.js 中添加如下配置：

devServer: {proxy: 'http://localhost:5000'
}

说明：

① 优点：配置简单，请求资源时直接发送给前端8080即可

② 缺点：不能配置多个代理，不能灵活控制请求是否走代理

③ 工作方式：如果按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二

编写 vue.config.js 配置具体代理规则：

在这里插入图片描述

说明：

① 优点：可以配置多个代理，且可以灵活控制请求是否走代理

② 缺点：配置略微繁琐，请求资源时必须加前缀 http://localhost:8080/atguigu/students

案例: 用户搜索

组件化编码流程（通用）

1.实现静态组件：抽取组件，使用组件实现静态页面效果

2.展示动态数据：

​ 数据的类型、名称是什么？

​ 数据保存在哪个组件？

3.交互——从绑定事件监听开始

  • 实现

github提供的API https://api.github.com/search/users?q=xxx

github的后端工程师已经使用 cors 解决了跨域问题

静态组件

在这里插入图片描述

注意：引入 bootstrap.css（公共的第三方库）的方法 ①在src下新建文件夹assets (因为是import引入所以会进行严格检查，所以会报错) ② 在public在新建一个css文件夹，然后再 public/index.html 内引入。

在这里插入图片描述

  • 请求数据并展示

跨域问题：github的后端工程师已经使用 cors 解决了跨域问题

组件之间的通信：这里利用总线

  • 完善功能

在最开始的页面 添加欢迎词

点击搜索之后 有加载中

经分析，List组件有四种数据呈现：1欢迎界面 2加载界面 3用户界面 4失败界面
在这里插入图片描述

  • ES6

在这里插入图片描述

vue-resource

（了解即可 axios用的更多）

vue-resource是一个发送 Ajax 请求库，之前说过xhr jQery axios fetch

这是一个vue的插件，所以使用方法为 Vue.use，使用完之后所有的 vm（vue实例） vc（vuecomponent实例）都有了这个插件

对XHR封装

  • 实例

① npm i vue-resource

② Vue.use 注意这里肯定是写在 main.js里面的，因为只有这个文件中引入了Vue

③ 使用完之后所有的 vm（vue实例） vc（vuecomponent实例）都有了这个插件

在这里插入图片描述

使用vue-resource：只需要把axios换成 vue-resource
在这里插入图片描述

02 slot插槽

效果一

在这里插入图片描述

默认插槽

效果二

（默认插槽）

在这里插入图片描述

要实现这种方式，可以使用v-show，但是很麻烦

使用默认插槽

  • App.vue
<template><div class="container"><MyCategory title="美食" ><img :src="grill"></MyCategory><MyCategory title="游戏"><ul><li v-for="(item,index) in games" :key="index">{{item}}</li></ul></MyCategory><MyCategory title="电影"><img :src="movie" alt=""></MyCategory></div>
</template><script>
import MyCategory from './components/MyCategory.vue'export default {name: 'App',components: {MyCategory},data() {return {grill: require('./assets/grill.jpg'), movie: require('./assets/movie.jpg'), foods: ['火锅','烧烤','小龙虾','牛排'],games: ['红色警戒','穿越火线','原神','超级玛丽'],films: ['教父','拆弹专家','你好李焕英','生化危机']}},
}
</script><style>.container {display: flex;justify-content: space-around;}
</style>
  • MyCategory
<template><div class="category"><h3>{{title}}分类</h3><slot>我是一个默认值</slot></div>
</template><script>  
export default {name: 'MyCategory',props: ['listData','title']
}
</script><style>.category {background-color: skyblue;width: 200px;height: 300px;overflow: hidden;}h3 {text-align: center;background-color: orange;}img {width: 100%;}
</style>

具名插槽

  • 示例

name属性

在这里插入图片描述

slot属性

在这里插入图片描述

注意：如果使用 v-slot、和template（不会被解析成结构）：

<template v-slot:footer><div class="foot"><a href="http://www.atguigu.com">经典</a><a href="http://www.atguigu.com">热门</a><a href="http://www.atguigu.com">推荐</a></div>
</template>

作用域插槽

App组件时MyCategory的使用者，同时提供数据
在这里插入图片描述
在这里插入图片描述

如果此时把data放去 MyCategory 组件，可以不用插槽就能实现。

  • 新需求

相同的数据，但是展示的顺序（展示的顺序由使用者决定）不一样。

数据在MyCategory组件中，但是App中来设置（代码如下），就需要使用到作用域插槽。

在这里插入图片描述

  • 作用于插槽使用

App.vue这里支持解构

scope=“{mygames}”

在这里插入图片描述

slot总结

1、作用：让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信的方式，适用于父组件===>子组件。

2、分类：默认插槽、具名插槽、作用域插槽

① 默认插槽

父组件中
<Category><div> html结构 </div>
</Category> 子组件中
<template><div> <slot>插槽默认内容</slot></div>
</template>

② 具名插槽

注意这里slot有两种写法

父组件中
<Category><template slot='center'><div> html结构1 </div></template>
</Category> <Category><template v-slot:'footer'><div> html结构1 </div></template>
</Category> 子组件中
<template><div> <slot name="center">插槽默认内容</slot><slot name="footer">插槽默认内容</slot></div>
</template>

③ 作用于插槽

理解：数据在组件的自身，但根据 数据生成的结构 需要组件的使用者来决定。(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

在这里插入图片描述

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

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

相关文章

【动态规划】斐波那契数列模型

【动态规划】斐波那契数列模型

【动态规划】斐波那契数列模型 文章目录 【动态规划】斐波那契数列模型前言一、第 N 个泰波那契数二、三步问题三、使用最小花费爬楼梯四、解码方法总结 前言 ​ 我们将深入探讨解决斐波那契数列模型相关问题的解决方法。通过一系列精心挑选的例题&#xff0c;我们将展示如何运…
阅读更多...
Excel:使用VLOOKUP函数，抓取指定数据，后一个列

Excel:使用VLOOKUP函数，抓取指定数据，后一个列

Excel:使用VLOOKUP函数&#xff0c;抓取指定数据&#xff0c;后一个列 我们有这样一个数据源 要是实现这个页面的赋值 就是对应关系映射 使用 VLOOKUP(A2,Sheet2!$A$2:$B$9,2,FALSE)第一个参数是需要匹配的单元格。 第二个参数是数据源&#xff0c;我这里数据源用的是shee…
阅读更多...
Unity 打开外部程序的方法

Unity 打开外部程序的方法

在Unity中打开外部程序可以使用System.Diagnostics.Process类。 1、编写控制脚本&#xff1a; using System.Collections; using System.Collections.Generic; using System.Diagnostics; using UnityEngine;public class OpenExternalProgram : MonoBehaviour {public strin…
阅读更多...
spring boot actuator 安全配置 springboot的安全性

spring boot actuator 安全配置 springboot的安全性

关于springboot Actuator框架的安全配置方案&#xff1a; 加入security安全验证框架 方案一&#xff1a; 配置信息&#xff1a; spring:security:user:password: adminname: adminmanagement:endpoints:web:base-path: /monitorexposure:include: "*"# 排除端点e…
阅读更多...
大语言模型中的强化学习与迁移学习技术

大语言模型中的强化学习与迁移学习技术

文章目录 大语言模型中的强化学习与迁移学习技术大语言模型常用的训练方法主要包括以下几种强化学习在大语言模型中的作用与意义迁移学习在大语言模型中的作用与意义异同强化学习在大语言模型中的具体技术：迁移学习在大语言模型中的具体技术：Agent与Agent框架基于大语言模型预…
阅读更多...
Unity图集编辑器

Unity图集编辑器

图集编辑器 欢迎使用图集编辑器新的改变编辑器图片 欢迎使用图集编辑器 Unity图集操作很是费劲 无法批量删除和添加图集中的图片 新的改变 自己写了一个图集编辑器 客&#xff1a; 支持批量删除 左键点击图片代表选中 右键点击图标定位到资产支持批量添加 选中图片拖拽到编…
阅读更多...
python统计分析——单样本均值检验

python统计分析——单样本均值检验

参考资料&#xff1a;python统计分析【托马斯】 1、单样本均值的t检验 检验一个正态分布数据的均值和一个参考值的差异&#xff0c;我们一般使用单样本t检验&#xff0c;该检验基于t分布。 如果我们知道一个正态分布总体的均值和标准差&#xff0c;那么我们可以计算对应的标准…
阅读更多...
CMOS逻辑门电路

CMOS逻辑门电路

按照制造门电路的三极管不同&#xff0c;分为MOS型、双极性和混合型。MOS型集成逻辑门有CMOS、NMOS、PMOS&#xff1b;双极型逻辑门有TTL&#xff1b;混合型有BiCMOS。 CMOS门电路是目前使用最为广泛、占主导地位的集成电路。早期CMOS电路速度慢、功耗低&#xff0c;后来随着制…
阅读更多...
Rust教程：How to Rust-基本类型

Rust教程：How to Rust-基本类型

专栏简介 本专栏是优质Rust技术专栏&#xff0c;推荐精通一门技术栈的蟹友&#xff0c;不建议完全无计算机基础的同学 感谢Rust圣经开源社区的同学&#xff0c;为后来者提供了非常优秀的Rust学习资源 本文使用&#xff1a; 操作系统macOS Sonoma 14 / Apple M1编译器&#…
阅读更多...
ubuntu编译OpenCV and seetaFace2

ubuntu编译OpenCV and seetaFace2

opencv opencv-4.5.2 opencv_contrib-4.5.2 SeetaFace2 SeetaFace2-master https://github.com/seetafaceengine 指定安装目录&#xff0c;和OpenCV放一个目录下了 安装前 安装 安装后 Qt安装 Windows下 Linux下 报错1 原因&#xff1a; 报错…
阅读更多...
Opencv 读取灰度图像会识别为3通道问题

Opencv 读取灰度图像会识别为3通道问题

场景&#xff1a; 我们都知道灰度图或者红外图都是单通道图片&#xff0c;而彩色图片是三通道图片。但是当我们用img.shape读取灰度图/红外图片的时候返回的却是三通道结果。 import cv2img_path r灰度图 img cv2.imread(img_path) print(img.shape) # 如果我将图片灰度处理…
阅读更多...
HTTP状态 405 - 方法不允许

HTTP状态 405 - 方法不允许

方法有问题。 用Post发的请求&#xff0c;然后用Put接收的。 大家也可以看看是不是有这种问题 <body><h1>HTTP状态 405 - 方法不允许</h1><hr class"line" /><p><b>类型</b> 状态报告</p><p><b>消息…
阅读更多...
Rust控制台输出跑马灯效果，实现刷新不换行，实现loading效果

Rust控制台输出跑马灯效果，实现刷新不换行，实现loading效果

要在 Rust 中实现控制台刷新而不换行&#xff0c;以实现类似 "loading" 状态的效果&#xff0c;你可以使用 \r&#xff08;回车符&#xff09;来覆盖上一行的内容。 use std::io::{self, Write}; use std::thread; use std::time::Duration;fn main() {let loading_…
阅读更多...
没学数模电可以玩单片机吗?

没学数模电可以玩单片机吗?

我们首先来看一下数电模电在单片机中的应用。数电知识在单片机中主要解决各种数字信号的处理、运算&#xff0c;如数制转换、数据运算等。模电知识在单片机中主要解决各种模拟信号的处理问题&#xff0c;如采集光照强度、声音的分贝、温度等模拟信号。而数电、模电的相互转换就…
阅读更多...
MongoDB 7.x 绑定多个IP（bindIp）和IP范围段（IP/24）

MongoDB 7.x 绑定多个IP（bindIp）和IP范围段（IP/24）

早上安装了最新版的MOngoDB7.0&#xff0c;仅仅是想测试一些功能&#xff0c;暂无复杂操作的想法。 于是在远程的机器上&#xff0c;安装启动&#xff0c;一切正常。 网上找了教程&#xff0c;绑定IP的做法基本是修改mongod.cfg文件中的bindIp属性&#xff1a; Windows系统的…
阅读更多...
蓝桥杯_day6

蓝桥杯_day6

文章目录 不同路径不同路径II拿金币珠宝的最高价值 不同路径 【题目描述】 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为…
阅读更多...
十一、Spring源码学习之registerListeners方法

十一、Spring源码学习之registerListeners方法

registerListeners()方法 protected void registerListeners() {// Register statically specified listeners first.//获取容器中事件监听并存放到多播器中 applicationListenersfor (ApplicationListener<?> listener : getApplicationListeners()) {getApplicationE…
阅读更多...
Flutter——用户关闭键盘后强制拉起键盘

Flutter——用户关闭键盘后强制拉起键盘

Bug背景 今天在弄输入框的时候&#xff0c;发现用户手动关闭键盘后&#xff0c;因为自定义组件的特殊性&#xff0c;我在点击输入框后并没有唤起键盘。 一般点击输入框或者某个组件&#xff1a; GestureDetector(onTap: () {FocusScope.of(context).requestFocus(_focusNode…
阅读更多...
解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

解决element ui中的el-tree组件default-checked-keys默认勾选节点问题 需求解决方法方法1方法2 需求 选中子节点的时候&#xff0c;父节点必须被选中&#xff0c;但是仅展示被选中父节点和子节点 解决方法 方法1 html部分代码&#xff1a; <el-treeclass"filter-tr…
阅读更多...
【I.MX6ULL移植】Ubuntu-base根文件系统移植

【I.MX6ULL移植】Ubuntu-base根文件系统移植

1.下载Ubuntu16.04根文件系统 http://cdimage.ubuntu.com/ 1 2 3 4 5 2.解压ubuntu base 根文件系统 为了存放 ubuntu base 根文件系统&#xff0c;先在 PC 的 Ubuntu 系统中的 nfs 目录下创建一个名为 ubuntu_rootfs 的目录&#xff0c;命令如下&#xff1a; 【注意&…
阅读更多...
最新文章

Copyright @ 2022~2023