Kerjasama antara PHP dan Vue: Bina aplikasi pemetaan otak yang sempurna

Kerjasama antara PHP dan Vue: Membina Aplikasi Fungsi Peta Otak Yang Sempurna

1. Pengenalan
Dengan perkembangan Internet, kebanyakan orang mempunyai permintaan yang lebih tinggi dan lebih tinggi untuk pemerolehan dan pemprosesan maklumat. Aplikasi fungsi pemetaan otak adalah pilihan yang baik untuk memenuhi keperluan ini. Artikel ini akan memperkenalkan cara menggunakan kerjasama PHP dan Vue untuk membina aplikasi pemetaan minda yang sempurna.

2. Gambaran Keseluruhan Projek
Kami akan menggunakan PHP sebagai bahasa pembangunan bahagian belakang dan Vue.js sebagai rangka kerja pembangunan bahagian hadapan. PHP akan mengendalikan penyimpanan dan pembacaan data, manakala Vue.js akan bertanggungjawab untuk memberikan fungsi peta minda dan berinteraksi dengan pengguna.

3. Pelaksanaan Teknikal

1. Reka Bentuk Pangkalan Data
   Pertama, kita perlu mereka bentuk pangkalan data untuk menyimpan data peta otak pengguna. Kita boleh mencipta pangkalan data bernama mindmap dan mencipta dua jadual di dalamnya: users dan 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方法从后台获取脑图数据，并将其赋值给mindmapspenggunaJadual akan mengandungi medan berikut:

id: ID pengguna

nama pengguna: nama penggunakata laluan: kata laluan

peta mindaJadual akan mengandungi medan berikut:

🎜id: ID peta minda🎜tajuk: Tajuk peta minda🎜 kandungan: kandungan Brain Figure🎜user_id: user ID

🎜🎜Backend development🎜Kami menggunakan PHP untuk membangunkan antara muka belakang. Pertama, kita perlu menyediakan sambungan pangkalan data. Cipta fail bernama db.php dan masukkan kod berikut: 🎜rrreee

🎜Seterusnya, kami mencipta fail bernama login.php Fail yang digunakan untuk mengendalikan permintaan log masuk pengguna. Masukkan kod berikut: 🎜rrreee🎜Kod ini akan menerima permintaan log masuk yang dihantar oleh bahagian hadapan dan mengesahkan nama pengguna dan kata laluan dalam pangkalan data. Selepas pengesahan berjaya, respons yang mengandungi ID pengguna akan dikembalikan. 🎜🎜Seterusnya, kami mencipta fail bernama mindmaps.php untuk mendapatkan data peta minda pengguna. Masukkan kod berikut: 🎜rrreee🎜Kod ini akan memperoleh data peta otak pengguna berdasarkan ID pengguna dan kemudian mengembalikannya ke bahagian hadapan. 🎜

🎜Pembangunan bahagian hadapan🎜Kami menggunakan Vue.js untuk melaksanakan antara muka bahagian hadapan. Mula-mula, kita perlu memasang Vue.js dan mencipta fail yang dipanggil App.vue. Masukkan kod berikut:

rrreee🎜Kod ini akan memaparkan antara muka ringkas dengan tajuk dan senarai peta minda. Ia memperoleh data peta minda daripada latar belakang dengan memanggil kaedah fetchMindmaps dan memberikannya kepada tatasusunan mindmaps. 🎜🎜4. Ringkasan🎜Melalui kerjasama PHP dan Vue.js, kami berjaya membina aplikasi pemetaan minda yang sempurna. PHP bertanggungjawab untuk mengendalikan penyimpanan dan pembacaan data, manakala Vue.js bertanggungjawab untuk mempersembahkan fungsi peta otak dan berinteraksi dengan pengguna. Aplikasi ini boleh membantu pengguna mengurus dan mengatur pemikiran mereka dengan lebih baik dan meningkatkan kecekapan kerja. 🎜🎜Di atas adalah contoh asas, anda boleh memanjangkan dan mengoptimumkannya mengikut keperluan anda. Saya doakan anda berjaya membina apl yang hebat! 🎜

Atas ialah kandungan terperinci Kerjasama antara PHP dan Vue: Bina aplikasi pemetaan otak yang sempurna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!