【vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽】

vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽

  • 1 vue脚手架配置代理
  • 2 github用户搜索案例
    • 2.1 静态列表
    • 2.2 列表展示
    • 2.3 完善案例
  • 3 vue项目中常用的发送Ajax请求的库
    • 3.1 xhr
    • 3.2 jQuery
    • 3.3 axios
    • 3.4 fetch
    • 3.5 vue-resource
  • 4 slot 插槽
    • 4.1 效果
    • 4.2 理解

1 vue脚手架配置代理

  • 下载axios
    在这里插入图片描述
  • 引用axios：import axios from 'axios'
  • 解决跨域方法：
    1> cors：http://t.csdnimg.cn/VdMIT
    在这里插入图片描述
    2> jsonp：用的少，只能解决get请求的跨域问题
    3> 配置一个代理服务器
    在这里插入图片描述
  • 配置一个代理服务器方式一：
    开启8080代理服务器方式：nginx(较复杂，需借助后端知识) 、vue-cli(重点)。
    1> 第一步：先通过cmd打开两台服务器
    在这里插入图片描述
    打开结果如下图所示：
    在这里插入图片描述
    如忘记打开，终端将会出现GET http://localhost:8081/students 500 (Internal Server Error)错误。
    2> 第二步：在vue.config.js文件里面，加入此语句
    在这里插入图片描述
    3> 第三步：更改App.vue文件中的端口号
    在这里插入图片描述
    4> 第四步：点击按钮后，请求结果如下
    在这里插入图片描述
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：1.不能配置多个代理2.不能灵活控制走不走代理
  • 配置一个代理服务器方式二：
    1> 第一步：依旧先通过cmd打开两台服务器
    2> 第二步：在vue.config.js文件里面，加入此语句
    在这里插入图片描述
    changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080 changeOrigin默认值为true
    3> 第三步：更新App.vue文件中的内容
    在这里插入图片描述
    4> 第四步：点击按钮后，请求结果如下
    在这里插入图片描述
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

2 github用户搜索案例

在这里插入图片描述

2.1 静态列表

  • 目录展示：
    在这里插入图片描述
  • App.vue:
    在这里插入图片描述
  • Search.vue:
    在这里插入图片描述
  • List.vue:
    在这里插入图片描述
  • index.html:
    在这里插入图片描述

2.2 列表展示

  • List组件和Search组件为兄弟组件，可使用全局事件总线、消息订阅与发布、把数据交给最外侧App等方式实现数据传递。
  • main.js:
    在这里插入图片描述
  • 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>// 引入axiosimport axios from 'axios'export default {name:'Search',data() {return {keyWord:''}},methods: {searchUsers() {// 模板字符串axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了');this.$bus.$emit('getUsers',response.data.items)},error => {console.log('请求失败了',error.message);})}}}
</script>
  • List.vue:
<template><div class="row"><div class="card" v-for="user in 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></div>
</template><script>export default {name:'List',data() {return {users:[]}},// 利用全局事件总线mounted() {this.$bus.$on('getUsers',(users)=>{console.log('我是List组件，收到了数据：',users);this.users = users})}}
</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>
  • 效果展示(点击头像跳转到用户github主页)：
    在这里插入图片描述

2.3 完善案例

  • 以上展示了请求成功时的呈现(users)，还需对其它三种展示进行完善。
  • 1> 添加一个欢迎词(welcome)
  • 2> 当内容未加载出来时添加一个加载中(loading)
  • 3> 添加一个请求失败时的呈现(error)
  • 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',(isFirst,isLoading,errMsg,users)=>{this.$bus.$on('updateListData',(dataObj)=>{// console.log('我是List组件，收到了数据：',users);/* this.isFirst = isFirstthis.isLoading = isLoadingthis.errMsg = errMsgthis.users = users */// this.info = dataObj // 此写法没错 但由于isFirst后续不再变化没有书写 会弄丢isFirst数据// 因此通过字面量的形式去合并对象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>// 引入axiosimport 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('请求成功了');// this.$bus.$emit('getUsers',response.data.items)// 请求成功后更新List的数据// 因为isFirst后续不再发生变化 故可删掉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>
  • 效果展示：
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3 vue项目中常用的发送Ajax请求的库

3.1 xhr

3.2 jQuery

3.3 axios

  • 通用的 Ajax 请求库, 官方推荐，使用广泛。

3.4 fetch

3.5 vue-resource

  • vue插件库, vue1.x 使用广泛，官方已不维护。
  • 安装：npm i vue-resource
  • 引入与使用：
    在这里插入图片描述
  • github用户搜索案例的Search.vue组件需改为：
    在这里插入图片描述

4 slot 插槽

4.1 效果

在这里插入图片描述
App.vue:

<template><div class="container"><Category title="美食" :listData="foods"/><Category title="游戏" :listData="games"/><Category title="电影" :listData="films"/></div>
</template><script>import Category from './components/Category.vue'export default {name:'App',components:{Category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好，李焕英》','《米奇妙妙屋》']}}}
</script><style lang="css">.container {display: flex;justify-content: space-around;}
</style>

Category.vue:

<template><div class="category"><h3>{{title}}分类</h3><ul><li v-for="(item,index) in listData" :key="index">{{item}}</li></ul></div>
</template><script>export default {name:'Category',props:['listData','title']}
</script><style>.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;background-color: orange;}
</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;}img {width: 100%;}video {width: 100%;}
</style>

Category.vue:

<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>export default {name:'Category',props:['title']}
</script><style>.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;background-color: orange;}
</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="https://home.meishichina.com/recipe.html">更多美食</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="https://www.baidu.com/">单机游戏</a><a href="https://www.baidu.com/">网络游戏</a></div></Category><Category title="电影"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><!-- 写法一 --><!-- <template slot="footer"> --><!-- 写法二 --><template v-slot:footer><div class="foot"><a href="https://www.baidu.com/">经典</a><a href="https://www.baidu.com/">热门</a><a href="https://www.baidu.com/">推荐</a></div><h4>欢迎前来观影！</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;}img {width: 100%;}video {width: 100%;}h4 {text-align: center;}a {display: block;text-align: center;}
</style>

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>.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;background-color: orange;}
</style>

在这里插入图片描述
App.vue:

<template><div class="container"><Category title="游戏"><template scope="atguigu"><ul><li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li></ul></template></Category><Category title="游戏"><!-- <template scope="atguigu"><ol><li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li></ol></template> --><!-- 解构赋值写法 --><template scope="{games}"><ol><li v-for="(g,index) in games" :key="index">{{g}}</li></ol></template></Category><Category title="游戏"><!-- <template scope="atguigu"> --><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;}img {width: 100%;}video {width: 100%;}h4 {text-align: center;}a {display: block;text-align: center;}
</style>

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>.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;background-color: orange;}
</style>

4.2 理解

  • 父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用slot 技术，注意：插槽内容是在父组件中编译后，再传递给子组件的。
  • 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ——> 子组件。
  • 分类：默认插槽、具名插槽、作用域插槽
  • 使用方式：
    1> 默认插槽：
    在这里插入图片描述
    2> 具名插槽：
    在这里插入图片描述
    3> 作用域插槽：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
    在这里插入图片描述

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

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

相关文章

【沁恒蓝牙mesh】CH58x 将RTC时钟切换为LSE外部低速时钟

【沁恒蓝牙mesh】CH58x 将RTC时钟切换为LSE外部低速时钟

本文主要记录了【沁恒蓝牙mesh】CH58x 如何将RTC时钟切换为外部时钟 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是喜欢记录零碎知识点的小菜鸟。&#x1f60e;&#x1f4dd; 个人主页&#xff1a;欢迎访问我的 Ethernet_Comm 博客主页&#x1f525;&#x1f389;…
阅读更多...
实测有效的 8 个顶级Android 数据恢复工具

实测有效的 8 个顶级Android 数据恢复工具

由于我们现在生活在一个依赖数字数据的时代&#xff0c;当重要文件从我们的 Android 手机中消失时&#xff0c;这将是一场数字噩梦。如果您没有预先备份Android手机上的数据或未能通过备份找到已删除的数据&#xff0c;那么选择最好的Android数据恢复软件是最佳选择。 因此&am…
阅读更多...
苹果提醒事项怎么用？几个简单步骤就能学会！

苹果提醒事项怎么用？几个简单步骤就能学会！

苹果提醒事项可以帮助你轻松管理待办事项&#xff0c;让你更好地安排自己的时间和工作。但是&#xff0c;有些小伙伴可能对如何使用这个功能还有一些疑问。苹果提醒事项怎么用&#xff1f;不要担心&#xff0c;小编将为大家提供使用提醒事项的方法&#xff0c;帮助你学会如何使…
阅读更多...
Nginx系列-正向代理和反向代理

Nginx系列-正向代理和反向代理

Nginx系列-正向代理和反向代理 文章目录 Nginx系列-正向代理和反向代理1. 三个对象2. 两种场景代理2.1. 正向代理2.2. 反向代理 3. 两种场景的对比3.1 为什么叫做反向代理3.2 正向代理和反向代理的作用 1. 三个对象 客户端&#xff1a;发出请求到代理&#xff0c;并接收代理的…
阅读更多...
Android : Fragment 传递数据 — 简单应用

Android : Fragment 传递数据 — 简单应用

示例图&#xff1a; 创建 Fragment new -> Fragment -> Fragment&#xff08;Blank&#xff09; MainActivity.java package com.example.fragmentdemo;import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.FragmentManager; import andro…
阅读更多...
C语言每日一题（41）循环队列

C语言每日一题（41）循环队列

力扣 622 循环队列 题目描述 设计你的循环队列实现。 循环队列是一种线性数据结构&#xff0c;其操作表现基于 FIFO&#xff08;先进先出&#xff09;原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。 循环队列的一个好处是我们可以利用这个队列之前…
阅读更多...
5W2H分析法

5W2H分析法

5W2H分析法 5W2H分析法又叫七问分析法。 模型介绍 简单、方便&#xff0c;易于操作的思考&#xff08;框架&#xff09;模型&#xff0c;问题分析模型&#xff0c;它可以帮助我们保证思考的严谨与全面&#xff0c;也能给人启发&#xff0c;有着广泛的应用&#xff1a; 提问-可…
阅读更多...
AndroidNDK开发之交叉编译

AndroidNDK开发之交叉编译

在Android studio2.2以及以上&#xff0c;构建原生库的默认工具是cmake。 CMake是一个跨平台的构建工具&#xff0c;可以使用简单的语句来描述所有平台的安装(编译过程)。 能够输出各种各样的makefile或者project文件。cmake并不直接构建出最终的软件&#xff0c;而是产生其他工…
阅读更多...
Web学习笔记

Web学习笔记

Web学习笔记 flask库前端基础超链接&#xff1a;空连接&#xff1a;图片&#xff1a;视频&#xff08;音频&#xff09;&#xff1a;嵌套使用列表表格格式化表格input表单系列 网络请求GET方式POST请求通过GET方式获取输入参数通过POST方式获取输入参数注册页面 CSS三种使用方式…
阅读更多...
MYSQL存储

MYSQL存储

注意&#xff1a; 1.如果没有指定的SESSION/GLOBAL&#xff0c;默认是SESSION&#xff0c;会话变量。 2.mysql服务重新启动之后&#xff0c;所设置的全局参数会失效&#xff0c;要想不失效&#xff0c;可以在/etc/my.cnf中配置。 变量 用户定义变量是用户根据需要自己定义变量…
阅读更多...
Redis队列stream，Redis多线程详解

Redis队列stream，Redis多线程详解

Redis 目前最新版本为 Redis-6.2.6 &#xff0c;会以 CentOS7 下 Redis-6.2.4 版本进行讲解。 下载地址&#xff1a; https://redis.io/download 安装运行 Redis 很简单&#xff0c;在 Linux 下执行上面的 4 条命令即可 &#xff0c;同时前面的 课程已经有完整的视…
阅读更多...
《尚品甄选》：后台系统——权限管理之分类和品牌管理，使用EasyExcel导入导出数据（debug一遍）

《尚品甄选》：后台系统——权限管理之分类和品牌管理，使用EasyExcel导入导出数据（debug一遍）

文章目录 一、分类管理1.1 表结构介绍1.2 分类列表查询 二、EasyExcel使用2.1 EasyExcel简介2.2 导出功能2.3 导入功能 三、品牌管理3.1 表结构介绍3.2 列表查询3.3 添加品牌3.4 修改品牌3.5 删除品牌 一、分类管理 分类管理就是对商品的分类数据进行维护。 1.1 表结构介绍 分…
阅读更多...
缺省参数的声明和定义

缺省参数的声明和定义

首先&#xff0c;函数缺省参数不能同时出现在声明和定义中&#xff0c;如出现则报错&#xff1a; 声明和定义中同时出现缺省参数 ctrlb&#xff0c;编译报错&#xff0c;提示 “test"&#xff1a;重定义默认参数&#xff1a;参数1 编译报错 当函数的声明和定义中都出现…
阅读更多...
第10关：基数排序

第10关：基数排序

任务要求参考答案问答98 任务描述相关知识 基数排序算法编程要求测试说明 任务描述 本关任务&#xff1a;实现基数排序算法&#xff0c;并将乱序数列变成升序。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.基数排序算法。 基数排序算法 基数排序是按…
阅读更多...
Node.js下载安装教程

Node.js下载安装教程

一、下载安装包 1、百度网盘自提链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Bbw895MtUgjlfZylPHCCxw 提取码&#xff1a;x89v 2、进入官网下载 https://nodejs.org/zh-cn/download/ 选择对应版本&#xff0c;我这里选的windows64位版本 二、安装程序 1、…
阅读更多...
使用shell快速查看电脑曾经连接过的WiFi密码

使用shell快速查看电脑曾经连接过的WiFi密码

此方法只能查看以前连接过的wifi名称和对应的密码 查看连接过的WiFi名称netsh wlan show profiles查看具体的WiFi名称netsh wlan show profile name"你的wifi名称" keyclear
阅读更多...
vivado综合分析与收敛技巧1

vivado综合分析与收敛技巧1

使用细化视图对 RTL 进行最优化 完成任意实现步骤后使用 report_timing 、 report_timing_summary 或 report_design_analysis 分析时序结果时&#xff0c; 您必须审查关键路径结构 &#xff0c; 了解是否可通过修改 RTL 、使用综合属性或者使用其他综合选项来更有效地将…
阅读更多...
LeetCode.24两两交换链表中的节点

LeetCode.24两两交换链表中的节点

LeetCode.24两两交换链表中的节点 1.问题描述2.解题思路3.代码 1.问题描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示…
阅读更多...
雷达公式实现（matlab）

雷达公式实现（matlab）

雷达公式实现 代码来源&#xff1a;《雷达系统分析与设计(MATLAB版)(第三版)》 function [snr] radar_eq(pt,freq,g,sigma,b,nf,loss,range) % This program implements Eq.(1.63) %% Inputs:% pt——峰值功率&#xff0c;W% freq——雷达中心频率&#xff0c;Hz% g——天线…
阅读更多...
IntelliJ IDEA 中有什么让你相见恨晚的技巧

IntelliJ IDEA 中有什么让你相见恨晚的技巧

一、条件断点 循环中经常用到这个技巧&#xff0c;比如&#xff1a;遍历1个大List的过程中&#xff0c;想让断点停在某个特定值。 参考上图&#xff0c;在断点的位置&#xff0c;右击断点旁边的小红点&#xff0c;会出来一个界面&#xff0c;在Condition这里填入断点条件即可&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023