PHP와 Vue를 사용하여 데이터 추가 기능을 구현하는 방법-PHP 튜토리얼-php.cn

PHP와 Vue를 사용하여 데이터 추가 기능을 구현하는 방법

王林

풀어 주다： 2023-09-25 08:20:02

원래의

947명이 탐색했습니다.

PHP와 Vue를 사용하여 데이터 추가 기능을 구현하는 방법

웹 애플리케이션을 개발할 때 데이터 추가 기능은 매우 일반적이고 중요한 기능 포인트입니다. 이 기사에서는 PHP와 Vue.js를 사용하여 데이터 추가 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

프런트엔드 준비

먼저 프런트엔드에서 Vue.js를 사용하여 사용자 인터페이스를 구축해야 합니다. 페이지에서는 양식을 사용하여 사용자가 입력한 데이터를 수집하고 버튼을 통해 데이터를 제출할 수 있습니다.

먼저 HTML에 Vue.js 라이브러리를 소개하고 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>

로그인 후 복사

위 코드에서는 v-model 지시문을 사용하여 입력 상자의 값을 Vue 인스턴스 데이터 속성이 바인딩되어 있으며 사용자가 입력 상자에 입력한 내용은 Vue 인스턴스의 해당 데이터 속성으로 자동 업데이트됩니다. @submit.prevent 지시문은 양식의 기본 제출 동작을 방지하고 Vue 인스턴스의 addData 메소드를 호출하는 데 사용됩니다. 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文件，并将需要添加的数据作为请求体发送过去。成功回调函数中，我们打印出服务器端返回的响应数据，并清空输入框。