자세한 기술 설명: Vue3+Django4 신규 프로젝트 구축
소개:
요즘 프론트엔드와 백엔드 분리 개발 모델은 기업 개발에 필수적인 기술이 되었습니다. Vue와 Django는 매우 인기 있는 프런트엔드 및 백엔드 프레임워크입니다. 이들의 조합은 개발 효율성과 코드 품질을 크게 향상시킬 수 있습니다. 이 글에서는 Vue3를 프론트엔드 프레임워크로, Django4를 백엔드 프레임워크로 사용하여 새 프로젝트를 빌드하는 방법을 자세히 소개하고 독자에게 코드 예제와 자세한 기술 설명을 제공합니다.
1. 환경 설정
npm install -g @vue/cli
다음 명령을 사용하여 새 Vue3 프로젝트를 만듭니다.
vue create project-name
프로젝트 초기화 프로세스 중에 Vue3을 버전으로 선택해야 합니다. 초기화가 완료되면 프로젝트 디렉토리에 들어가서 다음 명령을 사용하여 프로젝트를 실행합니다.
cd project-name npm run serve
pip install Django
새 Django 프로젝트 만들기:
django-admin startproject project-name
프로젝트 디렉터리를 입력하고 다음 명령을 사용하여 프로젝트를 실행합니다.
cd project-name python manage.py runserver
2. 프런트엔드 및 백엔드 조인트 디버깅
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8000', // 后端地址 ws: true, changeOrigin: true } } } }
이 코드는 API 요청을 프런트 엔드에서 백엔드 주소로 전달하도록 프록시 서버를 구성합니다.
ALLOWED_HOSTS = ['localhost', '127.0.0.1'] INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ... ]
그런 다음 settings.py 파일 끝에 다음 코드를 추가합니다.
CORS_ALLOW_ALL_ORIGINS = True
이 코드는 도메인 간 요청을 허용하도록 구성되었습니다.
3. 프론트엔드와 백엔드 상호작용
npm install axios
그런 다음 API를 호출해야 하는 구성 요소에서 axios를 도입하고 요청을 보냅니다.
import axios from 'axios' axios.get('/api/example') .then(response => { console.log(response.data) }) .catch(error => { console.error(error) })
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!