Home > Article > Backend Development > How to use PHP and Vue to implement data modification functions

How to use PHP and Vue to implement data modification functions

PHPzOriginal: 2023-09-25 11:37:451385browse

How to use PHP and Vue to implement data modification function

Foreword:
In modern web applications, data modification function is essential. PHP and Vue.js are two very popular technologies that can be used together to easily implement data modification functions. This article will introduce how to use PHP and Vue.js to implement data modification functions, and provide specific code examples.

1. Preparation
Before starting, you need to make sure that PHP and Vue.js have been installed, and a simple project directory has been created. In the project directory, create a PHP file named "data.php" to handle the addition, deletion, modification and query operations of data.

2. Create HTML template
First, we need to create an HTML template for displaying data and modifying data. In the template, we can use the two-way data binding feature of Vue.js to enable users to edit data in real time. Here is a simple HTML template example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>数据修改功能</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in dataList">
        <input v-model="item.name">
        <button @click="updateData(item)">保存</button>
      </li>
    </ul>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
</html>

In this template, we first use Vue's v-for directive to loop through the data list and add an input element to each data item. Then, we use the v-model directive to bind each input box to the name attribute of the data item. Finally, we added a click event for the save button, and when the user clicks save, the updateData method will be triggered.

3. Write PHP code
In the data.php file, we need to write some PHP code to handle the addition, deletion, modification and query operations of data. The following is a simple PHP example:

<?php
// 获取待修改的数据项
$data = $_POST['data'];

// 连接数据库，假设我们使用MySQL数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// 更新数据
foreach ($data as $item) {
  $name = $item['name'];
  $id = $item['id'];

  $sql = "UPDATE table_name SET name='$name' WHERE id=$id";

  if ($conn->query($sql) !== TRUE) {
    echo "Error updating record: " . $conn->error;
    break;
  }
}

// 断开数据库连接
$conn->close();

// 返回更新结果
echo "success";
?>

In this PHP code, we first obtain the data to be modified from the front end through the $_POST variable. We then connect to the database and use a loop to update the name attribute of each data item. Finally, we return the updated results to the front end.

4. Write Vue.js code
In the app.js file, we need to write some Vue.js code to handle the front-end logic. Here is a simple Vue.js example:

// 创建Vue实例
var app = new Vue({
  el: '#app',
  data: {
    dataList: []
  },
  mounted: function() {
    // 从后端获取数据
    axios.get('data.php')
      .then(response => {
        this.dataList = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    updateData: function(item) {
      // 向后端发送更新请求
      axios.post('data.php', { data: [item] })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

In this Vue.js code, we first use the axios library to get data from the backend and assign the data to dataList. Then, we define an updateData method to send update requests to the backend. In this method, we use the axios library to send a POST request and pass the data item to be modified as a parameter to the backend.

5. Run the project
After completing all the above steps, you can run the project. First, save the HTML template as a file called "index.html" and place it in the project directory. Next, save the PHP and Vue.js code as files named "data.php" and "app.js" respectively and place them in the project directory. Finally, run a web server (such as the PHP built-in server) in the project root directory and access the project in the browser.

6. Summary
Through the above steps, we have successfully implemented the data modification function using PHP and Vue.js. In this process, we first created an HTML template and implemented two-way data binding using Vue.js. Then, we used PHP to write an API for processing data, and used Vue.js to send requests for add, delete, modify, and query operations. Finally, after running the project, we can edit and save the data in real time in the browser.

I hope this article is helpful to you, and I wish you success in using PHP and Vue.js to implement data modification functions!

The above is the detailed content of How to use PHP and Vue to implement data modification functions. For more information, please follow other related articles on the PHP Chinese website!

php html for 循环 JS 事件 input 数据库 axios

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement PHP and Vue development of employee attendance functionNext article：How to implement PHP and Vue development of employee attendance function

See more

How to use PHP and Vue to implement data modification functions

Related articles