Vue中的ajax【Vue】

news2024/10/3 8:21:02

4. Vue 中的 ajax

4.1 解决开发环境 Ajax 跨域问题

方法一：

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

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

说明：

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  3. 工作方式：若按照上述配置，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二：

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

module.exports = {
	devServer: {
        proxy: {
          '/api': {//匹配所有以‘/api’开头的请求路径
            target: 'http://localhost:5000',//代理目标的基础路径
            pathRewrite: {'^/api': ''},
            ws: true,//用于支持websocket
            changeOrigin: true//用于控制请求头中的host值
          },
          /* '/foo': {
            target: '<other_url>'
          } */
          '/api2': {
            target: 'http://localhost:5001',
            pathRewrite: {'^/api2': ''},
            ws: true,//用于支持websocket
            changeOrigin: true//用于控制请求头中的host值
          },
        }
      }
}

注意：
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
changeOrigin默认值为true
说明：

  1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
  2. 缺点：配置略微繁琐，请求资源时必须加前缀。

4.2 github 用户搜索案例

4.2.1 效果

子组件：List.vue

<template>
    <div class="row">
        <!-- 展示用户列表 -->
      <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
        <a :href="user.html_url" target="_blank">
          <img :src="user.avatar_url" style='width: 100px'/>

        </a>
        <p class="card-text">{{user.login}}</p>
      </div>
      <!-- 展示欢迎词 -->
      <h1 v-show="info.isFirst">欢迎使用！</h1>
      <!-- 展示加载中 -->
      <h1 v-show="info.isLoading ">加载中.....</h1>
      <!-- 展示错误信息 -->
      <h1 v-show="info.errMsg">{{ info.errMsg }}</h1>
    </div>
</template>

<script>

    export default {
        name: 'List',
        data(){
            return {
                info: {
                    isFirst: true,
                    isLoading: false,
                    errMsg: '',
                    users: []
                }
            }
        },
        mounted(){
            this.$bus.$on('updateListData', (dataObj) => {
                this.info = {...this.info, ...dataObj}
                
            })
        },
    }
</script>

<style>

    .album {
        min-height: 50rem; /* Can be removed; just added for demo purposes */
        padding-top: 3rem;
        padding-bottom: 3rem;
        background-color: #f7f7f7;
    }

    .card {
        float: left;
        width: 33.333%;
        padding: .75rem;
        margin-bottom: 2rem;
        border: 1px solid #efefef;
        text-align: center;
    }

    .card > img {
        margin-bottom: .75rem;
        border-radius: 100px;
    }

    .card-text {
        font-size: 85%;
    }


</style>

Search.vue

<template>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
        <button @click="searchUsers">Search</button>
      </div>
    </section>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'Search',
        data(){
            return {
                keyWord: ''
            }
        },
        methods: {
            searchUsers(){
                //请求前更新List的数据
                this.$bus.$emit('updateListData', {isFirst:false, isLoading:true, errMsg:'', users:[]})
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response => {
                        // console.log('请求成功了', response.data);
                        // this.$bus.$emit('getUsers', response.data.items)
                        //请求成功后更新List数据
                        this.$bus.$emit('updateListData', {isLoading:false, errMsg:'', users:response.data.items})
                    },
                    error => {
                        console.log('请求失败了', error.message);
                        //请求失败后更新List数据
                        this.$bus.$emit('updateListData', {isLoading:false, errMsg:error.message, users:[]})

                    }
                )
            }
        }
    }
</script>

父组件：App.vue

<template>
  	<div class="container">
		<Search></Search>
		<list></list>
  	</div>
</template>

<script>
	import Search from './components/Search.vue'
	import List from './components/List.vue'
	export default {
		name:'App',
  		components: { Search, List },
		
	}
</script>

4.3 插槽

  1. 作用：让父组件可以向子组件指定位置插入html结构。也是一种组件间通信的方式，适用于 父组件==>子组件。
  2. 分类：默认插槽、具名插槽、作用域插槽

4.3.1 默认插槽

在这里插入图片描述
Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
        <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

<script>
    export default {
        name: 'Category',
        props: ['title']
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
    video {
		width: 100%;
	}
	img {
        width: 100%;
    }
</style>

App.vue

<template>
  	<div class="container">
		<Category title="美食">
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>
		<Category title="游戏">
			<ul>
            	<li v-for="(g, index) in games" :key="index">{{g}}</li>
        	</ul>
		</Category>
		<Category title="电影">
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
  	</div>
</template>
<script>
	import Category from './components/Category.vue'
	export default {
		name:'App',
  		components: { Category },
		  data() {
			return {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《想见你》']
			}
		},
		
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}
</style>

mian.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

4.3.2 具名插槽

在这里插入图片描述
Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
        <slot name="center">我是一些默认值, 当使用者没有传递具体结构时, 我会出现1</slot>
        <slot name="footer">我是一些默认值, 当使用者没有传递具体结构时, 我会出现2</slot>
    </div>
</template>

<script>
    export default {
        name: 'Category',
        props: ['title']
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
    video {
		width: 100%;
	}
	img {
        width: 100%;
    }
</style>

App.vue

<template>
  	<div class="container">
		<Category title="美食">
			<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
			<a slot="footer" href="http://www.baidu.com">更多美食</a>
		</Category>
		<Category title="游戏">
			<ul slot="center">
            	<li v-for="(g, index) in games" :key="index">{{g}}</li>
        	</ul>
			<div class="foot" slot="footer">
				<a href="http://www.baidu.com">单机游戏</a>
				<a href="http://www.baidu.com">网络游戏</a>
			</div>
		</Category>
		<Category title="电影">
			<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
			<template  v-slot:footer>
				<div class="foot">
					<a href="http://www.baidu.com">经典</a>
					<a href="http://www.baidu.com">热门</a>
					<a href="http://www.baidu.com">推荐</a>
				</div>
				<h4 slot="footer">欢迎前来观影</h4>
			</template>
		</Category>
  	</div>
</template>

<script>
	import Category from './components/Category.vue'
	export default {
		name:'App',
  		components: { Category },
		  data() {
			return {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《想见你》']
			}
		},
		
	}
</script>

<style scoped>
	.container, .foot{
		display: flex;
		justify-content: space-around;
	}
	h4 {
		text-align: center;
	}
</style>

4.3.3 作用域插槽

  1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
    在这里插入图片描述
    Category.vue
<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot :games="games">我是默认的一些内容</slot>
    </div>
</template>

<script>
    export default {
        name: 'Category',
        props: ['title'],
        data() {
			return {
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
			}
		},
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
    video {
		width: 100%;
	}
	img {
        width: 100%;
    }
</style>

App.vue

<template>
  	<div class="container">
		<Category title="游戏">
			<template scope="demo">
				<ul>
            		<li v-for="(g, index) in demo.games" :key="index">{{g}}</li>
        		</ul>
			</template>
		</Category>
		<Category title="游戏">
			<template scope="{games}">
				<ol>
            		<li style="color:red" v-for="(g, index) in games" :key="index">{{g}}</li>
        		</ol>
			</template>
		</Category>
		<Category title="游戏">
			<template slot-scope="{games}">
				<h4 v-for="(g, index) in games" :key="index">{{g}}</h4>
			</template>
		</Category>
  	</div>
</template>

<script>
	import Category from './components/Category.vue'
	export default {
		name:'App',
  		components: { Category },
		  
		
	}
</script>

<style scoped>
	.container, .foot{
		display: flex;
		justify-content: space-around;
	}
	h4 {
		text-align: center;
	}
</style>

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

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

相关文章

更懂业务的用友iuap平台，助力企业升级数智化底座

更懂业务的用友iuap平台，助力企业升级数智化底座

4月19日&#xff0c;一年一度的用友BIP技术大会如约而至。近千位来自三十个行业的企业家、CIO/CDO、企业主管、专家学者、媒体、分析师代表现场参与大会。伴随企业数智化推进&#xff0c;越来越多的企业需要升级数智底座平台。会上&#xff0c;用友介绍了更懂企业业务的用友BIP…
阅读更多...
Android 开发为什么会要用到组件化与插件化？好处在哪？

Android 开发为什么会要用到组件化与插件化？好处在哪？

对于开发者来说&#xff0c;写好代码的第一步就是具备良好的架构能力。但是这项基本的能力&#xff0c;也很少有人具备。就拿最常用的项目架构组件化来说&#xff0c;有多少人用过&#xff1f;又有谁去了解过组件化开发中真正会遇到的问题&#xff0c;以及如何解决&#xff1f;…
阅读更多...
Nacos 1.4.x 升级至 2.x 详细步骤及遇到的问题，亲测可行

Nacos 1.4.x 升级至 2.x 详细步骤及遇到的问题，亲测可行

此前使用的nacos版本是1.4.5&#xff0c;现在nacos最新版本为2.2.2&#xff0c;且修复了旧版本的一些安全问题&#xff0c;下面把详细的升级步骤记录一下&#xff0c;大家一起学习&#xff0c;亲测有效。 主要参考nacos官方升级文档&#xff1a;https://nacos.io/zh-cn/docs/v2…
阅读更多...
瑞吉外卖项目——读写分离

瑞吉外卖项目——读写分离

读写分离 读和写所有压力都由一台数据库承担&#xff0c;压力大数据库服务器磁盘损坏则数据丢失&#xff0c;单点故障 Mysql主从复制 介绍 MySQL主从复制是一个异步的复制过程&#xff0c;底层是基于Nysql数据库自带的二进制日志功能。 就是一台或多台MysQL数据库&#xf…
阅读更多...
字符串 --- 找子串匹配算法

字符串 --- 找子串匹配算法

1.基本介绍 主串&#xff1a;形如 “hello world”的字符串作为一个整体 子串&#xff1a;上面主串的一部分如“world” 在计算机世界&#xff0c;主串找子串的模式很常见&#xff0c;比如要在word文件中找一句指定的话&#xff0c;那么面对海量的信息&#xff0c;我们匹配算法…
阅读更多...
最新入河排污口设置论证、水质影响预测与模拟、污水处理工艺分析及典型建设项目入河排污口方案报告书实例分析

最新入河排污口设置论证、水质影响预测与模拟、污水处理工艺分析及典型建设项目入河排污口方案报告书实例分析

目录 专题一 入河排污口设置论证相关法律与制度解读 专题二 水域纳污能力核算方法 &#xff08;讲授与实操相结合&#xff09; 专题三 入河排污口设置方案、分析范围、论证范围、模型预测范围确定方法 专题四 入河排污口所在水域水质现状与取水、排污状况分析 专题五 入河…
阅读更多...
React State 状态

React State 状态

React State(状态) React 把组件看成是一个状态机&#xff08;State Machines&#xff09;。通过与用户的交互&#xff0c;实现不同状态&#xff0c;然后渲染 UI&#xff0c;让用户界面和数据保持一致。 React 里&#xff0c;只需更新组件的 state&#xff0c;然后根据新的 s…
阅读更多...
SPI通讯

SPI通讯

1、介绍 SPI是高速、全双工、同步的通信总线。 SPI应用于存储芯片、AD转换器及LCD中。 同步、异步区别&#xff1a;是否有时钟线&#xff0c;例如SPI、I2C是同步通信&#xff0c;需要用到时钟线&#xff0c;串口是异步通信&#xff0c;没有时钟线。 SPI通信需要四根线&…
阅读更多...
【数据结构】单链表（详解）

【数据结构】单链表（详解）

【数据结构】单链表&#xff08;详解&#xff09; 1.前言1.1本章节重点1.2 什么是单链表1.3 结构体设计1.4结构体传参 2. SList.h展示3. SList.c展示4. 各个接口函数的实现4.1 尾插4.2 打印4.3 头插4.3.1内存开辟函数4.3.2插入 4.4 尾删4.5 头删4.6 查找4.7 给定一个位置在这个…
阅读更多...
今天面了个字节跳动拿35K出来的，真是砂纸擦屁股，给我露了一手啊

今天面了个字节跳动拿35K出来的，真是砂纸擦屁股，给我露了一手啊

今年的金三银四已经快要结束了&#xff0c;很多小伙伴收获不错&#xff0c;拿到了心仪的 offer。 各大论坛和社区里也看见不少小伙伴慷慨地分享了常见的面试题和八股文&#xff0c;为此咱这里也统一做一次大整理和大归类&#xff0c;这也算是划重点了。 俗话说得好&#xff0c…
阅读更多...
为什么选择学习python？

为什么选择学习python？

对于编程初学者来说&#xff0c;python更加简单易学&#xff0c;便于初学者入门~ 学Python之前&#xff1a;这玩意真有传说中那么好么&#xff1f; 学Python之后&#xff1a;唉呀妈呀&#xff0c;真香~ 别人花2天时间处理的Excel数据&#xff0c;你用Python 只花1小时&#…
阅读更多...
若依移动端Ruoyi-App——字典使用

若依移动端Ruoyi-App——字典使用

1. 引入dict 将若依前后端分离中的dict文件夹拷贝到api的system里 2.在页面中引入方法 import { getDicts } from "/api/system/dict/data"; 3. 前端 <span>{{statusType}}</span> 4. 加载数据字典 export default {data() {return {statusOptions…
阅读更多...
LeetCode：剑指 Offer 58 - II. 左旋转字符串

LeetCode：剑指 Offer 58 - II. 左旋转字符串

&#x1f34e;道阻且长&#xff0c;行则将至。&#x1f353; &#x1f33b;算法&#xff0c;不如说它是一种思考方式&#x1f340; 算法专栏&#xff1a; &#x1f449;&#x1f3fb;123 一、&#x1f331;剑指 Offer 58 - II. 左旋转字符串 题目描述&#xff1a;字符串的左旋…
阅读更多...
正则表达式 - 电话号码

正则表达式 - 电话号码

正则表达式是描述一组字符串特征的模式&#xff0c;用来匹配特定的字符串。 一、需求 写一个正则表达式匹配电话号码&#xff0c;并且括号、连字符或点号都是可选的。假定合规数据只包含以下15种匹配模式之一&#xff1a; xxxxxxx 8277019xxx.xxxx 82…
阅读更多...
【Microsoft Edge】详解 Edge 的扩展程序

【Microsoft Edge】详解 Edge 的扩展程序

Edge 扩展程序 安装与卸载显示与隐藏开启与关闭导入与导出导出导入操作好处与优势 安装与卸载 可从 https://microsoftedge.microsoft.com/addons?hlzh-CN 获取你想要的扩展程序。 也可以使用 Chrome Web Store &#xff0c;但出于某些原因&#xff0c;需要科学上网。 获取后…
阅读更多...
初赛-排列组合概念

初赛-排列组合概念

1.加法原理: 完成一个工程可以有n类办法&#xff0c;a[i](1<i<n) 代表第i类方法的数目。 那么完成这件事共有 S a[1]a[2]...a[n]种不同的方法。 2.乘法原理: 完成一个工程需要分n个步骤&#xff0c;a[i](1<i<n) 代表第i个步骤的不同方法数目。 那么完成这件…
阅读更多...
DnsAddressResolverGroupFactory.create(DnsAddressResolverGroupFactory.java:33)

DnsAddressResolverGroupFactory.create(DnsAddressResolverGroupFactory.java:33)

今天处理了一个dubb升级造成的包冲突&#xff0c;记录下&#xff0c;希望能帮到一些有同样问题的小伙伴&#xff0c;并且将自己解决包冲突的想法总结下 背景&#xff1a; 因为dubbo出现安全漏洞&#xff0c;公司的安全组要求将dubbo的版本由2.7.3-SNAPSHOT 升级到 2.7.3.7-RE…
阅读更多...
Windows 10, version 22H2 (2023年3月) 简体中文版、英文版下载

Windows 10, version 22H2 (2023年3月) 简体中文版、英文版下载

Windows 10, version 22H2 (updated March 2023) 简体中文版、英文版下载 Windows 10 22H2 2023 年 3 月更新 Windows 10 是微软公司推出的一款操作系统&#xff0c;是 Windows 系列操作系统的最新版本&#xff0c;于2015年7月正式发布。Windows 10 被设计为既适用于桌面电脑和…
阅读更多...
ActiveMQ使用(二):在JavaScript中使用mqtt.js

ActiveMQ使用(二):在JavaScript中使用mqtt.js

ActiveMQ使用(二):在JavaScript中使用mqtt.js 1. 环境准备 jQuery-1.10 下载地址:https://www.jsdelivr.com/package/npm/jquery-1.10.2?tabfilesmqtt.js 4.3.7: 下载地址:https://www.jsdelivr.com/package/npm/mqtt 2. 相关代码 <!DOCTYPE html> <html lang&q…
阅读更多...
引用【C++初阶】

引用【C++初阶】

目录 一、引用 1、概念 2、特性 3、常引用 4、使用常景 5、传值与传引用的效率性能比较 6、指针和引用的区别 一、引用 1、概念 引用不是新定义一个变量&#xff0c;而是给已存在的变量取一个别名&#xff0c;编译器不会为引用变量开辟内存空间&#xff0c;它和它引用的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023