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

How to use PHP and Vue to implement data editing functions

WBOYOriginal: 2023-09-24 12:01:021304browse

With the development of web applications, data editing functions have become a basic requirement for many applications. In this article, we will introduce how to use PHP and Vue to implement data editing functions, and provide specific code examples.

1. Preparation
Before we start, we need to install PHP and Vue.js and understand their basic concepts and usage.

Install PHP
PHP is a very popular server-side scripting language that can be used to handle web requests and responses. You can download and install PHP from the official website (https://www.php.net/).
Install Vue.js
Vue.js is a JavaScript framework for building user interfaces. You can download Vue.js from the official website (https://vuejs.org/) and introduce it into your HTML page.

2. Create database and table
Before we start writing code, we need to create a database and a table to store our data. Taking MySQL as an example, you can use the following code to create a database named "users" and a table named "students":

CREATE DATABASE users;
USE users;
CREATE TABLE students (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50),
    age INT,
    email VARCHAR(50)
);

3. Write PHP code
First, we need to write A PHP file to handle the backend logic. We will create a file named "edit.php" and write the following code in it:

<?php
// 连接到数据库
$mysqli = new mysqli('localhost', 'root', 'password', 'users');

// 检查连接是否成功
if($mysqli->connect_errno) {
    die('连接数据库失败：' . $mysqli->connect_error);
}

// 获取POST数据
$id = $_POST['id'];
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];

// 更新数据
$query = "UPDATE students SET name='$name', age='$age', email='$email' WHERE id='$id'";
$result = $mysqli->query($query);

// 返回结果
if($result) {
    echo '数据更新成功';
} else {
    echo '数据更新失败';
}

// 关闭数据库连接
$mysqli->close();
?>

The above code implements the functions of connecting to the database, updating data and returning results.

4. Write Vue code
Next, we need to write a Vue component to handle front-end interaction. We will create a file named "EditForm.vue" and write the following code in it:

<template>
  <div>
    <input v-model="name" type="text" placeholder="姓名">
    <input v-model="age" type="text" placeholder="年龄">
    <input v-model="email" type="text" placeholder="邮箱">
    <button @click="editData">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',      // 数据的ID
      name: '',    // 姓名
      age: '',     // 年龄
      email: ''    // 邮箱
    }
  },
  methods: {
    editData() {
      // 发送请求
      axios.post('/edit.php', {
        id: this.id,
        name: this.name,
        age: this.age,
        email: this.email
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      })
    }
  }
}
</script>

The above code implements a form in which the user can enter data and update it by clicking the "Update" button The data is sent to the backend for updates.

5. Integrate code
Finally, we need to integrate the PHP and Vue code in an HTML page. We will create a file named "edit.html" and write the following code in it:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>数据编辑</title>
</head>
<body>
  <div id="app">
    <edit-form></edit-form>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="EditForm.vue"></script>
  
  <script>
    new Vue({
      el: '#app',
      components: { EditForm }
    })
  </script>
</body>
</html>

The above code introduces the Vue component into the HTML page and creates a Vue instance.

6. Test Code
Now, you can open the "edit.html" file in the browser and try to edit the data. When you click the "Update" button, the data will be sent to the backend for update and the results will be displayed in the console.

Summary
In this article, we introduced how to use PHP and Vue to implement data editing functions, and provided specific code examples. By learning and understanding these codes, you can quickly get started and apply them to your own projects. Hope this article can be helpful to you!

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

php JavaScript mysql html JS 数据库 https

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 use PHP and Vue to develop an online employee attendance data export interfaceNext article：How to use PHP and Vue to develop an online employee attendance data export interface

See more

How to use PHP and Vue to implement data editing functions

Related articles