So verwenden Sie PHP und Vue, um die Funktion zum Hinzufügen von Daten zu implementieren-PHP-Tutorial-php.cn

So verwenden Sie PHP und Vue, um die Funktion zum Hinzufügen von Daten zu implementieren

王林

Freigeben： 2023-09-25 08:20:02

Original

996 Leute haben es durchsucht

So verwenden Sie PHP und Vue, um die Funktion zum Hinzufügen von Daten zu implementieren

Bei der Entwicklung von Webanwendungen ist die Funktion zum Hinzufügen von Daten ein sehr häufiger und wichtiger Funktionspunkt. In diesem Artikel wird erläutert, wie Sie mit PHP und Vue.js die Funktion zum Hinzufügen von Daten implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Frontend-Vorbereitung

Zuerst müssen wir Vue.js im Frontend verwenden, um die Benutzeroberfläche zu erstellen. Auf der Seite können wir über ein Formular die vom Nutzer eingegebenen Daten erfassen und die Daten über eine Schaltfläche übermitteln.

Führen Sie zunächst die Vue.js-Bibliothek in HTML ein und erstellen Sie eine Vue-Instanz:

<!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>

Nach dem Login kopieren

Im obigen Code verwenden wir die Direktive v-model, um den Wert des Eingabefelds zum hinzuzufügen Vue-Instanz Die Datenattribute sind gebunden und der vom Benutzer in das Eingabefeld eingegebene Inhalt wird automatisch auf die entsprechenden Datenattribute der Vue-Instanz aktualisiert. Die Anweisung @submit.prevent wird verwendet, um das standardmäßige Übermittlungsverhalten des Formulars zu verhindern und die Methode addData der Vue-Instanz aufzurufen. 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();
?>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

运行项目

现在，我们可以在服务器上运行这个项目。将上述前端文件和后端文件放在一个目录中，并在命令行中启动一个PHP服务器。

php -S localhost:8000

Nach dem Login kopieren

然后，在浏览器中访问http://localhost:8000

Als nächstes müssen wir PHP verwenden, um die vom Frontend übergebenen Daten zu verarbeiten und in der Datenbank zu speichern.

add_data.php

INSERT INTO

users

app.js

addData

add_data.php

http://localhost:8000

Das obige ist der detaillierte Inhalt vonSo verwenden Sie PHP und Vue, um die Funktion zum Hinzufügen von Daten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!