PHP后端如何优雅地与Vue 3前端对话

对于刚接触前后端分离的开发者来说，如何让 PHP 后端和 Vue 3 前端顺利交互，往往是第一只拦路虎。今天我们不搞深奥的架构探讨，只用最简单直白的方式，带你跑通一个“前端请求-后端响应”的完整闭环！
一、后端：用 PHP 写个简单的 API 接口
PHP 是一种广泛用于 Web 开发的服务器端脚本语言，它允许开发者创建动态网页 。在前后端分离的模式下，PHP 不再负责输出 HTML，而是纯粹地返回数据。
我们可以通过 PHP 处理客户端提交的数据，并根据数据生成动态内容 。最简单的做法就是返回一段 JSON。创建一个 api.php 文件，写上以下代码：

<?php
// 允许所有源跨域请求（开发阶段为了方便，生产环境请替换为具体域名）
header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');

// 模拟从数据库获取的数据
$data = [
    'status' => 'success',
    'message' => 'Hello from PHP!',
    'articles' => [
        ['id' => 1, 'title' => 'Vue3 极简入门'],
        ['id' => 2, 'title' => 'PHP API 实战']
    ]
];

// 将数组转换为 JSON 字符串输出
echo json_encode($data);
?>

这样，一个返回 JSON 数据的 RESTful API 接口就搞定了 ！
二、前端：用 Vue 3 接收并展示数据
Vue 3 引入了 Composition API，允许开发者更灵活地组织组件逻辑 。我们可以利用 ref 来定义响应式数据 ，并在组件挂载时请求 PHP 接口。
在 Vue 3 的 <script setup> 语法中，代码更加简洁直观 ：

<template>
  <div>
    <h2>{{ message }}</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">
        {{ article.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 使用 ref 创建响应式引用 [10](@ref)[11](@ref)
const message = ref('')
const articles = ref([])

// 组件挂载时执行请求 [9](@ref)
onMounted(async () => {
  try {
    // 请求 PHP 后端接口
    const response = await fetch('http://localhost/your-path/api.php')
    const data = await response.json()
    // 更新响应式数据，视图会自动更新 [11](@ref)
    message.value = data.message
    articles.value = data.articles
  } catch (error) {
    console.error('请求失败:', error)
  }
})
</script>

三、核心概念小结

JSON 是沟通的桥梁：前端 JavaScript 和后端 PHP 之间，通过 JSON 格式传递数据是最通用的做法 。PHP 用 json_encode() 打包，JS 用 response.json() 解包。
跨域（CORS）不可忽视：本地开发时，Vue 跑在 localhost:5173，PHP 跑在localhost:80，端口不同即为跨域。务必在 PHP 脚本开头设置 header("Access-Control-Allow-Origin: *")，否则前端会报错。

css代码块

响应式驱动视图：在 Vue 3 中，我们只需关注数据的修改（如 message.value = ...），DOM 的更新框架会自动帮你完成 。