기술적 세부사항: Vue3+Django4 신규 프로젝트 구축

자세한 기술 설명: Vue3+Django4 신규 프로젝트 구축

소개:
요즘 프론트엔드와 백엔드 분리 개발 모델은 기업 개발에 필수적인 기술이 되었습니다. Vue와 Django는 매우 인기 있는 프런트엔드 및 백엔드 프레임워크입니다. 이들의 조합은 개발 효율성과 코드 품질을 크게 향상시킬 수 있습니다. 이 글에서는 Vue3를 프론트엔드 프레임워크로, Django4를 백엔드 프레임워크로 사용하여 새 프로젝트를 빌드하는 방법을 자세히 소개하고 독자에게 코드 예제와 자세한 기술 설명을 제공합니다.

1. 환경 설정

1. 프런트엔드 환경 설정
   먼저 Node.js 환경이 설치되어 있는지 확인하세요. 그런 다음 다음 명령을 사용하여 Vue CLI 4.x를 설치합니다.

npm install -g @vue/cli

다음 명령을 사용하여 새 Vue3 프로젝트를 만듭니다.

vue create project-name

프로젝트 초기화 프로세스 중에 Vue3을 버전으로 선택해야 합니다. 초기화가 완료되면 프로젝트 디렉토리에 들어가서 다음 명령을 사용하여 프로젝트를 실행합니다.

cd project-name
npm run serve

2. 백엔드 환경 설정
   먼저 Python 3.9 환경을 설치했는지 확인합니다. Django 4.x를 설치하려면 다음 명령을 사용하세요.

pip install Django

새 Django 프로젝트 만들기:

django-admin startproject project-name

프로젝트 디렉터리를 입력하고 다음 명령을 사용하여 프로젝트를 실행합니다.

cd project-name
python manage.py runserver

2. 프런트엔드 및 백엔드 조인트 디버깅

1. Front-end 구성
   Vue3 프로젝트의 루트 디렉터리에서 vue.config .js 파일을 찾고, 없으면 수동으로 생성하세요. 파일에 다음 코드를 추가합니다.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // 后端地址
        ws: true,
        changeOrigin: true
      }
    }
  }
}

이 코드는 API 요청을 프런트 엔드에서 백엔드 주소로 전달하도록 프록시 서버를 구성합니다.

2. 백엔드 구성
   Django 프로젝트의 루트 디렉터리에서 settings.py 파일을 찾아 ALLOWED_HOSTS 및 INSTALLED_APPS를 다음과 같이 수정합니다.

ALLOWED_HOSTS = ['localhost', '127.0.0.1']

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

그런 다음 settings.py 파일 끝에 다음 코드를 추가합니다.

CORS_ALLOW_ALL_ORIGINS = True

이 코드는 도메인 간 요청을 허용하도록 구성되었습니다.

3. 프론트엔드와 백엔드 상호작용

1. 프런트엔드 요청
   Vue3 프로젝트에서는 axios 라이브러리를 사용하여 API 요청이 이루어집니다. 먼저 다음 명령을 사용하여 axios를 설치합니다.

npm install axios

그런 다음 API를 호출해야 하는 구성 요소에서 axios를 도입하고 요청을 보냅니다.

import axios from 'axios'

axios.get('/api/example')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

2. Backend response
   Django에서는 Django Rest Framework(DRF)를 사용하여 API를 구축합니다. 먼저 다음 명령을 사용하여 DRF를 설치합니다.

pip install djangorestframework

그런 다음 Django 앱 디렉터리에 serializers.py라는 새 파일을 만들고 다음 코드를 작성합니다.

from rest_framework import serializers

class ExampleSerializer(serializers.Serializer):
    id = serializers.IntegerField()
    name = serializers.CharField(max_length=100)

다음으로 views.py라는 새 파일을 만들고 The 다음 코드:

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

@api_view(['GET'])
def example(request):
    data = [
        {'id': 1, 'name': 'example1'},
        {'id': 2, 'name': 'example2'},
    ]
    serializer = ExampleSerializer(data, many=True)
    return Response(serializer.data)

마지막으로 Django 프로젝트 디렉터리에서 urls.py 파일을 찾아 다음 코드를 추가합니다.

from django.urls import path
from . import views

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

이렇게 하면 프런트 엔드가 /api/example에 GET 요청을 보내면 백엔드가 샘플 데이터를 반환합니다.

결론:
이 기사의 자세한 설명을 통해 독자는 Vue3을 프런트엔드 프레임워크로 사용하고 Django4를 백엔드 프레임워크로 사용하여 새 프로젝트를 빌드하는 방법을 이해할 것입니다. 환경 설정, 프런트엔드 및 백엔드 조인트 디버깅, 프런트엔드 및 백엔드 상호 작용 프로세스를 설명하고 해당 코드 예제를 제공했습니다. 독자들이 이 글을 통해 Vue와 Django의 기본적인 사용법을 익히고 실제 프로젝트에 적용할 수 있기를 바랍니다.

위 내용은 기술적 세부사항: Vue3+Django4 신규 프로젝트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!