我目前正在做一个项目，涉及到使用PHP和MySQL进行数据检索，以及使用Alpine.js进行动态前端交互。我的目标是将MySQL中数据获取返回的数组传递给Alpine.js中的x-init函数，因为我对使用这个JavaScript框架还比较陌生。我想介绍一下我目前所完成的工作：

数据.php

<?php

function dbConn() {
  //   some database connection here using PDO...

}

function getPosts() {
    return db()->query('SELECT u.username,p.* FROM users u JOIN posts p on u.id = p.user_id')->fetchAll(PDO::FETCH_ASSOC);

}

索引.php

<?php

$results = getPosts();

print("<pre>".print_r($results,true)."</pre>");

?>

<div x-data="posting()" x-init="fetchPost(<?php json_encode($results); ?>)">

    <template x-for="post in posts" :key="post.id">
        <h2 x-text="post.title"></h2>
        <p x-text="post.content"></p>
    </template>

</div>

应用程序.js

document.addEventListener("alpine:init", () => {
    Alpine.data("posting", () => ({
        fetchPost: (data) => {
            this.posts = data;
            console.log(this.posts);
        },
        posts: [],
    }));
});

下面是我的控制台上的结果，上面是我的数组结构：

先谢谢你！