使用Vue.js和Axios从第三方API获取数据 — SitePoint

更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩。维基百科。org /维基/ application_programming_interface)。我最近看了一些[公开](https://github.com/toddmotto/public-apis API),发现有很多很酷的东西,可以从这些来源的数据。

通常情况下,在构建 JavaScript 应用程序时,您希望从远程源或从API获取数据。我最近研究了一些公开的API,发现可以使用这些数据源完成很多很酷的东西。

更多来自作者的提示

  • 快速提示:如何在JavaScript中排序对象数组

使用Vue.js,可以逐步地构建围绕其中一个服务的应用程序,并在几分钟内就可以开始向用户提供内容服务。

我将演示如何构建一个简单的新闻应用程序,它可以显示当天的热门新闻文章,并允许用户按照他们的兴趣类别进行过滤,从纽约时报API获取数据。您可以在这里找到本教程的完整代码。

下面是最终应用的外观:

Vue.js news web app

要学习本教程,您将需要一些非常基本的Vue.js的知识。 您可以在这里找到一个很棒的“入门指南”。 我还将使用ES6语法,您可以到这里进一步学习:https://www.sitepoint.com/tag/es6/ 。

项目结构

为了保持简单,我们只使用2个文件:

./app.js
./index.html 

app.js将包含我们应用程序的所有逻辑,index.html 文件将包含我们应用程序的主视图。

我们先在 index.html 中写一些基本的标记:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>The greatest news app ever</title></head><body><div class="container" id="app"><h3 class="text-center">VueNews</h3> </div></body>
</html>

然后,在index.html的底部导入 Vue.jsapp.js,就在</body>标签之前:

<script src="https://unpkg.com/vue"></script> <script src="app.js"></script> 

可选的,我们还可以导入Foundation,以利用一些预先创建的样式,来使我们的视图看起来更好一点。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> 

创建一个简单的 Vue App

首先,我们将在div#app 元素上创建一个新的 Vue 实例,并使用一些测试数据来模拟新闻API的响应:

// ./app.js
const vm = new Vue({ el: '#app', data: { results: [ {title: "the very first post", abstract: "lorem ipsum some test dimpsum"}, {title: "and then there was the second", abstract: "lorem ipsum some test dimsum"}, {title: "third time's a charm", abstract: "lorem ipsum some test dimsum"}, {title: "four the last time", abstract: "lorem ipsum some test dimsum"} ] } }); 

我们通过el选项告诉 Vue 要挂载的目标元素,并通过data选项指定我们的应用程序用到的数据。

要在我们的应用程序视图中显示这些模拟数据,我们可以在#app元素中写入下面的标记:

<!-- ./index.html -->
<div class="columns medium-3" v-for="result in results"><div class="card"><div class="card-divider">{{ result.title }}</div><div class="card-section"><p>{{ result.abstract }}.</p></div></div>
</div>

v-for 指令用于渲染我们的 results 列表。 我们使用双花括号来显示每一项的内容。

您可以在 Vue 模板语法 这里内容

我们现在已经完成了基本的布局工作:

使用模拟数据的新闻App

从 API 获取数据

要使用 纽约时报API,您需要获得一个API密钥。所以如果你还没有,请到这里:https://developer.nytimes.com/signup ,注册并获取一个热点事件API的API密钥。

创建Ajax请求和处理响应

Axios是一个基于 Promise 的HTTP客户端,用于创建 Ajax请求,并且非常适合我们的应用。它提供了一些简单而丰富的API。 它与fetchAPI非常相似,但不需要为旧版浏览器额外的添加一个polyfill,另外还有一些很巧妙的地方。

以前,vue-resource 通常用于Vue项目,但现在已经退休了。

导入 axios:

<!-- ./index.html -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

现在,一旦我们的Vue应用被挂载 - mounted到页面,我们就可以创建home部分获取热点事件列表的请求:

// ./app.jsconst vm = new Vue({ el: '#app', data: { results: [] }, mounted() { axios.get("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key") .then(response => {this.results = response.data.results}) } }); 

记住: 将your_api_key替换为之前获取的实际API密钥。

现在我们可以在我们的应用主页上看到新闻列表。不要担心扭曲的视图,我们之后再说:

News Feed

来自纽约时报 API 的响应通过 Vue Devtools 查看起来像下面这样:

纽约时报 API返回的响应 - Vue.js news app

提示: 获取 Vue Devtools,来使Vue应用调试更加简单。

为了使我们的工作更加整洁,可重用,我们将做一些小小的重构,并创建一个辅助函数来构建我们的URL。我们还将注册getPosts作为我们应用程序的一个方法,将其添加到methods对象中:

const NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/"; const ApiKey = "your_api_key"; function buildUrl (url) { return NYTBaseUrl + url + ".json?api-key=" + ApiKey } const vm = new Vue({ el: '#app', data: { results: [] }, mounted () { this.getPosts('home'); }, methods: { getPosts(section) { let url = buildUrl(section); axios.get(url).then((response) => { this.results = response.data.results; }).catch( error => { console.log(error); }); } } }); 

通过引入 计算属性 对API获取的原始results来进行一些修改,然后对我们的视图进行一些更改。

// ./app.jsconst vm = new Vue({ el: '#app', data: { results: [] }, mounted () { this.getPosts('home'); }, methods: { getPosts(section) { let url = buildUrl(section); axios.get(url).then((response) => { this.results = response.data.results; }).catch( error => { console.log(error); }); } }, computed: { processedPosts() { let posts = this.results; // Add image_url attribute posts.map(post => { let imgObj = post.multimedia.find(media => media.format === "superJumbo"); post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A"; }); // Put Array into Chunks let i, j, chunkedArray = [], chunk = 4; for (i=0, j=0; i < posts.length; i += chunk, j++) { chunkedArray[j] = posts.slice(i,i+chunk); } return chunkedArray; } } }); 

在上面的代码,在processedPosts的计算属性中,我们为每个新闻文章对象添加了一个image_url属性。 我们通过循环遍历API中的results,并在单个结果中搜索multimedia数组,找到所需格式的媒体类型,然后将该媒体的URL分配给“image_url”属性 。 如果媒体不可用,我们会将默认网址设为Placehold.it的图像。

我们还写了一个循环,将我们的results数组分组成4块。这将改善我们前面看到的扭曲的视图。

注意:您也可以轻松地使用Lodash等库进行分块

计算属性非常适合操纵数据。而不用创建一个方法,并且每次在我们需要将我们的帖子数组分块时,我们可以简单地将它定义为一个计算属性,并根据需要使用它,因为Vue会随时自动更新processedPosts计算属性的变化。

计算的属性也是基于它们的依赖关系缓存的,所以只要results不变,processedPosts属性返回一个自己的缓存版本。这将有助于提升性能,特别是在进行复杂的数据操作时。

接下来,我们在index.html中编辑我们的html来显示我们的计算结果:

<!-- ./index.html --> <div class="row" v-for="posts in processedPosts"> <div class="columns large-3 medium-6" v-for="post in posts"> <div class="card"> <div class="card-divider"> {{ post.title }} </div> <a :href="post.url" target="_blank"><img :src="post.image_url"></a> <div class="card-section"> <p>{{ post.abstract }}</p> </div> </div> </div> </div> 

现在应用程序看起来更好了:

NYT News App - Vue.js

介绍新闻列表组件

组件 可用于使应用程序的更加模块化,并且扩展了HTML。 新闻列表可以重构为一个组件,例如,如果应用程序增长,并且可能会在其他地方的使用新闻列表,那将很容易实现。

// ./app.jsVue.component('news-list', { props: ['results'], template: <section> <div class="row" v-for="posts in processedPosts"> <div class="columns large-3 medium-6" v-for="post in posts"> <div class="card"> <div class="card-divider"> {{ post.title }} </div> <a :href="post.url" target="_blank"><img :src="post.image_url"></a> <div class="card-section"> <p>{{ post.abstract }}</p> </div> </div> </div> </div> </section> , computed: { processedPosts() { let posts = this.results; // 添加 image_url 属性 posts.map(post => { let imgObj = post.multimedia.find(media => media.format === "superJumbo"); post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A"; }); // Put Array into Chunks let i, j, chunkedArray = [], chunk = 4; for (i=0, j=0; i < posts.length; i += chunk, j++) { chunkedArray[j] = posts.slice(i,i+chunk); } return chunkedArray; } } }); const vm = new Vue({ el: '#app', data: { results: [] }, mounted () { this.getPosts('home'); }, methods: { getPosts(section) { let url = buildUrl(section); axios.get(url).then((response) => { this.results = response.data.results; })

转载于:https://www.cnblogs.com/libin-1/p/6786348.html

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

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

相关文章

区位码怎么知道点阵里的起始点_自身免疫疾病的GAPS起始饮食改良版

写这篇文章的原因如果您已经关注我的博客一段时间&#xff0c;您知道我开始使用GAPS饮食&#xff0c;然后转换到AIP饮食&#xff0c;因为我仍在努力治疗炎症和自身免疫的发作。 Katy Haldiman 有同样的经历&#xff0c;我们并不孤单。许多患有自身免疫性疾病的人在 GAPS 上挣扎…

微信小程序APP(商超营销类)经验总结

项目介绍 这是一款主打门店营销的小程序。包括首页、门店、营销、个人设置、登录、数据统计展示、营销设置等。 本来要独立完成整个项目&#xff0c;包括前后端一套的&#xff0c;有些意外因素&#xff0c;项目临时收尾&#xff08;说明&#xff1a;只完成了前端的部分&#…

excel不显示0_Excel数字过长不能完整显示?超长数字变为0

Excel中计算规则和限制设定数值精确度为15位&#xff01;超过15位后&#xff0c;数字会显示为0excel数字超过15位&#xff0c;会显示为0&#xff0c;超过10位&#xff0c;默认采用科学计数法显示1、如何解决超长数字输入&#xff0c;全部显示问题&#xff1f;&#xff08;单元格…

Android天气预报设计

——嵌入式软件开发 名字功能模块代码行数备注谢灿辉Widget200桌面小程序李杨敏GPS定位&#xff0c;百度地图API100-150获取当前所在城市丁小芳城市选择Activity&#xff0c;天气API获取天气100-200包括数据库交互本软件是一个天气类应用软件&#xff0c;带有widget&#xff0c…

算法笔记_164:算法提高 最小方差生成树(Java)

目录 1 问题描述 2 解决方案 1 问题描述 问题描述给定带权无向图&#xff0c;求出一颗方差最小的生成树。输入格式输入多组测试数据。第一行为N,M&#xff0c;依次是点数和边数。接下来M行&#xff0c;每行三个整数U,V,W&#xff0c;代表连接U,V的边&#xff0c;和权值W。保证图…

layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)

表格展示神器之一&#xff1a;layui表格 前言&#xff1a;在写后台管理系统中使用最多的就是表格数据展示了&#xff0c;使用表格组件能提高大量的开发效率&#xff0c;目前主流的数据表格组件有bootstrap table、layui table、easyUI table等.... 博主个人比较倾向于layui&am…

算法设计与分析_算法设计与分析(第2版)第2章分治策略回顾

YI时间&#xff5c;外刊&#xff5c;MM-DFW&#xff5c;机器学习系列点击上方蓝字&#xff0c;关注给你写干货的松子茶分治策略是通用算法设计技术之一&#xff0c;很多有效的算法是它的特殊实现,顾名思义就是分而治之。一个问题能够用分治法求解的要素是问题能够按照某种方式分…

2017-2018-1 Java演绎法 第三周 作业

团队任务&#xff1a;团队展示与选题团队展示 队员学号及姓名 学号  姓名  主要负责工作  20162315  马军  日常统计&#xff0c;项目部分代码  20162316  刘诚昊  项目部分代码&#xff0c;代码质量测试  20162317  袁逸灏  组长 项目 主要 代码  201…

linux开机启动roscore,树莓派ubuntuMate系统中开机自启动ROS的launch文件

0x00 为何需要开机自启动launch文件在ROS开发后期阶段由于功能已经趋于稳定&#xff0c;因此就需要系统在一上电启动后就自动把ROS下的各节点程序加载运行&#xff0c;这样就省去了我们还得手动输入roslaunch命令来加载bringup的launch文件的操作。经过我的实际测试目前有两种方…

Oracle ADF移动世界! 你好!

您好&#xff0c;ADF Mobile&#xff0c;世界&#xff01; 您可能已经知道... ADF Mobile在这里&#xff01; 以下是一些链接&#xff0c;这些链接会让您有宾至如归的感觉。 ADF Mobile主页&#xff1a; http://www.oracle.com/technetwork/developer-tools/adf/overview/ad…

css 小知识点:inline/inline-block/line-height

inline: 此元素会被显示为内联元素&#xff0c;元素前后没有换行符。因此&#xff1a;无法设置宽度和高度&#xff5e; inline-block: 行内块元素。元素前后没有换行符&#xff08;CSS2.1 新增的值&#xff09; 用通俗的话讲&#xff0c;就是不独占一行的块级元素。然后拥有…

协同过滤算法_机器学习 | 简介推荐场景中的协同过滤算法,以及SVD的使用

本文始发于个人公众号&#xff1a;TechFlow&#xff0c;原创不易&#xff0c;求个关注今天是机器学习专题的第29篇文章&#xff0c;我们来聊聊SVD在上古时期的推荐场景当中的应用。推荐的背后逻辑有没有思考过一个问题&#xff0c;当我们在淘宝或者是某东这类电商网站购物的时候…

JavaOne 2012:观察与印象

当我坐在旧金山国际机场等待登上飞机返回家中时&#xff0c;我一次又一次令人满意但累人的JavaOne&#xff08;2012&#xff09;体验&#xff0c;我正在开始写这篇特别的博客文章。 自上周日的主题演讲以来&#xff0c;在会议上疯狂地撰写了约30篇博客文章之后&#xff0c;很难…

用imspost制作catia后处理_新产品开发需要做原型验证,怎么样成型制作才省钱?...

有一天一个朋友拿着一个公仔机器人的项目过来找我&#xff0c;说做200套外壳&#xff0c;问我如何省成本用最少的钱做好产品。类似一下图片的机器人一样。组装起来高200mm左右&#xff0c;内外配件总共是62个。我当时看到产品小估算重量也很轻&#xff0c;就跟他说用3D打印有快…

如何把大段文字转为带html标签的文字

开发网页的时候&#xff0c;有时候会遇到大段的隐私声明&#xff0c;用户协议等等&#xff0c;我们呀要复制粘贴展示出来&#xff0c;必须加大量的p标签&#xff0c;h1,h2&#xff0c;空格符&#xff0c;br标签&#xff0c;这对我们来说无疑是泪崩的&#xff0c;有个很好的办法…

使用MongoDB进行事件流

MongoDB是一个非常出色的“ NoSQL”数据库&#xff0c;具有广泛的应用程序。 在SoftwareMill开发的一个项目中&#xff0c;我们将其用作复制的事件存储&#xff0c;然后将事件从事件流传输到其他组件。 介绍 基本思想非常简单&#xff08;另请参阅Martin Fowler关于Event Sou…

c语言实训作业总结,c语言程序设计上机实践心得报告

c语言程序设计上机实践心得报告 班级:11 电信 2 姓名:莫金波 学号:1107032242012.12.28 惠州学院 HUIZHOU UNIVERSITY 我们专业的学生在专业老师的带领下进行了 c 语言设计基础教程的 实践学习。在这之前&#xff0c;我们已经对 c 语言这门课程学习了差不多一 个学期&#xff0…

JavaOne 2012:在JVM上诊断应用程序

值得参加Staffan Larsen &#xff08;Oracle Java Serviceability Architect&#xff09;的演讲“ 在JVM上诊断应用程序 ”&#xff08;Hilton Plaza A / B&#xff09;&#xff0c;只是为了学习Oracle JVM 7随附的新jcmd命令行工具。该演示对我来说是“奖金”&#xff0c;这对…

文档词频矩阵_论文理解:从词嵌入到文档距离

论文作者简介本论文第一作者Matt J. Kusner是牛津大学的副教授&#xff0c;致力于设计适应现实世界问题需求的新机器学习模型&#xff08;例如&#xff0c;fair algorithms, discrete generative models, document distances, privacy, dataset compression, budgeted learning…

c语言主调函数和被调函数,在C语言中,何为主调函数和被调函数,他们之 – 手机爱问...

2007-08-30请详细一些~最好举出例子你好。评价宝宝的标准基本上是&#xff1a;技能>资质>成长因为宝宝的评价是一项 仁者见仁的活儿&#xff0c;但其中有些规律我想是可以具体话的&#xff0c;希望能对你有帮助&#xff1a;1&#xff1a;技能&#xff1a;技能的意义有多大…