后端（PHP）
首先，我们需要一个简单的PHP后端来处理增删改查操作。假设我们有一个名为items的表，包含id、name和description字段。
1. 数据库连接
创建一个db.php文件来处理数据库连接：
<?php
$host = 'localhost';
$dbname = 'your_database_name';
$username = 'your_username';
$password = 'your_password';try {$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {die("Could not connect to the database $dbname :" . $e->getMessage());
}
?>
2. CRUD操作
创建一个api.php文件来处理CRUD操作：
<?php
require 'db.php';header("Content-Type: application/json; charset=UTF-8");$method = $_SERVER['REQUEST_METHOD'];
$request = explode('/', trim($_SERVER['PATH_INFO'], '/'));if ($request[0] === 'items') {switch ($method) {case 'GET':if (isset($request[1])) {$stmt = $pdo->prepare("SELECT * FROM items WHERE id = ?");$stmt->execute([$request[1]]);$item = $stmt->fetch(PDO::FETCH_ASSOC);echo json_encode($item);} else {$stmt = $pdo->query("SELECT * FROM items");$items = $stmt->fetchAll(PDO::FETCH_ASSOC);echo json_encode($items);}break;case 'POST':$data = json_decode(file_get_contents("php://input"), true);$stmt = $pdo->prepare("INSERT INTO items (name, description) VALUES (?, ?)");$stmt->execute([$data['name'], $data['description']]);echo json_encode(['id' => $pdo->lastInsertId()]);break;case 'PUT':$data = json_decode(file_get_contents("php://input"), true);$stmt = $pdo->prepare("UPDATE items SET name = ?, description = ? WHERE id = ?");$stmt->execute([$data['name'], $data['description'], $request[1]]);echo json_encode(['success' => true]);break;case 'DELETE':$stmt = $pdo->prepare("DELETE FROM items WHERE id = ?");$stmt->execute([$request[1]]);echo json_encode(['success' => true]);break;}
}
?>
前端（Vue 3）
接下来，我们使用Vue 3来创建一个简单的用户界面来处理增删改查操作。
1. 安装Vue 3
首先，确保你已经安装了Vue CLI。如果没有，可以使用以下命令安装：
npm install -g @vue/cli
然后创建一个新的Vue项目：
vue create vue-crud
cd vue-crud
2. 创建组件
在src/components目录下创建一个ItemList.vue组件：
<template><div><h1>Items</h1><ul><li v-for="item in items" :key="item.id">{{ item.name }} - {{ item.description }}<button @click="editItem(item)">Edit</button><button @click="deleteItem(item.id)">Delete</button></li></ul><form @submit.prevent="addItem"><input v-model="newItem.name" placeholder="Name" required /><input v-model="newItem.description" placeholder="Description" required /><button type="submit">Add Item</button></form></div>
</template><script>
import axios from 'axios';export default {data() {return {items: [],newItem: { name: '', description: '' },};},methods: {async fetchItems() {const response = await axios.get('http://localhost/api.php/items');this.items = response.data;},async addItem() {const response = await axios.post('http://localhost/api.php/items', this.newItem);this.items.push({ id: response.data.id, ...this.newItem });this.newItem = { name: '', description: '' };},async editItem(item) {const updatedName = prompt('Enter new name', item.name);const updatedDescription = prompt('Enter new description', item.description);if (updatedName && updatedDescription) {await axios.put(`http://localhost/api.php/items/${item.id}`, {name: updatedName,description: updatedDescription,});item.name = updatedName;item.description = updatedDescription;}},async deleteItem(id) {await axios.delete(`http://localhost/api.php/items/${id}`);this.items = this.items.filter(item => item.id !== id);},},created() {this.fetchItems();},
};
</script>
3. 在主应用中使用组件
在src/App.vue中使用ItemList组件：
<template><div id="app"><ItemList /></div>
</template><script>
import ItemList from './components/ItemList.vue';export default {name: 'App',components: {ItemList,},
};
</script>
4. 运行应用
最后，运行Vue应用：
npm run serve
现在，你应该能够在浏览器中访问http://localhost:8080，并看到一个简单的增删改查界面。
总结
这个示例展示了如何使用PHP和Vue 3实现一个基本的增删改查功能。你可以根据需要扩展这个示例，例如添加表单验证、分页、排序等功能。
