빠른 시작: Vue3+Django4 전체 스택 개발 시작 가이드-View.js-php.cn

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

PHPz

풀어 주다： 2023-09-08 09:38:04

원래의

1065명이 탐색했습니다.

빠른 시작: 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>{{ 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를 사용하여 기본 풀스택 애플리케이션을 완성했습니다. 다음 명령을 실행하여 개발 서버를 시작할 수 있습니다: