Rumah > Artikel > pembangunan bahagian belakang > Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penambahan data
Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penambahan data
- 王林asal
- 2023-09-25 08:15:46977semak imbas
Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penambahan data
Apabila membangunkan aplikasi web, fungsi penambahan data adalah sangat biasa dan penting Titik fungsi. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue.js untuk melaksanakan fungsi penambahan data dan menyediakan contoh kod khusus.
- Persediaan bahagian hadapan
Pertama sekali, kita perlu menggunakan Vue.js di bahagian hadapan untuk membina antara muka pengguna. Pada halaman, kita boleh menggunakan borang untuk mengumpul data yang dimasukkan oleh pengguna dan menyerahkan data melalui butang.
Mula-mula, perkenalkan perpustakaan Vue.js dalam HTML dan buat contoh Vue:
<!DOCTYPE html>
<html>
<head>
<title>Data Adding with PHP and Vue</title>
</head>
<body>
<div id="app">
<form @submit.prevent="addData">
<input type="text" v-model="name" placeholder="Name">
<input type="text" v-model="email" placeholder="Email">
<button type="submit">Add Data</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>Dalam kod di atas, kami lulus @submit.prevent digunakan untuk menghalang gelagat penyerahan lalai borang dan memanggil kaedah addData bagi tika Vue. v-model指令将输入框的值和Vue实例中的数据属性进行了绑定，用户在输入框中输入的内容会自动更新到Vue实例的对应数据属性中。@submit.prevent指令用于阻止表单的默认提交行为，并调用Vue实例的addData方法。
- 后端准备
接下来，我们需要使用PHP来处理前端传递过来的数据并将其存储到数据库中。
首先，在服务器上创建一个PHP文件，比如add_data.php。在该文件中，我们需要接收前端发送过来的数据，并将其存储到数据库中。
<?php
// 连接到数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "your_database_name";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 获取前端传递过来的数据
$name = $_POST['name'];
$email = $_POST['email'];
// 将数据存储到数据库中
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "Data added successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>在上面的代码中，我们首先连接到数据库，并获取前端传递过来的数据。然后，我们使用INSERT INTO语句将数据插入到数据库的users表中。
- Vue实例
现在，我们需要在Vue实例中编写代码来处理数据的添加操作。首先，在前端项目的根目录下创建一个名为app.js的JavaScript文件。在该文件中，我们需要创建一个Vue实例，并定义addData方法来处理表单的提交。
new Vue({
el: '#app',
data: {
name: '',
email: ''
},
methods: {
addData() {
// 使用axios库发送POST请求
axios.post('add_data.php', {
name: this.name,
email: this.email
})
.then(function (response) {
console.log(response.data);
// 清空输入框
this.name = '';
this.email = '';
})
.catch(function (error) {
console.log(error);
});
}
}
});在上面的代码中，我们使用了axios库来发送POST请求到服务器上的add_data.php文件，并将需要添加的数据作为请求体发送过去。成功回调函数中，我们打印出服务器端返回的响应数据，并清空输入框。
- 运行项目
现在，我们可以在服务器上运行这个项目。将上述前端文件和后端文件放在一个目录中，并在命令行中启动一个PHP服务器。
php -S localhost:8000
然后，在浏览器中访问http://localhost:8000
- Penyediaan belakang
Seterusnya, kita perlu menggunakan PHP untuk memproses data yang diluluskan oleh bahagian hadapan dan menyimpannya dalam dalam pangkalan data.
#🎜🎜#Pertama, buat fail PHP pada pelayan, sepertiadd_data.php. Dalam fail ini, kita perlu menerima data yang dihantar oleh bahagian hadapan dan menyimpannya dalam pangkalan data. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mula-mula menyambung ke pangkalan data dan mendapatkan data yang diluluskan oleh bahagian hadapan. Kami kemudian menggunakan pernyataan INSERT INTO untuk memasukkan data ke dalam jadual users pangkalan data. #🎜🎜#- #🎜🎜#Vue instance#🎜🎜##🎜🎜##🎜🎜#Sekarang, kita perlu menulis kod dalam contoh Vue untuk mengendalikan operasi penambahan data. Mula-mula, buat fail JavaScript bernama
app.js dalam direktori akar projek bahagian hadapan. Dalam fail ini, kita perlu mencipta contoh Vue dan mentakrifkan kaedah addData untuk mengendalikan penyerahan borang. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami menggunakan perpustakaan axios untuk menghantar permintaan POST ke fail add_data.php pada pelayan dan menghantar data yang perlu ditambah sebagai badan permintaan lalu. Dalam fungsi panggil balik kejayaan, kami mencetak data respons yang dikembalikan oleh pelayan dan mengosongkan kotak input. #🎜🎜#- #🎜🎜#Jalankan projek#🎜🎜##🎜🎜##🎜🎜#Kini, kita boleh menjalankan projek pada pelayan. Letakkan fail frontend dan backend di atas dalam direktori dan mulakan pelayan PHP dari baris arahan. #🎜🎜#rrreee#🎜🎜#Kemudian, lawati
http://localhost:8000 dalam penyemak imbas untuk melihat antara muka borang. Isikan data yang sepadan dalam kotak input dan klik butang "Tambah Data" Data akan ditambahkan ke pangkalan data dan "Data berjaya ditambah" akan dipaparkan pada konsol. #🎜🎜##🎜🎜#Ringkasan: #🎜🎜##🎜🎜#Melalui langkah di atas, kami berjaya melaksanakan fungsi penambahan data menggunakan PHP dan Vue.js. Kod bahagian hadapan menggunakan Vue.js untuk membina antara muka pengguna dan menghantar permintaan POST ke fail PHP bahagian belakang melalui perpustakaan axios untuk operasi penambahan data. Fail PHP bahagian belakang menerima data yang dihantar oleh bahagian hadapan dan menyimpannya dalam pangkalan data. Kaedah ini mudah dan mudah serta boleh digunakan secara meluas semasa membangunkan aplikasi web. #🎜🎜#Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penambahan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!