以下是利用Alpine.js和ThinkPHP 6实现分页功能的一种示例方式，示例包含了后端ThinkPHP 6处理分页数据以及前端Alpine.js渲染分页链接和展示分页后的数据等步骤：

一、后端ThinkPHP 6部分（处理分页逻辑与提供数据接口）

  1. 创建控制器方法来获取分页数据
    在ThinkPHP 6的应用中，假设我们有一个Article模型对应文章数据表，创建一个控制器方法来处理文章数据的分页查询，示例代码如下：
namespace app\controller;

use app\model\Article;
use think\facade\Db;
use think\Paginator;

class ArticleController
{
    public function index()
    {
        // 获取当前页码，默认为1，如果前端传来页码参数则使用传来的
        $page = input('page', 1, 'int');
        // 设置每页显示的数据条数，这里假设每页显示10条，可以根据需求调整
        $limit = 10;

        // 使用模型的查询构建器进行分页查询
        $articleList = Article::order('id', 'desc')
            ->paginate([
                'list_rows' => $limit,
                'page' => $page,
            ]);

        return json([
            'code' => 0,
            'msg' => 'success',
            'data' => $articleList->toArray()
        ]);
    }
}

在上述代码中：

  • 通过input函数获取前端传来的页码参数（如果没有则默认为1），同时定义了每页显示的文章数量（$limit）。
  • 使用Article模型的查询构建器进行分页查询，按照文章的id倒序排列，调用paginate方法传入分页相关的配置（每页行数和当前页码）来获取分页后的文章列表数据。
  • 最后将包含状态码、提示信息以及分页数据（通过toArray方法将Paginator实例转换为数组）的结果以JSON格式返回给前端。
  1. 配置路由（如果还未配置）
    在ThinkPHP 6的路由文件（一般是route/route.php）中添加对应的路由规则，使得前端可以访问到上述控制器方法，示例如下：
use think\facade\Route;

Route::get('articles', 'ArticleController@index');

这样，当前端访问/articles这个URL时，就会触发ArticleController的index方法来获取分页数据。

二、前端Alpine.js部分（渲染分页和展示数据）

  1. 在HTML页面引入Alpine.js库（可以通过CDN引入）
    在HTML页面的<head>标签内添加如下代码引入Alpine.js：

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

  2. 创建HTML结构用于展示文章数据和分页链接
    示例如下：

    <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>文章列表分页示例</title>
</head>

<body>
 <div x-data="{ articles: [], currentPage: 1, totalPages: 0 }" x-init="init()">
     <h1>文章列表</h1>
     <ul>
         <li x-for="article in articles" :key="article.id">
             <h2 x-text="article.title"></h2>
             <p x-text="article.content"></p>
         </li>
     </ul>
     <div>
         <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
         <span x-text="currentPage"></span> / <span x-text="totalPages"></span>
         <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
     </div>
 </div>

 <script>
     function init() {
         // 调用后端接口获取分页数据，这里使用fetch API，也可以用其他方式如axios等
         fetch('/articles')
            .then(response => response.json())
            .then(data => {
                 if (data.code === 0) {
                     // 将获取到的文章数据赋值给articles属性
                     this.articles = data.data.data;
                     // 设置总页数
                     this.totalPages = data.data.last_page;
                 }
             });
     }

     function prevPage() {
         if (this.currentPage > 1) {
             this.currentPage--;
             this.fetchArticles();
         }
     }

     function nextPage() {
         if (this.currentPage < this.totalPages) {
             this.currentPage++;
             this.fetchArticles();
         }
     }

     function fetchArticles() {
         fetch(`/articles?page=${this.currentPage}`)
            .then(response => response.json())
            .then(data => {
                 if (data.code === 0) {
                     this.articles = data.data.data;
                 }
             });
     }
 </script>
</body>

</html>

    在上述HTML代码中：

  3. 通过x-data指令定义了一个包含articles（用于存放文章数据）、currentPage（当前页码）、totalPages（总页数）等属性的Alpine.js组件。
  4. 在x-init指令对应的init函数中，使用fetch函数调用后端/articles接口获取初始的分页数据，成功获取后将文章数据赋值给articles属性，同时设置总页数。
  5. 定义了prevPage和nextPage函数分别用于处理上一页和下一页按钮的点击事件，点击时会更新当前页码，并调用fetchArticles函数重新从后端获取对应页码的文章数据进行展示。
  6. fetchArticles函数根据当前页码构建URL并调用后端接口获取相应的数据，更新articles属性以展示新的文章列表。

这样，通过后端ThinkPHP 6处理分页数据并向前端提供接口，前端利用Alpine.js动态获取数据、更新页码以及展示分页后的文章列表，就实现了基本的分页功能。你可以根据实际需求进一步调整样式、优化交互逻辑以及扩展功能等。

标签: PHP, ThinkPHP

评论已关闭