PHP+Vue 3实现增删改查(CRUD)

后端(PHP)

首先,我们需要一个简单的PHP后端来处理增删改查操作。假设我们有一个名为items的表,包含idnamedescription字段。

1. 数据库连接

创建一个db.php文件来处理数据库连接:

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 复制代码
<?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。如果没有,可以使用以下命令安装:

bash 复制代码
npm install -g @vue/cli

然后创建一个新的Vue项目:

bash 复制代码
vue create vue-crud
cd vue-crud
2. 创建组件

src/components目录下创建一个ItemList.vue组件:

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组件:

vue 复制代码
<template>
  <div id="app">
    <ItemList />
  </div>
</template>

<script>
import ItemList from './components/ItemList.vue';

export default {
  name: 'App',
  components: {
    ItemList,
  },
};
</script>
4. 运行应用

最后,运行Vue应用:

bash 复制代码
npm run serve

现在,你应该能够在浏览器中访问http://localhost:8080,并看到一个简单的增删改查界面。

总结

这个示例展示了如何使用PHP和Vue 3实现一个基本的增删改查功能。你可以根据需要扩展这个示例,例如添加表单验证、分页、排序等功能。

相关推荐
lsx20240610 分钟前
CSS 网页布局:从基础到进阶
开发语言
蜗牛沐雨15 分钟前
警惕 Rust 字符串的性能陷阱:`chars().nth()` 的深坑与高效之道
开发语言·后端·rust
鱼樱前端21 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
2401_858286111 小时前
125.【C语言】数据结构之归并排序递归解法
c语言·开发语言·数据结构·算法·排序算法·归并排序
guygg881 小时前
基于matlab的FIR滤波器
开发语言·算法·matlab
双叶8362 小时前
(C++)学生管理系统(正式版)(map数组的应用)(string应用)(引用)(文件储存的应用)(C++教学)(C++项目)
c语言·开发语言·数据结构·c++
源代码•宸2 小时前
C++高频知识点(二)
开发语言·c++·经验分享
你怎么知道我是队长2 小时前
python-input内置函数
开发语言·python
炒毛豆2 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅3 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试