빠른 시작: Vue3+Django4 전체 스택 개발 시작 가이드

빠른 시작: Vue3+Django4 풀 스택 개발 시작 가이드

인터넷의 급속한 발전으로 풀 스택 개발은 최근 몇 년간 가장 뜨거운 기술 트렌드 중 하나가 되었습니다. 풀스택 개발에서는 프론트엔드 프레임워크와 백엔드 프레임워크를 결합하여 개발하는 일반적인 방식입니다. 이 글은 여러분을 Vue3+Django4 풀스택 개발의 세계로 안내하고 초보자를 위한 입문 가이드를 제공합니다.

Vue3은 최신 Vue.js 프레임워크 버전으로 더 높은 성능, 더 나은 개발 경험 및 더 많은 새로운 기능을 제공합니다. Django는 풍부한 기능과 확장성을 제공하는 고급 Python 웹 프레임워크입니다. 이들을 결합하면 강력하고 현대적인 웹 애플리케이션이 만들어집니다.

시작하기 전에 Node.js, Vue CLI 및 Python이 올바르게 설치되어 있는지 확인하세요. 설치가 완료되면 프로젝트 생성을 시작할 수 있습니다. 먼저 Vue CLI를 사용하여 Vue3 프로젝트를 생성하고 터미널을 열고 다음 명령을 실행합니다.

vue create myproject

생성 프로세스 중에 Vue3 사전 설정 사용 옵션을 선택하면 Vue가 포함된 미리 만들어진 구성이 제공됩니다. 라우터와 Vuex. 생성이 완료되면 프로젝트 디렉터리에 들어가 Vue 및 Django의 종속성 패키지를 설치합니다.

cd myproject
npm install vue@next
pip install Django

다음으로 다음 명령으로 생성된 Django 애플리케이션을 프로젝트에 생성해야 합니다.

django-admin startproject backend
cd backend
python manage.py startapp api

생성 후 완료되면 코드 작성을 시작할 수 있습니다. 먼저 Django의 settings.py 파일에 Vue의 정적 파일 경로를 추가하고 STATIC_URL을 찾아 그 아래에 다음 코드를 추가해야 합니다.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/dist'),
]

그런 다음 처리 및 Vue 프런트엔드 요청을 위한 새 urls.py 파일을 만듭니다. 이 파일은 api 디렉터리에 있습니다. 다음 코드를 작성합니다:

from django.urls import path
from . import views

urlpatterns = [
    path('api/', views.api),
]

다음으로 Vue 프런트 엔드의 요청을 처리하기 위해 views.py 파일에 논리 코드를 작성합니다. 다음 코드를 작성하세요.

from django.shortcuts import render
from django.http import JsonResponse

def api(request):
    data = {
        'message': 'Hello from Django API!'
    }
    return JsonResponse(data)

이 간단한 예에서는 간단한 메시지가 포함된 JSON 응답을 반환합니다. 실제 애플리케이션에서는 다양한 요청을 처리하기 위해 더 복잡한 논리를 작성할 수 있습니다.

다음으로 Vue를 사용하여 프런트엔드 코드를 작성해야 합니다. 프로젝트 디렉토리로 이동하여 Vue Router 및 Axios를 설치합니다:

cd frontend
npm install vue-router@next axios

그런 다음 src/router/index.js 파일을 열고 다음 코드를 추가합니다:

import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import API from '../views/API.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/api',
    name: 'API',
    component: API
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

이 예에서는 두 개의 경로를 정의합니다: '/' 해당 홈 구성요소 중 '/api'는 API 구성요소에 해당합니다. 그런 다음 src/views 디렉터리에 Home.vue 및 API.vue 구성 요소를 생성합니다. 여기서는 일부 텍스트 정보만 표시하면 됩니다.

이제 API.vue 구성 요소에서 요청을 보내 Django API에서 데이터를 가져올 수 있습니다. 다음 코드를 사용하여 원본 콘텐츠를 대체합니다.

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('/api/')
      .then(response => {
        this.message = response.data.message
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

이 예에서는 구성 요소의 마운트된 후크 함수에서 GET 요청을 보내고 Django API에서 반환된 데이터를 가져와 페이지에 데이터를 표시했습니다.

이제 Vue3 및 Django4를 사용하여 기본 풀스택 애플리케이션을 완성했습니다. 다음 명령을 실행하여 개발 서버를 시작할 수 있습니다:

cd ..
python manage.py runserver

그런 다음 브라우저에서 http://localhost:8000/을 열면 Django API 데이터가 포함된 페이지가 표시됩니다.

이 기사의 지침을 통해 Vue3+Django4 풀 스택 개발에 대한 입문 가이드를 완료했습니다. 초보자들에게 도움이 되길 바라며, 풀스택 개발 분야에 대해 더 많이 배우고 탐구해보시길 바랍니다. 어서 해봐요!

위 내용은 빠른 시작: Vue3+Django4 전체 스택 개발 시작 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!