Comment utiliser PHP et Vue pour implémenter des fonctions d'édition de données-tutoriel php-php.cn

Comment utiliser PHP et Vue pour implémenter des fonctions d'édition de données

WBOY

Libérer： 2023-09-24 12:38:01

original

1332 Les gens l'ont consulté

Comment utiliser PHP et Vue pour implémenter des fonctions dédition de données

Comment utiliser PHP et Vue pour implémenter des fonctions d'édition de données

Avec le développement d'applications Web, les fonctions d'édition de données sont devenues une exigence de base pour de nombreuses applications. Dans cet article, nous présenterons comment utiliser PHP et Vue pour implémenter des fonctions d'édition de données et fournirons des exemples de code spécifiques.

1. Préparation
Avant de commencer, nous devons installer PHP et Vue.js et comprendre leurs concepts de base et leur utilisation.

Installer PHP
PHP est un langage de script côté serveur très populaire qui peut être utilisé pour gérer les requêtes et les réponses Web. Vous pouvez télécharger et installer PHP depuis le site officiel (https://www.php.net/).
Installer Vue.js
Vue.js est un framework JavaScript permettant de créer des interfaces utilisateur. Vous pouvez télécharger Vue.js depuis le site officiel (https://vuejs.org/) et l'introduire dans votre page HTML.

2. Créer une base de données et une table
Avant de commencer à écrire du code, nous devons créer une base de données et une table pour stocker nos données. En prenant MySQL comme exemple, vous pouvez utiliser le code suivant pour créer une base de données nommée « utilisateurs » et une table nommée « étudiants » :

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

Copier après la connexion

3. Écrivez du code PHP
Tout d'abord, nous devons écrire un fichier PHP pour traiter la logique du terminal . Nous allons créer un fichier nommé "edit.php" et y écrire le code suivant :

<?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();
?>

Copier après la connexion

Le code ci-dessus implémente les fonctions de connexion à la base de données, de mise à jour des données et de renvoi des résultats.

4. Écrire le code Vue
Ensuite, nous devons écrire un composant Vue pour gérer l'interaction frontale. Nous allons créer un fichier appelé "EditForm.vue" et y écrire le code suivant :

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

Copier après la connexion

Le code ci-dessus implémente un formulaire dans lequel l'utilisateur peut saisir des données et envoyer les données à la poste en cliquant sur le bouton "Mettre à jour" du terminal pour mise à jour.

5. Intégrer le code
Enfin, nous devons intégrer le code PHP et Vue dans une page HTML. Nous allons créer un fichier appelé "edit.html" et y écrire le code suivant :

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

Copier après la connexion

Le code ci-dessus introduit le composant Vue dans la page HTML et crée une instance Vue.

6. Code de test
Maintenant, vous pouvez ouvrir le fichier "edit.html" dans le navigateur et essayer de modifier les données. Lorsque vous cliquez sur le bouton "Mettre à jour", les données seront envoyées au backend pour être mises à jour et les résultats seront affichés dans la console.

Résumé
Dans cet article, nous avons présenté comment utiliser PHP et Vue pour implémenter des fonctions d'édition de données et fourni des exemples de code spécifiques. En apprenant et en comprenant ces codes, vous pouvez rapidement démarrer et les appliquer à vos propres projets. J'espère que cet article pourra vous être utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!