Vue2(十一):脚手架配置代理、github案例、插槽

一、脚手架配置代理

1.回顾常用的ajax发送方式:

(1)xhr

比较麻烦,不常用

(2)jQuery

核心是封装dom操作,所以也不常用

(3)axios

优势:体积小、是promise风格的、支持请求拦截器和响应拦截器

(4)fetch

2.3都是封装xhr的,fetch跟xhr平级,直接在window身上就能找到,而且也是promise风格的,但是不兼容,ie肯定不能用;它会把你返回的数据包两层,所以不如axios常用。

2.引出问题

点击按钮获取学生信息,app.vue:

import axios from 'axios'
import { response } from 'express'
export default {
name:'App',
methods:{getStudent(){axios.get('http://localhost:5000/students'),then(response=>{console.log('请求成功了',response.data)//response是一个响应对象。data里面的东西才是response想给你的},error=>{console.log('请求失败了',error.message)//maeeage失败的原因})}
}
}

点击按钮之后页面报错,出现、、、cors、、、Access-Control-Allow-Oringin说明跨域了,协议、域名、端口号出现不一样的,我们所在的端口号是8080,向端口号5000的要数据,5000给8080了,然后8080发现跨域了就没有给你数据,解决跨域的问题:

1.cors(写服务器的人在服务器加几个响应头)

5000返回的时候还携带几个特殊的响应头,8000看见就给你了

2.jsonp(借助script 的src属性)

src属性在引入外部资源的时候不受同源限制,但是得前端后端一起配合,而且它只能解决get请求的问题,开发不常用但是面试经常问,很巧妙的用法

3.配置一个代理服务器

代理服务器是一个中间人,但是它所处的位置跟我们一样(8080),粉色那个跟我们肯定是同域的,那粉色跟蓝色呢?他俩都是服务器,服务器和服务器之间传输局不用ajax,用的就是http传就完事了。那粉色的8080服务器得怎么开啊?1.nginx,学习成本大偏后端  2.vue-cli,借助vue脚手架。

然后我们就来配置一下代理服务器

(1)方式一:

在vue.config.js:

它的8080不用你管,你只需要告诉这个代理服务器一会要把请求转发给谁就ok,后面具体路径不用写,写到端口号就行

//开启服务代理
devServer:{proxy:'htp://localhost:5000'
}

app.vue

methods:{getStudent(){axios.get('http://localhost:8080/students').then(response=>{console.log('请求成功了',response.data)//response是一个响应对象。data里面的东西才是response想给你的},error=>{console.log('请求失败了',error.message)//maeeage失败的原因})}
}

而且这个中间代理也不是什么时候都会转发请求的,如果粉色的自己本身就有就不会往5000找了,public里面文件都算是8080有的。

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

(2)方式二

vue.config.js:

devServer:{proxy:{'/ttt':{ //请求前缀,想走代理就在请求的前面加/???,就把东西转发给targettarget:'http://localhost:5000',pathRewrite:{'^/ttt':''},//不加这个配置粉色找蓝色的时候默认找的/ttt/server1ws:true ,//用于支持websocketchangeOrigin:true//用于控制请求头的host值//这个是告诉5000我也来自5000(是true就撒谎来自5000,false就是来自8080),防止5000用不了设置true比较好},'/hhh':{ target:'http://localhost:5001',pathRewrite:{'^/hhh':''},ws:true ,changeOrigin:true},}
}

app:

getStudent(){axios.get('http://localhost:8080/ttt/students').then(//前缀就加在端口号后面,后面正常写response=>{console.log('请求成功了',response.data)//response是一个响应对象。data里面的东西才是response想给你的},error=>{console.log('请求失败了',error.message)//maeeage失败的原因})},getCar(){axios.get('http://localhost:8080/hhh/cars').then(//前缀就加在端口号后面,后面正常写response=>{console.log('请求成功了',response.data)//response是一个响应对象。data里面的东西才是response想给你的},error=>{console.log('请求失败了',error.message)//maeeage失败的原因})}

如果我自己也有个students它也不会来拿我这个信息,因为加了/ttt就强制去5000那里拿数据了,所以这种就更灵活。

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

二、github案例

如果第三方库你写在assets里面了就得用import 引用,用import引用会很严重的检查,有某些字体你没有但是你引用了那就显示不出来,但是link方法没事,你没有但是引用了就不显示呗

所以像这种引入了外部资源的就不适合用assets/css/里面,那就放在public/css,然后在index.html中link引用一下,他里面引用了app也能用

接口https虽然案例来说跨域了,但是人家的工程师用cors已经解决了不用我们担心

list首先展示欢迎,用户搜索之后显示 正在加载中 ,加载完毕显示users,加载失败显示error

那怎么判断该显示啥呢?数据驱动页面展示

1.app.vue

<template><div class="container"><mySearch /><myList /></div>
</template><script>
import mySearch from "./components/mySearch.vue";
import myList from "./components/myList.vue";
export default {name: "App",components: { mySearch, myList },
};
</script><style>
</style>

2.myList.vue

<template><div class="row"><divv-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><!-- 都一样就不一个一个写了,但是这次也不用item,直接v-for --></div>
</template><script>
export default {name: "myList",data() {return {info: {isFirst: true, //是不是初次展示isLoading: false, //点击按钮之后才加载errMsg: "", //不能用布尔值了,得看看是网差还是别的原因呢导致的users: [],//这些东西都得听search的,情况不同他们几个值也变},};},mounted() {this.$bus.$on('updateListData', (dataObj) => {this.info={...this.dataObj,...dataObj}//es6规则,俩人都有的按后边来,前面没有的要后面的//这里不要this.data=dataObj,更不能this._data,赋值过去动了原本配置的getter、setter});},
};
</script><style scoped>
.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: 0.75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;
}.card > img {margin-bottom: 0.75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}
</style>

3.mySearch.vue

<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><inputtype="text"placeholder="enter the name you search"v-model="keyword"/>&nbsp;<button @click="searchUsers">Search</button></div></section>
</template><script>
import axios from 'axios'
//import { response } from 'express';
export default {name:'mySearch',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=>{this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})// 就最开始欢迎一下,之后就不用了,但是直接不写之后就少一个属性,用es6语法解决console.log('请求成功',response.data.items)this.$bus.$emit('getUsers',response.data.items)},error=>{this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})console.log('请求失败',error.message)})// 直接等于this.??他肯定不按js给你解析,模版字符串然后$}}
};
</script><style>
</style>

4.vue-resource

也是对xhr的封装,安装插件 :npm i vue-resource

就是把axios替换成了this.$http,其他的都一样

main.js引入插件:import vueResource from 'vue-resource'
使用插件:Vue.use(vueResource)

维护的不频繁用的不多

三、插槽

1.默认插槽

如果我想在最小的组件(重复的)的其中一个里面添加图片,和其他组件都不一样的话,我直接在<category> <img、、、></category>这样写出不来图片,因为人家解析到img之后不知道来到category.vue里人家就不知道把img给你放哪儿了。

用一个特殊的标签slot,告诉人家识别完不知道放哪儿的标签放在哪个位置

(1)app.vue

<template><div class="container"><myCategory title="美食"><img src="http://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" /></myCategory><myCategory title="游戏"><ul><li v-for="(g, index) in games" :key="index">{{ g }}</li></ul></myCategory><!-- 这三个的样式都是解析完之后才塞到myCategory里面去的,所以script可以直接写在app里 --><myCategory title="电影"><videocontrolssrc="http://clips.vorwaerts-gmbh.de/big_buck.bunny.mp4"></video></myCategory><!-- :foods=foods那得传太多了,很麻烦 --></div>
</template><script>
import myCategory from "./components/myCategory.vue";
export default {name: "App",components: { myCategory },data() {return {foods: ["火锅", "烧烤", "小龙虾", "牛排"],games: ["战神4", "极品飞车", "鬼泣", "超级玛丽"],films: ["《教父》", "《复仇者联盟》", "《绿皮书》", "《阿甘》"],};},
};
</script><style>
.container {display: flex;justify-content: space-around;
}
img {width: 100%;
}
video {width: 100%;
}
</style>

(2)myCategory.vue

<template><div class="category"><h3>{{ title }}</h3><slot>图片加载不出来会看见这些文字</slot><!-- 挖坑等组件的使用者进行填充 --></div>
</template><script>
export default {name: "myCategory",props: ["listData", "title"],
};
</script><style>
.category {background-color: aqua;width: 200px;height: 300px;
}
h3 {text-align: center;background-color: orange;
}
</style>

2.具名插槽

刚才那个只有一个,直接用的slot,具名插槽就是具有名字的插槽

app:

<template><div class="container"><myCategory title="美食"><imgslot="center"src="http://s3.ax1x.com/2021/01/16/srJlq0.jpg"alt=""/><a slot="footer" href="">更多美食</a></myCategory><myCategory title="游戏"><ul slot="center"><li v-for="(g, index) in games" :key="index">{{ g }}</li></ul><div class="foot" slot="footer"><a href="">单机游戏</a><a href="">更多美食</a></div><!-- 这个可以追加 --></myCategory><!-- 这三个的样式都是解析完之后才塞到myCategory里面去的,所以script可以直接写在app里 --><myCategory title="电影"><videoslot="center"controlssrc="http://clips.vorwaerts-gmbh.de/big_buck.bunny.mp4"></video><template v-slot:footer><!-- 这样slot写一次就可以了  因为template slot就可以这样写了,只有它行--><div class="foot"><a href="">单机游戏</a><a href="">更多美食</a><a href="">更多美食</a></div><h4>欢迎前来观影</h4></template></myCategory><!-- :foods=foods那得传太多了,很麻烦 --></div>
</template>

mycategory:

<template><div class="category"><h3>{{ title }}</h3><slot name="center">图片加载不出来会看见这些文字</slot><slot name="footer">图片加载不出来会看见这些文字</slot><!-- 挖坑等组件的使用者进行填充 --></div>
</template>

3.作用域插槽

现在我们只留下游戏重复三个,然后设计第一个是无序列表,第二个有序,第三个每一个游戏都是h4标题

我把数据交给了插槽的使用者,根据数据所生成的结构由使用者来定

app:

<template><div class="container"><myCategory title="游戏"><template scope="atguigu"><!-- atguigu收过来的是一个对象 --><ul><li v-for="(g, index) in atguigu.games" :key="index">{{ g }}</li></ul></template></myCategory><myCategory title="游戏"><template scope="{games}"><!-- 结构赋值 --><!-- atguigu收过来的是一个对象 --><ol><li v-for="(g, index) in games" :key="index">{{ g }}</li></ol></template></myCategory><myCategory title="游戏"><template slot-scope="{games}"><h4 v-for="(g, index) in games" :key="index">{{ g }}</h4></template></myCategory></div>
</template><script>
import myCategory from "./components/myCategory.vue";
export default {name: "App",components: { myCategory },
};
</script><style>
.container,
.foot {display: flex;justify-content: space-around;
}
img {width: 100%;
}
video {width: 100%;
}
h4 {text-align: center;
}
</style>

category:

<template><div class="category"><h3>{{ title }}</h3><slot :games="games">我是默认内容</slot><!-- 我在这里写了一个games,那么它就把games传给了插槽的使用者app里 --></div>
</template><script>
export default {name: "myCategory",props: ["listData", "title"],data() {return {games: ["战神4", "极品飞车", "鬼泣", "超级玛丽"],};},
};
</script><style>
.category {background-color: aqua;width: 200px;height: 300px;
}
h3 {text-align: center;background-color: orange;
}
</style>

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

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

相关文章

ChatGPT与传统搜索引擎的区别:智能对话与关键词匹配的差异

引言 随着互联网的快速发展&#xff0c;信息的获取变得比以往任何时候都更加便捷。在数字化时代&#xff0c;人们对于获取准确、及时信息的需求愈发迫切。传统搜索引擎通过关键词匹配的方式为用户提供了大量的信息&#xff0c;然而&#xff0c;这种机械式的检索方式有时候并不…

Flutter 中的 ScrollNotification 为啥收不到

1. 需求 在做智家 APP 悬浮窗优化需求时&#xff0c;需要获取列表的滑动并通知悬浮窗进行收起或全部显示。 基础库同事已经把 基础逻辑整理好如下&#xff1a; NotificationListener<ScrollNotification>(onNotification: (notification){//1.监听事件的类型if (notif…

<QT基础(5)>事件监听

事件监听 事件监听&#xff08;Event Handling&#xff09;是在程序中监视和响应发生的事件的一种机制。在Qt中&#xff0c;事件监听是一种常见的用于处理用户输入、系统事件以及其他类型事件的方法。通过事件监听&#xff0c;您可以在发生特定事件时捕获事件并执行相应的操作…

设计模式 —— 设计原则

在软件开发中&#xff0c;为了提高软件系统的可维护性和可复用性&#xff0c;增加软件的可扩展性和灵活性&#xff0c;程序员要尽量根据6条原则来开发程序&#xff0c;从而提高软件开发效率、节约软件开发成本和维护成本。 开闭原则 对扩展开放&#xff0c;对修改关闭。在程序需…

【MagicDrive环境配置】新手配俩星期版

1.创建一个新的环境conda create -n newdrive python3.8 2.激活该环境conda activate newdrive 3.下载MagicDrive源码 git clone --recursive https://github.com/cure-lab/MagicDrive.git&#xff0c;如果出现时间超时八成是网的问题&#xff0c;直接自己下载解压就好 3.我的…

Spring高级面试题-2024

Spring 框架中都用到了哪些设计模式&#xff1f; 1. 简单工厂&#xff1a; ○ BeanFactory&#xff1a;Spring的BeanFactory充当工厂&#xff0c;负责根据配置信息创建Bean实例。它是一种工厂模式的应用&#xff0c;根据指定的类名或ID创建Bean对象。2. 工厂方法&#xff…

华为防火墙配置指引超详细(包含安全配置部分)以USG6320为例

华为防火墙USG6320 华为防火墙USG6320是一款高性能、高可靠的下一代防火墙,适用于中小型企业、分支机构等场景。该防火墙支持多种安全功能,可以有效抵御网络攻击,保护网络安全。 目录 华为防火墙USG6320 1. 初始配置 2. 安全策略配置 3. 防火墙功能配置 4. 高可用性配…

【scala】使用gradle和scala构建springboot程序

零、版本说明: springboot: 2.7.18 使用log4j2&#xff0c;不使用springboot自带的logback scala版本&#xff1a;2.11 jackson版本&#xff1a;2.16.0 一、依赖&#xff1a; buildscript {dependencies {// using spring-boot-maven-plugin as package toolclasspath("…

前缀和与差分

前缀和 使用一个数组sum来维护原数组a的前缀和&#xff0c;即sum[i] a[1] a[2] ... a[i] 前缀和其实非常简单&#xff0c;它的用处也无处不在。最主要的进行多次的区间求和&#xff0c;会在很多其他的算法中出现。 例如&#xff1a;求a[l...r]的和&#xff0c;即sum[r] - …

最小可行产品需要最小可行架构——可持续架构(三)

前言 最小可行产品&#xff08;MVP&#xff09;的概念可以帮助团队专注于尽快交付他们认为对客户最有价值的东西&#xff0c;以便在投入大量时间和资源之前迅速、廉价地评估产品的市场规模。MVP不仅需要考虑产品的市场可行性&#xff0c;还需要考虑其技术可行性&#xff0c;以…

【教程】iOS如何抓取HTTP和HTTPS数据包经验分享

&#x1f4f1; 在日常的App开发和研发调研中&#xff0c;对各类App进行深入的研究分析时&#xff0c;我们需要借助专业的抓包应用来协助工作。本文将介绍如何使用iOS手机抓包工具来获取HTTP和HTTPS数据包&#xff0c;并推荐一款实用的抓包应用——克魔助手&#xff0c;希望能够…

【PyQt】18 -菜单等顶层操作

顶层界面的使用 前言一、菜单栏1.1 代码1.2 运行结果 二、工具栏2.1 代码几种显示方法 2.2 运行结果 三、状态栏3.1 代码3.2 运行结果 总结 前言 1、介绍顶层菜单栏目的使用&#xff0c;但没有陆续绑定槽函数。 2、工具栏 3、状态栏 一、菜单栏 1.1 代码 #Author &#xff1a…

插入排序、归并排序、堆排序和快速排序的稳定性分析

插入排序、归并排序、堆排序和快速排序的稳定性分析 一、插入排序的稳定性二、归并排序的稳定性三、堆排序的稳定性四、快速排序的稳定性总结在计算机科学中,排序是将一组数据按照特定顺序进行排列的过程。排序算法的效率和稳定性是评价其优劣的两个重要指标。稳定性指的是在排…

k8s 如何获取加入节点命名

当k8s集群初始化成功的时候&#xff0c;就会出现 加入节点 的命令如下&#xff1a; 但是如果忘记了就需要找回这条命令了。 kubeadm join 的命令格式如下&#xff1a;kubeadm join --token <token> --discovery-token-ca-cert-hash sha256:<hash>--token 令牌--…

【Linux】详解进程程序替换

一、替换原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支)&#xff0c;子进程往往要调用一种exec函数以执行另一个程序。当进程调用一种exec函数时&#xff0c;该进程的用户空间代码和数据完全被新程序替换&#xff0c;从新程序的启动例程开始执…

UDP send 出现大量“Resource temporarily unavailable”

背景 最近排查用户现场环境&#xff0c;查看日志出现大量的“send: Resource temporarily unavailable”错误&#xff0c;UDP设置NO_BLOCK模式&#xff0c;send又发生在进程上下文&#xff0c;并且还设置了SO_SNDBUF 为8M&#xff0c;在此情况下为什么还会出现发送队列满的情况…

Grafana+Promethues配置RocketMQ监控

背景 接前文&#xff0c;Promethues已经配置完毕&#xff0c;下面通过导入的Grafana的面板来配置RocketMQ监控页面 Dashboard 这里我们直接使用Grafana现成的面板配置 node_exporter&#xff1a;https://grafana.com/grafana/dashboards/1860 rocketmq_exporter的dashboar…

基于ssm的线上旅行信息管理系统论文

摘 要 随着旅游业的迅速发展&#xff0c;传统的旅行信息查询管理方式&#xff0c;已经无法满足用户需求&#xff0c;因此&#xff0c;结合计算机技术的优势和普及&#xff0c;特开发了本线上旅行信息管理系统。 本论文首先对线上旅行信息管理系统进行需求分析&#xff0c;从系…

网络工程师实验命令(华为数通HCIA)

VRP系统的基本操作 dis version #查看设备版本信息 sys #进入系统视图 system-name R1 #改设备名字为R1进入接口配置IP地址 int g0/0/0 ip address 192.168.1.1 255.255.255.0 #配置接口地址为192.168.1.1/255.255.255.0 ip address 192.168.1.2 24 sub #此…

基于Spring Boot 3 + Spring Security6 + JWT + Redis实现登录、token身份认证

基于Spring Boot3实现Spring Security6 JWT Redis实现登录、token身份认证。 用户从数据库中获取。使用RESTFul风格的APi进行登录。使用JWT生成token。使用Redis进行登录过期判断。所有的工具类和数据结构在源码中都有。 系列文章指路&#x1f449; 系列文章-基于Vue3创建前端…