Vue 04 Vue 中的 Ajax、slot 插槽

news2025/1/11 10:05:41

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.coloradmin.cn/o/1552755.html

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

相关文章

Unity 学习日记 12.小球撞击冰块游戏

Unity 学习日记 12.小球撞击冰块游戏

目录 1.准备场景 2.让小球动起来 3.用鼠标把小球甩出去 4.加入鼠标点击小球的判断 5.小球与冰块的碰撞测试 6.撞击后销毁冰块 ​编辑 7.显示游戏计时 8.显示扔球次数 9.显示剩余冰块个数 10.游戏结束 11.完整代码 下载源码 UnityPackage 最终效果&#xff1a; 1.准…
阅读更多...
Idea2023.3.6版本无法启动设置界面-settings界面打不开无反应---IntelliJ Idea工作笔记013

Idea2023.3.6版本无法启动设置界面-settings界面打不开无反应---IntelliJ Idea工作笔记013

先说一下网上有,把某个文件删除的 有说是因为汉化问题的 可以看到,其实都不是,这样弄就好了,很简单 Please report thisjava.lang.ClassCastException: class [Lcom.intellij.execution.filters.CompositeInputFilter$InputFilterWrapper; cannot be cast to class java.uti…
阅读更多...
关于使用vscode搭建c/c++编程环境

关于使用vscode搭建c/c++编程环境

目录 关于使用vscode搭建c/c编程环境一、前言二、安装 IDE 二、安装TDM-GCC安装三、安装C/C环境四、编写代码并进行编译 关于使用vscode搭建c/c编程环境 一、前言 一直觉得vscode是生产强有力的生产工具&#xff0c;基于此&#xff0c;做一篇学习笔记进行记录。 二、安装 ID…
阅读更多...
洛谷 P1379 八数码难题

洛谷 P1379 八数码难题

代码如下&#xff1a; #include<bits/stdc.h> using namespace std; struct node{string s;int pos; }star,en; map<string,int>mp[2]; queue<node>q[2]; int main(){cin>>star.s;en.s"123804765";for(int i0;i<9;i){if(star.s[i]0) sta…
阅读更多...
服务器停止解析域名，但仍然可以访问到

服务器停止解析域名，但仍然可以访问到

1.centos7 如何刷新dns缓存 在CentOS 7上&#xff0c;DNS缓存由nscd&#xff08;Name Service Cache Daemon&#xff09;管理&#xff0c;如果系统上安装了nscd&#xff0c;可以通过清除nscd缓存来刷新DNS缓存。 要刷新DNS缓存&#xff0c;请执行以下命令&#xff1a; sudo …
阅读更多...
【XXL-JOB】执行器架构设计和源码解析

【XXL-JOB】执行器架构设计和源码解析

简介 XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&#xff0c;开箱即用。 XXL-JOB分为B/S架构&#xff0c;调用中心是XXL-JOB服务端&#xff0c;执行器是客户端。 调度中心核…
阅读更多...
入门指南｜营销中人工智能生成内容的主要类型 [新数据、示例和技巧]

入门指南｜营销中人工智能生成内容的主要类型 [新数据、示例和技巧]

由于人工智能技术的进步&#xff0c;内容生成不再是一项令人头疼的任务。随着人工智能越来越多地接管手动内容制作任务&#xff0c;营销人员明智的做法是了解现有的不同类型的人工智能生成内容&#xff0c;以及哪些内容从中受益最多。这些工具可以帮助我们制作对您的受众和品牌…
阅读更多...
3.28C++

3.28C++

复数类的实现&#xff0c;写出三种构造函数&#xff0c;算术运算符、关系运算符、逻辑运算符重载尝试实现自增、自减运算符的重载 #include <iostream> using namespace std; class Num {int rel; //实部int vir; //虚部 public:Num():rel(2),vir(1){}Num(int rel,…
阅读更多...
若依 3.8.7版本springboot前后端分离 整合mabatis plus

若依 3.8.7版本springboot前后端分离 整合mabatis plus

1.去掉mybatis 这一步我没有操作&#xff0c;看别人的博客有说不去掉可能冲突&#xff0c;也可能不冲突&#xff0c;我试下来就没去掉如需要去除&#xff0c;到总的pom.xml中properties标签下的<mybatis-spring-boot.version>x.x.x</mybatis-spring-boot.version>…
阅读更多...
如何在极狐GitLab 自定义 Pages 域名、SSL/TLS 证书

如何在极狐GitLab 自定义 Pages 域名、SSL/TLS 证书

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了在极狐GitLab 用户…
阅读更多...
深圳区块链交易所app系统开发,撮合交易系统开发

深圳区块链交易所app系统开发,撮合交易系统开发

随着区块链技术的迅速发展和数字资产市场的蓬勃发展&#xff0c;区块链交易所成为了数字资产交易的核心场所之一。在这个快速发展的领域中&#xff0c;区块链交易所App系统的开发和撮合交易系统的建设至关重要。本文将探讨区块链交易所App系统开发及撮合交易系统的重要性&#…
阅读更多...
包子凑数（蓝桥杯，闫氏DP分析法）

包子凑数（蓝桥杯，闫氏DP分析法）

题目描述&#xff1a; 小明几乎每天早晨都会在一家包子铺吃早餐。 他发现这家包子铺有 N 种蒸笼&#xff0c;其中第 i 种蒸笼恰好能放 Ai 个包子。 每种蒸笼都有非常多笼&#xff0c;可以认为是无限笼。 每当有顾客想买 X 个包子&#xff0c;卖包子的大叔就会迅速选出若干笼…
阅读更多...
解决：PytorchStreamWriter failed writing file data

解决：PytorchStreamWriter failed writing file data

文章目录 问题内容问题分析解决思路 问题内容 今天在炼丹的时候&#xff0c;我发现模型跑到140步的时候保存权重突然报了个问题&#xff0c;详细内容如下&#xff1a; Traceback (most recent call last):File "/public/home/dyedd/.conda/envs/diffusers/lib/python3.8…
阅读更多...
uniapp输入框事件（防抖）

uniapp输入框事件（防抖）

一、描述 在输入框输入内容或者说输入关键词的时候&#xff0c;往往都要进行做防抖处理。如果不做防抖&#xff0c;你输入什么&#xff0c;动态绑定的数据就会保持一致。这样不好吗&#xff0c;同步获取。有个业务场景&#xff0c;如果是搜索框&#xff0c;你每次一个字符&…
阅读更多...
2024年第十届国际虚拟现实大会（ICVR 2024）即将召开！

2024年第十届国际虚拟现实大会（ICVR 2024）即将召开！

会议面向虚拟现实、增强现实、人工智能等互联网新技术领域的专家及学者&#xff0c; 致力于共同促进国内外虚拟现实的发展与应用。 2014年至今&#xff0c;ICVR在全球新加坡&#xff0c;美国洛杉矶&#xff0c;中国成都&#xff0c;香港等国家及地区召开&#xff0c;面向虚拟现…
阅读更多...
力扣面试150 二叉搜索树的最小绝对差 中序遍历

力扣面试150 二叉搜索树的最小绝对差 中序遍历

Problem: 530. 二叉搜索树的最小绝对差 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 录哥题解 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( 1 ) O(1) O(1) Code // 递归 class Solution {int ans Integer.MAX_VALUE;TreeNode pre;//一开…
阅读更多...
C++的非类型模板参数与模板分离编译（模板显式实例化）

C++的非类型模板参数与模板分离编译（模板显式实例化）

非类型模板参数与模板分离编译&#xff08;模板显式实例化&#xff09; 文章目录 非类型模板参数与模板分离编译&#xff08;模板显式实例化&#xff09;前言一、非类型模板参数二、模版分离编译1. 分离编译概念2. 模版的分离编译问题案例解决方法 总结 前言 ​ 本篇博客文章介…
阅读更多...
vue2源码解析——Vue.set/$set方法如何给响应式对象添加属性

vue2源码解析——Vue.set/$set方法如何给响应式对象添加属性

在Vue 2中需要向响应式对象添加新属性时&#xff0c;可以使用Vue.set或$set方法来实现。这两个方法的作用是向响应式对象添加属性并确保这个新属性也是响应式的。 为什么会有vue.set方法 Vue提供了Vue.set方法主要是为了解决在Vue 2.x 中动态添加属性时可能遇到的响应性问题。 …
阅读更多...
八大技术趋势案例（区块链量子计算）

八大技术趋势案例（区块链量子计算）

科技巨变，未来已来，八大技术趋势引领数字化时代。信息技术的迅猛发展，深刻改变了我们的生活、工作和生产方式。人工智能、物联网、云计算、大数据、虚拟现实、增强现实、区块链、量子计算等新兴技术在各行各业得到广泛应用，为各个领域带来了新的活力和变革。 为了更好地了解…
阅读更多...
钡铼技术R40路由器助力智能船舶航行数据实时传输与分析

钡铼技术R40路由器助力智能船舶航行数据实时传输与分析

钡铼技术R40路由器在智能船舶领域的应用&#xff0c;对于航行数据的实时传输与分析具有重要意义。随着航运业的不断发展和智能化水平的提升&#xff0c;船舶航行数据的及时传输和有效分析对船舶的安全、运营效率等方面至关重要。而引入钡铼技术R40路由器&#xff0c;则可以实现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023