前言
如果你是一位喜欢室外运动的人，你肯定知道Strava这个运动记录社交网站。但是，假如你作为一名前端工程师也同样热衷于运动，那么你能否在自己的项目中直接获取到Strava API的数据，使用它与自己的前端展示相融合呢？
这里就向大家介绍一个npm包——strava-me，它将Strava API与前端框架连接起来，为你展示获取和使用Strava数据的方法，并指导你如何正确地在你自己的前端项目中实现此功能。
什么是strava-me？
strava-me是一个npm包，其旨在为使用React或Vue等前端框架的开发者带来快捷、简单的访问Strava文档API的方法。
这个包内包含一系列的组件，可以在前端页面上显示你的最新骑行或跑步数据、地图、个人信息、个人最佳记录或或同步数据等。此外，strava-me允许您通过封装API请求轻松地在您自己的应用程序中实现Strava OAuth授权。
安装strava-me
在您的React或Vue项目中，您可以通过以下命令进行安装：
npm install --save-dev strava-me
请注意：strava-me对于React和Vue3.x的支持处于测试阶段，如果你使用的是Vue2.x，你可以使用兼容1.x的版本。
使用strava-me
安装完strava-me后，你便可以开始使用它了。在此之前，您需要先设置一些Strava开发者的API配置，以便strava-me能够通过您提供的访问令牌获取Strava的第三方API数据。以下是strava-me如何与React框架结合的例子：
-- -------------------- ---- -------
------ ----------------------- -------------- ---- ------------
-------- ----- -
------ -
---------------------- ---------------------------------
-------------- --
------------------------
--
-
------ ------- ----其中，在该例子中，StravaProfile组件会显示您的最新跑步或骑行数据。事实上，strava-me提供了更多的组件以供大家使用，来展示自己的个人活动概览，领袖榜、健康数据等。
接下来，请您具体了解一下strava-me中的其他组件及其用法。
strava-me组件介绍与使用
StravaProfile
使用此组件可以快速轻松地在前端页面上显示并查看您的Strava个人资料。
-- -------------------- ---- -------
------ - ------------- - ---- ------------
-------- ----- -
------ -
-------------- --
--
-
------ ------- ----StravaActivities
此组件将在您的前端页面上展示您的最近的骑行或跑步数据。您可以通过activities属性指定您想要展示的活动数量，以及通过unit属性指定您喜欢的距离、时间等的度量单位。
-- -------------------- ---- -------
------ - ---------------- - ---- ------------
-------- ----- -
------ -
----------------- -------------- ----------- --
--
-
------ ------- ----StravaSegment
此组件可以在您的前端页面上显示Strava骑行或跑步路线。与Strava API交互的是由此组件定义的查询参数和URL，来展示简要信息。
-- -------------------- ---- -------
------ - ------------- - ---- ------------
-------- ----- -
------ -
-------------- ------------------ --
--
-
------ ------- ----StravaAthletes
此组件可以展示您在Strava社区中的个人简介以及最佳成绩。
-- -------------------- ---- -------
------ - -------------- - ---- ------------
-------- ----- -
------ -
--------------- ------------------ --
--
-
------ ------- ----StravaLogin
strava-me还允许您实现Strava API的OAuth登录验证，简单地使用以下代码：
-- -------------------- ---- -------
------ - ----------- - ---- ------------
-------- ----- -
------ -
--
------------ --------------------------------
--------------------------------------
----------------------------------------------
------------------------------- --
---
--
-
------ ------- ----结语
Strava API提供了一种简单、快速而优雅的方式，使开发者可以获取社区用户的运动数据。因此，直接与Strava API交互就是一种很有意义的学习体验。strava-me为开发者提供了一种快速获取Strava第三方API数据的方法，也希望这篇文章能够帮助到您顺利使用Strava API，使您的作品更加精彩。
以上便是strava-me的简单介绍，同时您可以阅读斯巴达赛车社交网络的文档对API的授权和调用进行更加详细的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580681e8991b448d52b0