Comment utiliser PHP et Vue pour implémenter la fonction d'ajout de données-tutoriel php-php.cn

Comment utiliser PHP et Vue pour implémenter la fonction d'ajout de données

王林

Libérer： 2023-09-25 08:20:02

original

947 Les gens l'ont consulté

Comment utiliser PHP et Vue pour implémenter la fonction dajout de données

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>

Copier après la connexion

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();
?>

Copier après la connexion

在上面的代码中，我们首先连接到数据库，并获取前端传递过来的数据。然后，我们使用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);
      });
    }
  }
});

Copier après la connexion

在上面的代码中，我们使用了axios库来发送POST请求到服务器上的add_data.php文件，并将需要添加的数据作为请求体发送过去。成功回调函数中，我们打印出服务器端返回的响应数据，并清空输入框。