Vue学习笔记(十一)
1.Vue学习笔记(十一)
文章目录
- 1.Vue学习笔记(十一)
- 1.1Vue_配置代理_方式
- 1.1.0演示问题
- 1.1.1运行node server1
- 1.1.2运行node server2
- 1.1.3使用代理服务器(方式一)来解决问题
- 1.1.4使用代理服务器(方式二)来解决问题
- 1.2github案例_静态组件
- 1.2.1效果展示图
- 1.2.2分析结构拆分静态组件
- 1.2.3分析结构,编写代码
- 1.2.4完成代码
- 1.2.5完善案例
1.1Vue_配置代理_方式
1.1.0演示问题
将已经写好的服务器启动。
1.1.1运行node server1
访问以下
1.1.2运行node server2
下面以axios演示问题
下载引入axios
使用axios发送get请求
getStudents(){axios.get('http://localhost:5000/students').then(response=>{console.log('请求成功了',response.data)},error =>{console.log('请求失败了',error.message)},)}
为什么失败,因为跨域了。
必须要求三个都一致:协议 主机名 端口号
在这端口不一样
1.1.3使用代理服务器(方式一)来解决问题
在这使用Vue脚手架进行开启代理服务器
在vue.config.js中添加如下配置:
devServer:{proxy:"http://localhost:5000"
}
说明:
- 优点:配置简单,请求资源时直接发给前端(8080)即可。
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
代理服务器向谁发请求,向端口号为5000的服务器发送请求,所以上面填写5000
然后修改get向谁需要数据,向代理服务器拿走数据
测试
提醒:
假如public下面恰好有和访问地址相同的名称,会直接去public下面找。
1.1.4使用代理服务器(方式二)来解决问题
编写vue.config.js配置具体代理规则:
module.exports = {//方式二devServer: {proxy: {'/bbgu1': {// 匹配所有以 '/bbgu1'开头的请求路径target: 'http://localhost:5000',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/bbgu1': ''}},'/bbgu2': {// 匹配所有以 '/bbgu2'开头的请求路径target: 'http://localhost:5001',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/bbgu2': ''}}}
}
/*changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080changeOrigin默认值为true
*/
说明:
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
- 缺点:配置略微繁琐,请求资源时必须加前缀。
1.2github案例_静态组件
1.2.1效果展示图
当点击搜索按钮,可以搜索github的用户,展示用户头像,点击可跳转到用户的主页。
1.2.2分析结构拆分静态组件
注意引入bootstrap.css时候,将其放人public里面,在用index.html加载,否则里面有引入的字体很麻烦。
1.2.3分析结构,编写代码
- 在这需要用到GitHub的接口,来获取用户的数据,因为是GitHub编写的接口,已经做了跨域的问题,这里不需要考虑。
Github接口地址:https://api.github.com/search/users?q=xxx
- 当用户输入数据时候,需要将数据保存下俩,通过双向数据绑定的方式KeyWords的方式
- 通过axios发送get请求,拿到数据,将数据保存,又考虑到兄弟组件,这里采用全局事件总线的方式来传递数据。
- List拿到数据用
v-for
遍历出用户的数据
1.2.4完成代码
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="keywords"/> <button @click="getUsers">Search</button></div></section>
</template><script>
import axios from 'axios'export default {name:'Search',data() {return {keywords:''}},methods: {getUsers(){axios.get(`https://api.github.com/search/users?q=${this.keywords}`).then(response => {console.log(response.data.items)this.$bus.$emit('userList',response.data.items)},error=>{console.log('请求失败了',error.message);})}},}
</script><style></style>
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('userList',(users)=>{this.users = users})},}
</script><style scope>.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>
App.vue
<template><div class="container"><Search/><List/>
</div></template><script>
import Search from './components/Search.vue'
import List from './components/List.vue'export default {components: { Search,List},name:'App',data() {return {}},}
</script><style></style>
效果图
1.2.5完善案例
需求:
- 当用户首次进入页面时,展示文字:欢迎字样
- 当用户搜索,欢迎字样消失,加载中显示
- 当用户搜索失败,返回错误提示
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"/> <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',{isLoading:true,errMsg:'',users:[],isFirst:false})axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了')//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}},}
</script>
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 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: .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>
Vue学习笔记(十一)相关推荐
- 狂神说 vue学习笔记
vue学习笔记 文章目录 vue学习笔记 一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期 二.V ...
- 菜鸟Vue学习笔记(三)
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
- Apache Nutch 1.3 学习笔记十一(页面评分机制 OPIC)
1. Nutch 1.3 的页面评分机制 Nutch1.3目前默认还是使用OPIC作为其网页分数算法,但其之后,已经引入了PageRank-like算法,以弥补OPIC算法的不足,目前OPIC算法还是 ...
- Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
- Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
- vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值?
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
- vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念 文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
- vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈)
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习 文章目录 vue学习笔记-01-前端的发展历 ...
- 吴恩达《机器学习》学习笔记十一——应用机器学习的建议
吴恩达<机器学习>学习笔记十一--应用机器学习的建议 一.训练完模型后下一步要做什么 二.评估算法与模型选择 1.训练集与测试集 2.训练/测试步骤 3.模型选择 4.数据集新的划分--验 ...
最新文章
- jqm跳转js不加载
- 零基础学Python(第十二章 列表【list】)
- 修改Static控件的字体颜色
- php tp框架调用方法,thinkPHP框架使用方法
- MongoDB最简单的入门教程之三 使用Java代码往MongoDB里插入数据
- 一个具有Spring Boot,Spring Security和Stormpath的简单Web应用程序-15分钟
- 中国电子云发布专属云CECSTACK 以全栈信创赋能千行百业
- Docker Nacos Mysql集群
- html5元件的作用,寄存器的作用是什么
- php连接打印机代码,PHP连接打印机
- 常用计算机操作技巧与方法ppt,相见恨晚的20个常用PPT小技巧
- java zoom,进口javazoom不能得到解决
- 英文论文写作小贴士(2)
- 世界上最快的计算机-泰坦和天河二号
- 赵小楼《天道》《遥远的救世主》深度解析(9)肖亚文的“小心思和小算计”
- 哈希(hash)理解
- PHP之linux(一)linux基础
- Pwnginx – a nginx backdoor offering shell
- mysql数据库备份与导入
- IDC许可证是什么,如何申请IDC许可证办理