Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyuntingan data-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyuntingan data

WBOY

Lepaskan： 2023-09-24 12:38:01

asal

1331 orang telah melayarinya

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyuntingan data

Dengan pembangunan aplikasi web, fungsi penyuntingan data telah menjadi keperluan asas untuk banyak aplikasi. Dalam artikel ini, kami akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyuntingan data, dan memberikan contoh kod khusus.

1. Persediaan
Sebelum kita mula, kita perlu memasang PHP dan Vue.js dan memahami konsep asas dan penggunaannya.

Pasang PHP
PHP ialah bahasa skrip sebelah pelayan yang sangat popular yang boleh digunakan untuk mengendalikan permintaan dan respons web. Anda boleh memuat turun dan memasang PHP dari laman web rasmi (https://www.php.net/).
Pasang Vue.js
Vue.js ialah rangka kerja JavaScript untuk membina antara muka pengguna. Anda boleh memuat turun Vue.js dari tapak web rasmi (https://vuejs.org/) dan memperkenalkannya ke dalam halaman HTML anda.

2. Cipta pangkalan data dan jadual
Sebelum kita mula menulis kod, kita perlu mencipta pangkalan data dan jadual untuk menyimpan data kita. Mengambil MySQL sebagai contoh, anda boleh menggunakan kod berikut untuk mencipta pangkalan data bernama "pengguna" dan jadual bernama "pelajar":

CREATE DATABASE users;
USE users;
CREATE TABLE students (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50),
    age INT,
    email VARCHAR(50)
);

Salin selepas log masuk

3. Tulis kod PHP
Pertama, kita perlu menulis fail PHP untuk memproses logik terminal . Kami akan mencipta fail bernama "edit.php" dan menulis kod berikut di dalamnya:

<?php
// 连接到数据库
$mysqli = new mysqli('localhost', 'root', 'password', 'users');

// 检查连接是否成功
if($mysqli->connect_errno) {
    die('连接数据库失败：' . $mysqli->connect_error);
}

// 获取POST数据
$id = $_POST['id'];
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];

// 更新数据
$query = "UPDATE students SET name='$name', age='$age', email='$email' WHERE id='$id'";
$result = $mysqli->query($query);

// 返回结果
if($result) {
    echo '数据更新成功';
} else {
    echo '数据更新失败';
}

// 关闭数据库连接
$mysqli->close();
?>

Salin selepas log masuk

Kod di atas melaksanakan fungsi menyambung ke pangkalan data, mengemas kini data dan mengembalikan hasil.

4. Tulis kod Vue
Seterusnya, kita perlu menulis komponen Vue untuk mengendalikan interaksi bahagian hadapan. Kami akan mencipta fail bernama "EditForm.vue" dan menulis kod berikut di dalamnya:

<template>
  <div>
    <input v-model="name" type="text" placeholder="姓名">
    <input v-model="age" type="text" placeholder="年龄">
    <input v-model="email" type="text" placeholder="邮箱">
    <button @click="editData">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',      // 数据的ID
      name: '',    // 姓名
      age: '',     // 年龄
      email: ''    // 邮箱
    }
  },
  methods: {
    editData() {
      // 发送请求
      axios.post('/edit.php', {
        id: this.id,
        name: this.name,
        age: this.age,
        email: this.email
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      })
    }
  }
}
</script>

Salin selepas log masuk

Kod di atas melaksanakan borang di mana pengguna boleh memasukkan data dan menghantar data ke siaran dengan mengklik terminal butang "Kemas kini" ke kemas kini.

5 Sepadukan kod
Akhir sekali, kita perlu menyepadukan kod PHP dan Vue dalam halaman HTML. Kami akan mencipta fail yang dipanggil "edit.html" dan menulis kod berikut di dalamnya:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>数据编辑</title>
</head>
<body>
  <div id="app">
    <edit-form></edit-form>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="EditForm.vue"></script>
  
  <script>
    new Vue({
      el: '#app',
      components: { EditForm }
    })
  </script>
</body>
</html>

Salin selepas log masuk

Kod di atas memperkenalkan komponen Vue ke dalam halaman HTML dan mencipta contoh Vue.

6. Kod ujian
Kini, anda boleh membuka fail "edit.html" dalam penyemak imbas dan cuba mengedit data. Apabila anda mengklik butang "Kemas Kini", data akan dihantar ke bahagian belakang untuk kemas kini dan hasilnya akan dipaparkan dalam konsol.

Ringkasan
Dalam artikel ini, kami memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyuntingan data, dan memberikan contoh kod khusus. Dengan mempelajari dan memahami kod ini, anda boleh dengan cepat memulakan dan menerapkannya pada projek anda sendiri. Harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyuntingan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!