Maison > Article > développement back-end > Comment utiliser PHP et Vue pour implémenter la fonction d'ajout de données
Comment utiliser PHP et Vue pour implémenter la fonction d'ajout de données
- 王林original
- 2023-09-25 08:15:46978parcourir
Comment utiliser PHP et Vue pour implémenter la fonction d'ajout de données
Lors du développement d'applications Web, la fonction d'ajout de données est un point de fonction très courant et important. Cet article expliquera comment utiliser PHP et Vue.js pour implémenter la fonction d'ajout de données et fournira des exemples de code spécifiques.
- Préparation du front-end
Tout d'abord, nous devons utiliser Vue.js sur le front-end pour créer l'interface utilisateur. Sur la page, nous pouvons utiliser un formulaire pour collecter les données saisies par l'utilisateur et soumettre les données via un bouton.
Tout d'abord, introduisez la bibliothèque Vue.js en HTML et créez une instance 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>Dans le code ci-dessus, nous utilisons la directive v-model pour ajouter la valeur de la zone de saisie au Instance Vue Les attributs de données sont liés et le contenu saisi par l'utilisateur dans la zone de saisie sera automatiquement mis à jour avec les attributs de données correspondants de l'instance Vue. La directive @submit.prevent est utilisée pour empêcher le comportement de soumission par défaut du formulaire et appeler la méthode addData de l'instance 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
- Préparation du backend
Ensuite, nous devons utiliser PHP pour traiter les données transmises par le front-end et les stocker dans la base de données.
🎜Tout d'abord, créez un fichier PHP sur le serveur, tel queadd_data.php. Dans ce fichier, nous devons recevoir les données envoyées par le front-end et les stocker dans la base de données. 🎜rrreee🎜Dans le code ci-dessus, nous nous connectons d'abord à la base de données et récupérons les données transmises par le front-end. Nous utilisons ensuite l'instruction INSERT INTO pour insérer des données dans la table users de la base de données. 🎜- 🎜Instance Vue🎜🎜🎜Maintenant, nous devons écrire du code dans l'instance Vue pour gérer l'opération d'ajout de données. Tout d'abord, créez un fichier JavaScript nommé
app.js dans le répertoire racine du projet front-end. Dans ce fichier, nous devons créer une instance Vue et définir la méthode addData pour gérer la soumission du formulaire. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la bibliothèque axios pour envoyer une requête POST au fichier add_data.php sur le serveur et envoyer les données qui doivent être ajoutées en tant que corps de la requête. Dans la fonction de rappel de réussite, nous imprimons les données de réponse renvoyées par le serveur et effaçons la zone de saisie. 🎜- 🎜Exécuter le projet🎜🎜🎜Maintenant, nous pouvons exécuter le projet sur le serveur. Placez les fichiers frontend et backend ci-dessus dans un répertoire et démarrez un serveur PHP à partir de la ligne de commande. 🎜rrreee🎜Ensuite, visitez
http://localhost:8000 dans le navigateur pour voir l'interface du formulaire. Remplissez les données correspondantes dans la zone de saisie et cliquez sur le bouton "Ajouter des données". Les données seront ajoutées à la base de données et "Données ajoutées avec succès" s'affichera sur la console. 🎜🎜Résumé : 🎜🎜Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction d'ajout de données à l'aide de PHP et Vue.js. Le code front-end utilise Vue.js pour créer l'interface utilisateur et envoie une requête POST au fichier PHP back-end via la bibliothèque axios pour les opérations d'ajout de données. Le fichier PHP back-end reçoit les données envoyées par le front-end et les stocke dans la base de données. Cette méthode est simple et pratique et peut être largement utilisée lors du développement d’applications Web. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!