풀스택 애플리케이션 구축: Vue3+Django4 실제 사례

풀스택 애플리케이션 구축: Vue3+Django4 실제 사례

소개:
모바일 인터넷의 발전과 함께 풀스택 개발이 점점 더 주목을 받고 있습니다. 풀스택 개발 엔지니어는 프론트엔드와 백엔드 개발을 독립적으로 완료하여 개발 효율성을 높일 수 있습니다. 이번 글에서는 최신 Vue3와 Django4를 활용하여 풀스택 애플리케이션을 구축하는 방법을 소개하고 실제 사례를 제시하겠습니다.

1. Vue3 프레임워크 소개
Vue3은 현재 가장 널리 사용되는 프런트엔드 프레임워크 중 하나입니다. 이는 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들기 위해 "결합된 API"라는 새로운 API 스타일을 채택합니다. Vue3에는 Teleport, Suspense, Fragment 등과 같은 몇 가지 새로운 기능도 도입되어 개발 경험이 더욱 풍부해졌습니다.

Vue3 애플리케이션을 작성하기 전에 먼저 Vue3 개발 환경을 설치하고 구성해야 합니다. npm 또는 Yarn을 사용하여 Vue3을 설치할 수 있습니다.

$ npm install -g @vue/cli

2. Django 프레임워크 소개
Django는 효율적이고 유연하며 안전한 Python 웹 개발 프레임워크입니다. 이는 웹 요청 처리, 데이터베이스 액세스, 양식 처리를 위한 완전한 프로세스 세트를 제공합니다. 등의 구성 요소입니다. Django를 사용하면 복잡한 웹 애플리케이션을 쉽게 구축할 수 있습니다.

최신 Django4를 사용하기 위해서는 먼저 Python과 Django를 설치해야 합니다. pip 명령을 사용하여 Django를 설치할 수 있습니다:

$ pip install Django

3. 풀 스택 애플리케이션 구축
이제 풀 스택 애플리케이션을 구축할 준비가 되었습니다. 간단한 작업 관리 애플리케이션을 구축하기 위해 Vue3를 프런트엔드 프레임워크로, Django를 백엔드 프레임워크로 사용하겠습니다.

1. Create Django Project
   먼저 Django 프로젝트를 생성해야 합니다. 명령줄 창을 열고 다음 명령을 실행합니다.

$ django-admin startproject task_manager

이 명령은 현재 디렉터리에 task_manager라는 Django 프로젝트를 생성합니다.

2. Create Django App
   다음으로 Django 프로젝트에서 앱을 생성해야 합니다. 명령줄에서 다음 명령을 실행하세요:

$ cd task_manager
$ python manage.py startapp tasks

이 명령은 Django 프로젝트에 task라는 애플리케이션을 생성합니다.

3. 데이터베이스 모델 정의
   Django 프로젝트에서는 작업 데이터를 저장할 데이터베이스 모델을 정의해야 합니다. task/models.py 파일을 열고 다음 코드를 추가하세요.

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

이렇게 하면 작업의 제목, 설명, 생성 시간이 포함된 Task라는 모델이 정의됩니다.

4. API 뷰 생성
   다음으로 API 요청을 처리하기 위한 뷰 함수를 생성해야 합니다. tasks/views.py 파일을 열고 다음 코드를 추가하세요.

from rest_framework.decorators import api_view
from rest_framework.response import Response

from .models import Task
from .serializers import TaskSerializer

@api_view(['GET', 'POST'])
def task_list(request):
    if request.method == 'GET':
        tasks = Task.objects.all()
        serializer = TaskSerializer(tasks, many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = TaskSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=201)
        return Response(serializer.errors, status=400)

이것은 GET 및 POST 요청을 처리하기 위한 task_list라는 보기 함수를 정의합니다. GET 요청은 모든 작업 목록을 반환하는 반면 POST 요청은 새 작업을 생성하는 데 사용됩니다.

5. Create API serializer
   Django 프로젝트에서는 데이터를 직렬화 및 역직렬화하기 위한 직렬화기를 생성해야 합니다. Serializer는 데이터베이스 모델을 JSON 형식의 데이터로 변환하고, JSON 데이터를 데이터베이스 모델로 변환하는 역할을 담당합니다. 작업 디렉터리에 serializers.py라는 파일을 만들고 다음 코드를 추가합니다.

from rest_framework import serializers

from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'created_at']

이 작업은 작업 모델을 직렬화 및 역직렬화하기 위해 TaskSerializer라는 직렬 변환기를 정의합니다.

6. URL 라우팅 구성
   마지막으로 API 보기를 특정 URL에 매핑하도록 URL 라우팅을 구성해야 합니다. task_manager/urls.py 파일을 열고 다음 코드를 추가합니다:

from django.urls import path

from tasks.views import task_list

urlpatterns = [
    path('api/tasks/', task_list, name='task-list'),
]

그러면 task_list 보기 함수를 /api/tasks/ 경로에 매핑하는 task-list라는 URL 경로가 구성됩니다.

4. Vue3 애플리케이션 구축
백엔드 구축이 완료되었으므로 이제 Vue3를 사용하여 프런트엔드 페이지를 구축하겠습니다.

1. Create Vue3 프로젝트
   먼저 Vue3 프로젝트를 생성해야 합니다. 명령줄에서 다음 명령을 실행하세요:

$ vue create task-manager

이 명령은 task-manager라는 Vue3 프로젝트를 생성합니다.

2. 종속 모듈 설치
   프로젝트를 생성한 후 일부 종속 모듈을 설치해야 합니다. 명령줄에서 다음 명령을 실행하세요.

$ cd task-manager
$ npm install axios

axios는 비동기 요청을 보내는 강력한 HTTP 클라이언트입니다. 우리는 Django 백엔드와 통신하기 위해 Axios를 사용할 것입니다.

3. Vue 구성 요소 작성
   그런 다음 작업 목록을 표시하고 새 작업을 위한 인터페이스를 생성하기 위해 일부 Vue 구성 요소를 작성해야 합니다. src/comComponents 디렉터리에서 TaskList.vue 파일을 열고 다음 코드를 추가합니다.

<template>
  <div>
    <h1>Task List</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: []
    }
  },
  mounted() {
    this.fetchTasks()
  },
  methods: {
    async fetchTasks() {
      const response = await this.$http.get('/api/tasks/')
      this.tasks = response.data
    }
  }
}
</script>

이 작업 목록을 표시하기 위해 TaskList라는 Vue 구성 요소를 정의합니다.

그런 다음 CreateTask.vue라는 파일을 만들고 다음 코드를 추가합니다.

<template>
  <div>
    <h1>Create Task</h1>
    <input type="text" v-model="title" placeholder="Title">
    <input type="text" v-model="description" placeholder="Description">
    <button @click="createTask">Create</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      description: ''
    }
  },
  methods: {
    async createTask() {
      const data = {
        title: this.title,
        description: this.description
      }
      await this.$http.post('/api/tasks/', data)
      this.title = ''
      this.description = ''
      this.$emit('task-created')
    }
  }
}
</script>

이것은 새 작업을 생성하기 위한 CreateTask라는 Vue 구성 요소를 정의합니다.

4. App 구성 요소 수정
   마지막으로 App.vue 구성 요소를 수정하고 TaskList 및 CreateTask 구성 요소를 페이지에 추가해야 합니다. src/App.vue 파일을 열고 다음 코드를 수정합니다.

<template>
  <div>
    <task-list @task-created="fetchTasks" />
    <create-task @task-created="fetchTasks" />
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue'
import CreateTask from './components/CreateTask.vue'

export default {
  components: {
    TaskList,
    CreateTask
  },
  methods: {
    fetchTasks() {
      this.$refs.taskList.fetchTasks()
    }
  }
}
</script>

이렇게 하면 TaskList 및 CreateTask 구성 요소가 앱 페이지에 정상적으로 표시되고 작업이 생성될 때 fetchTasks 메서드가 트리거됩니다.

5. 애플리케이션 실행
이제 프런트엔드 및 백엔드 개발 작업이 완료되었으며 테스트용 애플리케이션을 실행할 수 있습니다.

1. 启动Django后端
   在命令行中运行以下命令，启动Django后端服务器：

$ cd task_manager
$ python manage.py runserver

2. 启动Vue3前端
   在一个新的命令行窗口中运行以下命令，启动Vue3前端服务器：

$ cd task-manager
$ npm run serve

3. 测试应用
   现在，打开浏览器，访问http://localhost:8080，就可以看到应用的界面了。在任务列表中，可以看到已经创建的任务，点击“Create Task”按钮，可以创建新的任务。

结束语：
通过本文的介绍，我们了解了如何使用Vue3和Django4构建全栈应用的基本步骤。通过实战案例，我们学习了如何在Vue3中发送请求，并在Django中处理请求数据。希望本文对您的全栈开发学习之路有所帮助。

위 내용은 풀스택 애플리케이션 구축: Vue3+Django4 실제 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!