PHPとVueを使ってデータ連携機能を実装する方法

CREATE DATABASE students;
USE students;

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(255),
  email VARCHAR(255),
  age INT
);

<?php
// 连接数据库
$db = new PDO('mysql:host=localhost;dbname=students', 'username', 'password');

// 获取用户数据
function getUsers() {
  global $db;
  $query = $db->query('SELECT * FROM users');
  $users = $query->fetchAll(PDO::FETCH_ASSOC);
  return $users;
}

// 保存用户数据
function saveUser($name, $email, $age) {
  global $db;
  $stmt = $db->prepare('INSERT INTO users (name, email, age) VALUES (?, ?, ?)');
  $stmt->execute([$name, $email, $age]);
}

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }} - {{ user.age }}
      </li>
    </ul>
    <h2>添加用户</h2>
    <input v-model="name" placeholder="姓名" />
    <input v-model="email" placeholder="邮箱" />
    <input v-model="age" placeholder="年龄" />
    <button @click="saveUser">保存</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      name: '',
      email: '',
      age: ''
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('backend.php?action=getUsers')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    saveUser() {
      axios.post('backend.php?action=saveUser', {
        name: this.name,
        email: this.email,
        age: this.age
      })
      .then(() => {
        this.getUsers();
        this.name = '';
        this.email = '';
        this.age = '';
      })
      .catch(error => {
        console.error(error);
      });
    }
  }
};
</script>

<?php
header('Content-Type: application/json');

include 'db.php';

$action = $_GET['action'];

if ($action === 'getUsers') {
  $users = getUsers();
  echo json_encode($users);
}

if ($action === 'saveUser') {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $age = $_POST['age'];
  saveUser($name, $email, $age);
}