【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.hqwc.cn/news/229507.html

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

相关文章

缺省参数的声明和定义

缺省参数的声明和定义

首先&#xff0c;函数缺省参数不能同时出现在声明和定义中&#xff0c;如出现则报错&#xff1a; 声明和定义中同时出现缺省参数 ctrlb&#xff0c;编译报错&#xff0c;提示 “test"&#xff1a;重定义默认参数&#xff1a;参数1 编译报错 当函数的声明和定义中都出现…
阅读更多...
Nodejs+Vue校园餐厅外卖订餐点餐系统 PHP高校食堂 微信小程序_0u4hl 多商家

Nodejs+Vue校园餐厅外卖订餐点餐系统 PHP高校食堂 微信小程序_0u4hl 多商家

对于校园订餐小程序将是又一个传统管理到智能化信息管理的改革&#xff0c;对于传统的校园订餐管理&#xff0c;所包括的信息内容比较多&#xff0c;对于用户想要对这些数据进行管理维护需要花费很大的时间信息&#xff0c;而且对于数据的存储比较麻烦&#xff0c;想要查找某一…
阅读更多...
小程序开发中SSL证书的重要作用

小程序开发中SSL证书的重要作用

随着互联网技术的发展&#xff0c;越来越多的企业和个人开始开发自己的小程序来满足各种需求。然而&#xff0c;在这个过程中&#xff0c;安全性和稳定性成为了开发者必须关注的重点之一。为了保障用户的隐私安全和体验效果&#xff0c;越来越多的小程序开发者开始采用SSL证书进…
阅读更多...
SpringBoot : ch12 多模块配置YAML文件

SpringBoot : ch12 多模块配置YAML文件

前言 当您使用SpringBoot框架进行项目开发时&#xff0c;通常需要配置一些参数和属性。在实际开发中&#xff0c;可能需要将这些配置参数分成多个不同的YAML文件&#xff0c;并将它们组织到不同的模块中。这样可以方便管理和维护配置文件&#xff0c;并且可以避免配置文件的冲…
阅读更多...
界限与不动产测绘乙级申请条件

界限与不动产测绘乙级申请条件

整理一期关于测绘资质界限与不动产测绘乙级资质的申请要求 测绘资质是由测绘资质主管部门自然资源部制定的 想要了解标准、正规的申请条件&#xff0c;可以到当地省份的政务网搜索测绘资质办理相关标准&#xff08;例如下图&#xff09; 1、通用标准 http://gi.mnr.gov.cn/20…
阅读更多...
C#-认识串口通信并使用串口助手

C#-认识串口通信并使用串口助手

串口通讯(Serial Communication)&#xff0c;是指外设和计算机间&#xff0c;通过数据信号线、地线等&#xff0c;按位进行传输数据的一种双向通讯方式。 串口是一种接口标准&#xff0c;它规定了接口的电气标准&#xff0c;没有规定接口插件电缆以及使用的通信协议&#xff0…
阅读更多...
ArkUI开发进阶—@Builder函数@BuilderParam装饰器的妙用与场景应用【鸿蒙专栏-05】

ArkUI开发进阶—@Builder函数@BuilderParam装饰器的妙用与场景应用【鸿蒙专栏-05】

ArkUI开发进阶—@Builder函数@BuilderParam装饰器的妙用与场景应用 HarmonyOS，作为一款全场景分布式操作系统，为了推动更广泛的应用开发，采用了一种先进而灵活的编程语言——ArkTS。ArkTS是在TypeScript（TS）的基础上发展而来，为HarmonyOS提供了丰富的应用开发工具，使开…
阅读更多...
从戴森发明的“球轮手推车”看专利

从戴森发明的“球轮手推车”看专利

今天跟大家分享一个特别有意思的专利&#xff0c;那就是戴森发明的球状轮子的手推车。 相信戴森这个品牌很多人都听过&#xff0c;大家熟悉的应该是戴森吹风机和戴森吸尘器。这两个目前是市场上比较高端的家用设备。 很多人也正是因为这些家用设备了解到戴森这个人&#xff0…
阅读更多...
【SQL SERVER】定时任务

【SQL SERVER】定时任务

oracle是定时JOB&#xff0c;sqlserver是创建作业&#xff0c;通过sqlserver代理实现 先看SQL SERVER代理得服务有没有开 选择计算机右键——>管理——>服务与应用程序——>服务——>SQL server 代理 然后把SQL server 代理&#xff08;MSSQLSERVER&#xff09;启…
阅读更多...
个体诊所门诊电子处方软件，个体药店收银系统，配方模板一键导入设置和操作教程

个体诊所门诊电子处方软件，个体药店收银系统，配方模板一键导入设置和操作教程

个体诊所门诊电子处方软件&#xff0c;个体药店收银系统&#xff0c;配方模板一键导入设置和操作教程 配方模板设置教程&#xff1a;软件导航栏点击 基本信息设置——配方模板设置 操作步骤&#xff1a; 1、添加分类/管理分类&#xff1a;添加常用的分类名称 2、在常用配方分…
阅读更多...
你知道显卡型号上的数字是什么意思吗？数字越大就越好吗？

你知道显卡型号上的数字是什么意思吗？数字越大就越好吗？

大家好&#xff0c;欢迎来到我们的显卡探秘之旅&#xff01;今天&#xff0c;我们将一探究竟——显卡型号上的数字到底是啥意思&#xff1f;是不是数字越大&#xff0c;显卡就越NB&#xff1f;别急&#xff0c;跟着小编一起揭开这个神秘的数字面纱&#xff01; Q1 显卡的基本概…
阅读更多...
Web框架与Django路由层

Web框架与Django路由层

Web框架 一 web框架 Web框架&#xff08;Web framework&#xff09;是一种开发框架&#xff0c;用来支持动态网站、网络应用和网络服务的开发。这大多数的web框架提供了一套开发和部署网站的方式&#xff0c;也为web行为提供了一套通用的方法。web框架已经实现了很多功能&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023