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

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penambahan data

王林

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

asal

988 orang telah melayarinya

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>

Salin selepas log masuk

Dalam kod di atas, kami lulus v-model arahan mengikat nilai kotak input kepada atribut data dalam tika Vue Kandungan yang dimasukkan oleh pengguna dalam kotak input akan dikemas kini secara automatik kepada atribut data yang sepadan bagi tika Vue. Arahan @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();
?>

Salin selepas log masuk

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

Salin selepas log masuk

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

运行项目

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

php -S localhost:8000

Salin selepas log masuk

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

Seterusnya, kita perlu menggunakan PHP untuk memproses data yang diluluskan oleh bahagian hadapan dan menyimpannya dalam dalam pangkalan data.

add_data.php

INSERT INTO

users

app.js

addData

add_data.php

http://localhost:8000

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!