PHP API文档的交互式示例展示 - 问答

在这个示例中，我们将创建一个简单的PHP API，用于获取书籍列表。我们将使用Slim框架来处理HTTP请求和响应。首先，确保你已经安装了Composer和Slim框架。

安装Slim框架：

composer require slim/slim "^3.0"

创建一个名为index.php的文件，然后将以下代码粘贴到其中：

<?php
require 'vendor/autoload.php';

use Psr\Http\Message\ServerRequestInterface as Request;
use Psr\Http\Message\ResponseInterface as Response;

$app = new \Slim\App;

// 获取书籍列表
$app->get('/books', function (Request $request, Response $response, array $args) {
    $books = [
        [
            'id' => 1,
            'title' => 'PHP API Development',
            'author' => 'John Doe'
        ],
        [
            'id' => 2,
            'title' => 'Learning Slim Framework',
            'author' => 'Jane Doe'
        ],
        [
            'id' => 3,
            'title' => 'Advanced PHP',
            'author' => 'Michael Smith'
        ]
    ];

    return $response->withJson($books);
});

$app->run();

在命令行中运行php index.php，启动Slim服务器。
打开浏览器或使用Postman等API测试工具，访问http://localhost:8080/books。你应该看到一个包含书籍列表的JSON响应。

现在我们已经创建了一个简单的PHP API，你可以使用交互式示例展示来演示其功能。例如，你可以创建一个HTML页面，其中包含一个表格，用于显示书籍列表。然后，你可以使用JavaScript（例如，使用jQuery）向API发出请求，并在表格中显示结果。

以下是一个简单的HTML和JavaScript示例，用于与我们的API进行交互：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP API Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table id="books-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Author</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $.get('http://localhost:8080/books', function(data) {
                data.forEach(function(book) {
                    $('#books-table tbody').append('<tr><td>' + book.id + '</td><td>' + book.title + '</td><td>' + book.author + '</td></tr>');
                });
            });
        });
    </script>
</body>
</html>

将此代码保存为index.html文件，然后在浏览器中打开它。你应该看到一个包含从API获取的书籍列表的表格。

0 赞

0 踩