用 PHP 构建 Pokémon API:初学者指南

用 php 构建 pokémon api:初学者指南

在本指南中,我们将逐步完成创建一个基本 php 项目的步骤,该项目将 pokémon api 与 flight 框架以及 zebra_curl 和 latte 等附加包结合使用。我们将探索设置项目、添加路线和渲染视图。

tl;dr:在 flight 中制作一个简单的基于 api 的项目并不难。查看本指南中使用的代码。

第 1 步:设置环境

首先,我们需要设置一个新的项目文件夹。打开终端,导航到所需位置,然后运行以下命令来创建新目录并输入它。

mkdir flight-pokeapicd flight-pokeapi

第 2 步:安装 composer

在深入研究代码之前,我们需要确保 composer 已安装。 composer 是 php 的依赖管理器,它将帮助我们包含必要的库。

如果您没有安装 composer,您可以使用以下命令安装它:

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"php composer-setup.phpphp -r "unlink('composer-setup.php');"

现在 composer 已安装在名为 ./composer.phar 的当前文件中,让我们管理我们的依赖项。

立即学习“PHP免费学习笔记(深入)”;

第三步:安装依赖项

要管理所需的包,我们只需要使用composer添加它们即可。

./composer.phar require flightphp/core stefangabos/zebra_curl latte/latte

这将安装:

flight php:一个轻量级的 php 框架。zebra_curl:处理 http 请求的 curl 包装器。latte:用于渲染视图的模板引擎。

第四步:设置index.php

接下来,让我们为应用程序创建入口点:public/index.php。该文件将设置我们的应用程序、配置路由并处理视图的渲染。

创建public目录和index.php文件:

mkdir publictouch public/index.php

现在将以下内容添加到index.php:

settempdirectory(__dir__ . '/../temp');flight::map('render', function(string $template_path, array $data = []) use ($latte) {  $latte->render(__dir__ . '/../views/' . $template_path, $data);});// setup zebra_curl for handling http requests$curl = new zebra_curl();$curl->cache(__dir__ . '/../temp');flight::map('curl', function() use ($curl) {     return $curl; });// define a simple routeflight::route('/', function() {  echo 'hello world!';});flight::start();

在此文件中:

我们加载 composer 的自动加载器。设置 latte 以渲染视图。映射一个自定义渲染方法,该方法使用 latte 渲染 /views 文件夹中的模板。设置 zebra_curl 来处理 api 请求,并在我们想要调用它时将其映射到使用 flight::curl()。为主页 (/) 定义一个简单的路由,仅返回“hello world!”

如果您想测试此设置,您可以从公共目录启动 php 服务器:

php -s localhost:8000 -t public/

现在,在浏览器中访问 http://localhost:8000/,您应该会看到“hello world!”。酷吧?

第5步:添加路由

现在我们已经设置了基本路线,让我们添加一个使用 pokémon api 的更复杂的路线。更新 public/index.php 以包含以下代码:

flight::group('/pokemon', function(router $router) {    // route to list all pokémon types    $router->get('/', function() {        $types_response = json_decode(flight::curl()->scrap('https://pokeapi.co/api/v2/type/', true));        $results = [];        while ($types_response->next) {            $results = array_merge($results, $types_response->results);            $types_response = json_decode(flight::curl()->scrap($types_response->next, true));        }        $results = array_merge($results, $types_response->results);        flight::render('home.latte', [ 'types' => $results ]);    });});

我们创建了一个 /pokemon 路线组。路线组“包围”路线,并允许我们为组内的所有路线定义通用功能。/pokemon 路由通过使用 zebra_curl 从 pokémon api 获取所有可用的 pokémon 类型来列出它们。这还不能工作,因为我们需要添加 home.latte 视图来显示 pokémon 类型。

第 6 步:使用 latte 渲染视图

现在我们正在获取数据,让我们设置视图来显示它。创建views目录并添加latte模板文件以显示神奇宝贝类型。

mkdir viewstouch views/home.latte

将以下代码添加到views/home.latte:

welcome to the pokemon world!

types of pokemon

在此文件中:

我们循环遍历从路由传递过来的 $types 数组并显示每个 pokémon 类型的名称。

现在,访问 /pokemon 将显示所有神奇宝贝类型的列表!

第 7 步:分组并添加更多路线

让我们扩展 pokémon 路线,以获取特定类型和单个 pokémon 的更多详细信息。将以下路线添加到您的 /pokemon 组:

// route to fetch a specific pokémon type and list all associated pokémon$router->get('/type/@type', function(string $type) {    $curl = flight::curl();    $type_response = json_decode($curl->scrap('https://pokeapi.co/api/v2/type/' . $type, true));    $pokemon_urls = [];    foreach($type_response->pokemon as $pokemon_data) {        $pokemon_urls[] = $pokemon_data->pokemon->url;    }    $pokemon_data = [];    // the little & here is important to pass the variable by reference.    // in other words it allows us to modify the variable inside the closure.    $curl->get($pokemon_urls, function(stdclass $result) use (&$pokemon_data) {        $pokemon_data[] = json_decode($result->body);    });    flight::render('type.latte', [         'type' => $type_response->name,        'pokemons' => $pokemon_data    ]);});

在这条路线中,我们:

获取特定神奇宝贝类型的详细信息,包括所有相关的神奇宝贝。发送多个 api 请求以获取每个 pokémon 的详细信息。使用模板 (type.latte) 渲染数据。

接下来,创建 type.latte 视图:

touch views/type.latte

将以下内容添加到type.latte:

{$type|firstupper}

此模板显示与特定类型关联的每个神奇宝贝的名称。

第8步:有效果吗?

此时,您已经使用 flight php、用于 api 请求的 zebra_curl 和用于视图渲染的 latte 设置了基本的 pokémon api 使用者。您可以通过添加更多路线和完善模板来进一步扩展此项目。

要查看您的项目,请从公共目录启动 php 服务器:

php -s localhost:8000 -t public/

现在,在浏览器中访问 http://localhost:8000/pokemon,您应该会看到 pokémon 类型的列表。

故障排除

如果您需要帮助或遇到问题,您可以在 github 中查看完整代码,看看您可能在哪里犯了错误。

希望您喜欢这个小教程。如果您有任何疑问或需要帮助,请随时在下面的评论中提问。快乐编码!

以上就是用 PHP 构建 Pokémon API:初学者指南的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1246404.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月9日 18:33:49
下一篇 2025年12月9日 18:34:01

相关推荐

  • HTML、CSS 和 JavaScript 中的简单侧边栏菜单

    构建一个简单的侧边栏菜单是一个很好的主意,它可以为您的网站添加有价值的功能和令人惊叹的外观。 侧边栏菜单对于客户找到不同项目的方式很有用,而不会让他们觉得自己有太多选择,从而创造了简单性和秩序。 今天,我将分享一个简单的 HTML、CSS 和 JavaScript 源代码来创建一个简单的侧边栏菜单。…

    2025年12月24日
    200
  • 前端代码辅助工具:如何选择最可靠的AI工具?

    前端代码辅助工具:可靠性探讨 对于前端工程师来说,在HTML、CSS和JavaScript开发中借助AI工具是司空见惯的事情。然而,并非所有工具都能提供同等的可靠性。 个性化需求 关于哪个AI工具最可靠,这个问题没有一刀切的答案。每个人的使用习惯和项目需求各不相同。以下是一些影响选择的重要因素: 立…

    2025年12月24日
    300
  • 带有 HTML、CSS 和 JavaScript 工具提示的响应式侧边导航栏

    响应式侧边导航栏不仅有助于改善网站的导航,还可以解决整齐放置链接的问题,从而增强用户体验。通过使用工具提示,可以让用户了解每个链接的功能,包括设计紧凑的情况。 在本教程中,我将解释使用 html、css、javascript 创建带有工具提示的响应式侧栏导航的完整代码。 对于那些一直想要一个干净、简…

    2025年12月24日
    000
  • 布局 – CSS 挑战

    您可以在 github 仓库中找到这篇文章中的所有代码。 您可以在这里查看视觉效果: 固定导航 – 布局 – codesandbox两列 – 布局 – codesandbox三列 – 布局 – codesandbox圣杯 &#8…

    2025年12月24日
    000
  • 隐藏元素 – CSS 挑战

    您可以在 github 仓库中找到这篇文章中的所有代码。 您可以在此处查看隐藏元素的视觉效果 – codesandbox 隐藏元素 hiding elements hiding elements hiding elements hiding elements hiding element…

    2025年12月24日
    400
  • 如何使用 Laravel 框架轻松整合微信支付与支付宝支付?

    如何通过 laravel 框架整合微信支付与支付宝支付 在 laravel 开发中,为电商网站或应用程序整合支付网关至关重要。其中,微信支付和支付宝是中国最流行的支付平台。本文将介绍如何使用 laravel 框架封装这两大支付平台。 一个简单有效的方法是使用业内认可的 easywechat lara…

    2025年12月24日
    000
  • 居中 – CSS 挑战

    您可以在 github 仓库中找到这篇文章中的所有代码。 您可以在此处查看垂直中心 – codesandbox 和水平中心的视觉效果。 通过 css 居中 垂直居中 centering centering centering centering centering centering立即…

    2025年12月24日 好文分享
    300
  • Laravel 框架中如何无缝集成微信支付和支付宝支付?

    laravel 框架中微信支付和支付宝支付的封装 如何将微信支付和支付宝支付无缝集成到 laravel 框架中? 建议解决方案 考虑使用 easywechat 的 laravel 版本。easywechat 是一个成熟、维护良好的库,由腾讯官方人员开发,专为处理微信相关功能而设计。其 laravel…

    2025年12月24日
    500
  • 如何在 Laravel 框架中轻松集成微信支付和支付宝支付?

    如何用 laravel 框架集成微信支付和支付宝支付 问题:如何在 laravel 框架中集成微信支付和支付宝支付? 回答: 建议使用 easywechat 的 laravel 版,easywechat 是一个由腾讯工程师开发的高质量微信开放平台 sdk,已被广泛地应用于许多 laravel 项目中…

    2025年12月24日
    000
  • 使用Laravel框架如何整合微信支付和支付宝支付?

    使用 Laravel 框架整合微信支付和支付宝支付 在使用 Laravel 框架开发项目时,整合支付网关是常见的需求。对于微信支付和支付宝支付,推荐采用以下方法: 使用第三方库:EasyWeChat 的 Laravel 版本 建议直接使用现有的 EasyWeChat 的 Laravel 版本。该库由…

    2025年12月24日
    000
  • 如何将微信支付和支付宝支付无缝集成到 Laravel 框架中?

    如何简洁集成微信和支付宝支付到 Laravel 问题: 如何将微信支付和支付宝支付无缝集成到 Laravel 框架中? 答案: 强烈推荐使用流行的 Laravel 包 EasyWeChat,它由腾讯开发者维护。多年来,它一直保持更新,提供了一个稳定可靠的解决方案。 集成步骤: 安装 Laravel …

    2025年12月24日
    100
  • 如何在移动端实现子 div 在父 div 内任意滑动查看?

    如何在移动端中实现让子 div 在父 div 内任意滑动查看 在移动端开发中,有时我们需要让子 div 在父 div 内任意滑动查看。然而,使用滚动条无法实现负值移动,因此需要采用其他方法。 解决方案: 使用绝对布局(absolute)或相对布局(relative):将子 div 设置为绝对或相对定…

    2025年12月24日
    000
  • 移动端嵌套 DIV 中子 DIV 如何水平滑动?

    移动端嵌套 DIV 中子 DIV 滑动 在移动端开发中,遇到这样的问题:当子 DIV 的高度小于父 DIV 时,无法在父 DIV 中水平滚动子 DIV。 无限画布 要实现子 DIV 在父 DIV 中任意滑动,需要创建一个无限画布。使用滚动无法达到负值,因此需要使用其他方法。 相对定位 一种方法是将子…

    2025年12月24日
    000
  • 移动端项目中,如何消除rem字体大小计算带来的CSS扭曲?

    移动端项目中消除rem字体大小计算带来的css扭曲 在移动端项目中,使用rem计算根节点字体大小可以实现自适应布局。但是,此方法可能会导致页面打开时出现css扭曲,这是因为页面内容在根节点字体大小赋值后重新渲染造成的。 解决方案: 要避免这种情况,将计算根节点字体大小的js脚本移动到页面的最前面,即…

    2025年12月24日
    000
  • Nuxt 移动端项目中 rem 计算导致 CSS 变形,如何解决?

    Nuxt 移动端项目中解决 rem 计算导致 CSS 变形 在 Nuxt 移动端项目中使用 rem 计算根节点字体大小时,可能会遇到一个问题:页面内容在字体大小发生变化时会重绘,导致 CSS 变形。 解决方案: 可将计算根节点字体大小的 JS 代码块置于页面最前端的 标签内,确保在其他资源加载之前执…

    2025年12月24日
    200
  • Nuxt 移动端项目使用 rem 计算字体大小导致页面变形,如何解决?

    rem 计算导致移动端页面变形的解决方法 在 nuxt 移动端项目中使用 rem 计算根节点字体大小时,页面会发生内容重绘,导致页面打开时出现样式变形。如何避免这种现象? 解决方案: 移动根节点字体大小计算代码到页面顶部,即 head 中。 原理: flexível.js 也遇到了类似问题,它的解决…

    2025年12月24日
    000
  • 形状 – CSS 挑战

    您可以在 github 仓库中找到这篇文章中的所有代码。 您可以在此处查看 codesandbox 的视觉效果。 通过css绘制各种形状 如何在 css 中绘制正方形、梯形、三角形、异形三角形、扇形、圆形、半圆、固定宽高比、0.5px 线? shapes 0.5px line .square { w…

    2025年12月24日
    000
  • 有哪些美观的开源数字大屏驾驶舱框架?

    开源数字大屏驾驶舱框架推荐 问题:有哪些美观的开源数字大屏驾驶舱框架? 答案: 资源包 [弗若恩智能大屏驾驶舱开发资源包](https://www.fanruan.com/resource/152) 软件 [弗若恩报表 – 数字大屏可视化组件](https://www.fanruan.c…

    2025年12月24日
    000
  • 网站底部如何实现飘彩带效果?

    网站底部飘彩带效果的 js 库实现 许多网站都会在特殊节日或活动中添加一些趣味性的视觉效果,例如点击按钮后散发的五彩缤纷的彩带。对于一个特定的网站来说,其飘彩带效果的实现方式可能有以下几个方面: 以 https://dub.sh/ 网站为例,它底部按钮点击后的彩带效果是由 javascript 库实…

    2025年12月24日
    000
  • 网站彩带效果背后是哪个JS库?

    网站彩带效果背后是哪个js库? 当你访问某些网站时,点击按钮后,屏幕上会飘出五颜六色的彩带,营造出庆祝的氛围。这些效果是通过使用javascript库实现的。 问题: 哪个javascript库能够实现网站上点击按钮散发彩带的效果? 答案: 根据给定网站的源代码分析: 可以发现,该网站使用了以下js…

    好文分享 2025年12月24日
    100

发表回复

登录后才能评论
关注微信