PHP와 Vue의 협력: 완벽한 두뇌 매핑 애플리케이션 구축-PHP 튜토리얼-php.cn

PHP와 Vue의 협력: 완벽한 두뇌 매핑 애플리케이션 구축

王林

풀어 주다： 2023-08-25 18:04:01

원래의

817명이 탐색했습니다.

PHP와 Vue의 협력: 완벽한 두뇌 매핑 애플리케이션 구축

PHP와 Vue의 협력: 완벽한 뇌 지도 기능 애플리케이션 구축

1. 소개
인터넷이 발달하면서 대부분의 사람들은 정보 획득 및 처리에 대한 요구가 점점 더 높아지고 있습니다. 두뇌 매핑 기능 애플리케이션은 이러한 요구를 충족하는 좋은 선택입니다. 이 기사에서는 PHP와 Vue의 협력을 사용하여 완벽한 마인드 매핑 애플리케이션을 구축하는 방법을 소개합니다.

2. 프로젝트 개요
백엔드 개발 언어로는 PHP를, 프런트엔드 개발 프레임워크로는 Vue.js를 사용하겠습니다. PHP는 데이터 저장 및 읽기를 처리하고 Vue.js는 마인드 맵 기능 렌더링 및 사용자와의 상호 작용을 담당합니다.

3. 기술적 구현

데이터베이스 설계
먼저 사용자의 뇌 지도 데이터를 저장할 데이터베이스를 설계해야 합니다. mindmap이라는 데이터베이스를 만들고 그 안에 users와 mindmaps라는 두 개의 테이블을 만들 수 있습니다.

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

users表将包含以下字段：

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

mindmaps表将包含以下字段：

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

后端开发
我们使用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获取用户的脑图数据，然后返回给前端。

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

<template>
  <div>
    <h1>{{ 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方法从后台获取脑图数据，并将其赋值给mindmapsusers테이블에는 다음 필드가 포함됩니다:

id: 사용자 ID

username: 사용자 이름password: 비밀번호

mindmaps테이블에는 다음 필드가 포함됩니다.

🎜id: 마인드 맵 ID🎜title: 마인드 맵 제목🎜 content: Brain Figure 콘텐츠🎜user_id: 사용자 ID

db.php

🎜다음으로 login.php라는 파일을 만듭니다. 사용된 파일 사용자 로그인 요청을 처리합니다. 다음 코드를 입력하세요: 🎜rrreee🎜이 코드는 프런트 엔드에서 보낸 로그인 요청을 수락하고 데이터베이스에서 사용자 이름과 비밀번호를 확인합니다. 인증에 성공하면 사용자 ID가 포함된 응답이 반환됩니다. 🎜🎜다음으로 사용자의 마인드맵 데이터를 얻기 위해 mindmaps.php라는 파일을 생성합니다. 다음 코드를 입력하세요: 🎜rrreee🎜이 코드는 사용자 ID를 기반으로 사용자의 뇌 지도 데이터를 얻은 다음 이를 프런트 엔드에 반환합니다. 🎜

App.vue

rrreee🎜이 코드는 제목과 마인드 맵 목록이 포함된 간단한 인터페이스를 렌더링합니다. fetchMindmaps 메서드를 호출하여 백그라운드에서 마인드맵 데이터를 가져와 mindmaps 배열에 할당합니다. 🎜🎜4. 요약🎜PHP와 Vue.js의 협력을 통해 완벽한 마인드 매핑 애플리케이션을 성공적으로 구축했습니다. PHP는 데이터 저장 및 읽기를 담당하고 Vue.js는 뇌 지도 기능을 제공하고 사용자와 상호 작용합니다. 이 애플리케이션은 사용자가 자신의 생각을 더 잘 관리 및 정리하고 작업 효율성을 향상시키는 데 도움이 될 수 있습니다. 🎜🎜위는 기본 예시이므로 필요에 따라 확장하고 최적화할 수 있습니다. 멋진 앱을 성공적으로 구축하시길 바랍니다! 🎜

위 내용은 PHP와 Vue의 협력: 완벽한 두뇌 매핑 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!