Coopération entre PHP et Vue : créez l'application de cartographie cérébrale parfaite

Coopération entre PHP et Vue : créer une application parfaite de fonction de carte cérébrale

1. Introduction
Avec le développement d'Internet, la plupart des gens ont des exigences de plus en plus élevées en matière d'acquisition et de traitement d'informations. Les applications de fonctions de cartographie cérébrale constituent un bon choix pour répondre à ce besoin. Cet article expliquera comment utiliser la coopération de PHP et Vue pour créer une application de cartographie mentale parfaite.

2. Présentation du projet
Nous utiliserons PHP comme langage de développement back-end et Vue.js comme framework de développement front-end. PHP se chargera du stockage et de la lecture des données, tandis que Vue.js sera responsable du rendu de la fonction de carte mentale et de l'interaction avec l'utilisateur.

3. Implémentation technique

1. Conception de base de données
   Tout d'abord, nous devons concevoir une base de données pour stocker les données de la carte cérébrale de l'utilisateur. Nous pouvons créer une base de données nommée mindmap et y créer deux tables : utilisateurs et mindmaps.

mindmap的数据库，并在其中创建两张表：users和mindmaps。

users表将包含以下字段：

• id：用户ID
• username：用户名
• password：密码

mindmaps表将包含以下字段：

• id：脑图ID
• title：脑图标题
• content：脑图内容
• user_id：用户ID

2. 后端开发
   我们使用PHP来开发后台接口。首先，我们需要设置数据库连接。创建一个名为db.php的文件，输入以下代码：

   <?php
   $servername = "localhost";
   $username = "your_username";
   $password = "your_password";
   $dbname = "mindmap";
   
   $conn = mysqli_connect($servername, $username, $password, $dbname);
   if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
   }
   ?>

接下来，我们创建一个名为login.php的文件，用于处理用户登录请求。输入以下代码：

<?php
include 'db.php';
$data = json_decode(file_get_contents('php://input'), true);
$username = $data['username'];
$password = $data['password'];

$sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    $response = [
        'success' => true,
        'user_id' => $row['id']
    ];
} else {
    $response = [
        'success' => false,
        'message' => 'Authentication failed'
    ];
}

echo json_encode($response);
?>

这段代码将接受前端发送的登录请求，并在数据库中验证用户名和密码。验证成功后，会返回包含该用户ID的响应。

接下来，我们创建一个名为mindmaps.php的文件，用于获取用户的脑图数据。输入以下代码：

<?php
include 'db.php';
$user_id = $_GET['user_id'];

$sql = "SELECT * FROM mindmaps WHERE user_id='$user_id'";
$result = mysqli_query($conn, $sql);

$response = [];
while ($row = mysqli_fetch_assoc($result)) {
    $response[] = $row;
}

echo json_encode($response);
?>

这段代码将根据用户ID获取用户的脑图数据，然后返回给前端。

3. 前端开发
   我们使用Vue.js来实现前端界面。首先，我们需要安装Vue.js，并创建一个名为App.vue的文件。输入以下代码：

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
    <ul>
      <li v-for="mindmap in mindmaps" :key="mindmap.id">
        {{ mindmap.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Welcome to MindMap App",
      mindmaps: [],
    };
  },
  mounted() {
    this.fetchMindmaps();
  },
  methods: {
    fetchMindmaps() {
      const user_id = 1; // replace with the actual user ID
      axios.get(`/mindmaps.php?user_id=${user_id}`).then((response) => {
        this.mindmaps = response.data;
      });
    },
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

这段代码将呈现一个简单的界面，包含一个标题和一个脑图列表。它通过调用fetchMindmaps方法从后台获取脑图数据，并将其赋值给mindmapsusersLe tableau contiendra les champs suivants :

id : identifiant d'utilisateur

username : nom d'utilisateurmot de passe : mot de passe

mindmapsLe tableau contiendra les champs suivants :

🎜id : ID de la carte mentale🎜titre : Titre de la carte mentale🎜 contenu : Contenu de Brain Figure🎜user_id : ID utilisateur

🎜🎜Développement backend🎜Nous utilisons PHP pour développer l'interface backend. Tout d’abord, nous devons configurer la connexion à la base de données. Créez un fichier nommé db.php et entrez le code suivant : 🎜rrreee

🎜Ensuite, nous créons un fichier nommé login.php Fichier utilisé pour gérer les demandes de connexion des utilisateurs. Entrez le code suivant : 🎜rrreee🎜Ce code acceptera la demande de connexion envoyée par le front-end et vérifiera le nom d'utilisateur et le mot de passe dans la base de données. Après une vérification réussie, une réponse contenant l'ID utilisateur sera renvoyée. 🎜🎜Ensuite, nous créons un fichier nommé mindmaps.php pour obtenir les données de la carte mentale de l'utilisateur. Entrez le code suivant : 🎜rrreee🎜Ce code obtiendra les données de la carte cérébrale de l'utilisateur en fonction de l'ID utilisateur, puis les renverra au front-end. 🎜

🎜Développement front-end🎜Nous utilisons Vue.js pour implémenter l'interface front-end. Tout d'abord, nous devons installer Vue.js et créer un fichier appelé App.vue. Entrez le code suivant :

rrreee🎜Ce code affichera une interface simple avec un titre et une liste de cartes mentales. Il obtient les données de la carte mentale en arrière-plan en appelant la méthode fetchMindmaps et les affecte au tableau mindmaps. 🎜🎜4. Résumé🎜Grâce à la coopération de PHP et Vue.js, nous avons réussi à créer une application de cartographie mentale parfaite. PHP est responsable de la gestion du stockage et de la lecture des données, tandis que Vue.js est responsable de la présentation de la fonction de carte cérébrale et de l'interaction avec les utilisateurs. Cette application peut aider les utilisateurs à mieux gérer et organiser leur réflexion et à améliorer l'efficacité du travail. 🎜🎜Ce qui précède est un exemple basique, vous pouvez l'étendre et l'optimiser en fonction de vos besoins. Je vous souhaite du succès dans la création d'applications géniales ! 🎜

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!