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

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

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

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

3. 기술적 구현

1. 데이터베이스 설계
   먼저 사용자의 뇌 지도 데이터를 저장할 데이터베이스를 설계해야 합니다. mindmap이라는 데이터베이스를 만들고 그 안에 users와 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方法从后台获取脑图数据，并将其赋值给mindmapsusers테이블에는 다음 필드가 포함됩니다:

id: 사용자 ID

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

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

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

🎜🎜백엔드 개발🎜백엔드 인터페이스를 개발하기 위해 PHP를 사용합니다. 먼저 데이터베이스 연결을 설정해야 합니다. db.php라는 파일을 만들고 다음 코드를 입력하세요: 🎜rrreee

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

🎜프런트엔드 개발🎜프론트엔드 인터페이스를 구현하기 위해 Vue.js를 사용합니다. 먼저 Vue.js를 설치하고 App.vue라는 파일을 만들어야 합니다. 다음 코드를 입력하세요:

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

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