심층 학습: Vue3+Django4 풀 스택 개발 예제

심층 학습: Vue3+Django4 풀 스택 개발 예시

개요:
웹 애플리케이션의 급속한 발전과 함께 풀 스택 개발이 화제가 되었습니다. 널리 사용되는 프런트엔드 및 백엔드 프레임워크인 Vue 및 Django는 풀 스택 개발에 널리 사용됩니다. 이 기사에서는 풀 스택 개발을 위해 최신 버전의 Vue3 및 Django4를 사용하는 방법을 소개하고 실제 예제를 사용하여 강력한 기능과 유연한 확장성을 보여줍니다.

1. 환경 설정:
   먼저 Python, Node.js 및 Vue CLI가 올바르게 설치되었는지 확인해야 합니다. 다음 명령을 사용하여 설치할 수 있습니다.
2. Python 설치: https://www.python.org/downloads/
3. Node.js 설치: https://nodejs.org/
4. Vue CLI 설치: npm install - g @ vue/cli

5. Django 프로젝트 생성:
   먼저, 새로운 Django 프로젝트를 생성해야 합니다. 명령줄을 열고 다음 명령을 사용하여 프로젝트를 생성합니다.

   django-admin startproject myproject

6. Django 애플리케이션 생성:
   다음으로 Django 애플리케이션을 생성해야 합니다. 프로젝트 디렉터리를 입력하고 다음 명령을 사용하여 애플리케이션을 생성합니다:

   cd myproject
   python manage.py startapp myapp

7. Django 라우팅 구성:
   myproject/myproject/urls.py 파일에서 Django의 루트 경로와 myapp의 하위 경로를 구성합니다:

   from django.urls import path, include
   
   urlpatterns = [
    path('api/', include('myapp.urls')),
   ]

8. Create Django 보기:
   myapp/views.py 파일에서 Django의 보기 기능을 만듭니다.

   from django.shortcuts import render
   from django.http import JsonResponse
   
   def hello(request):
    return JsonResponse({'message': 'Hello, World!'})

9. Django 라우팅 구성:
   myapp/urls.py 파일에서 myapp의 라우팅을 구성합니다.

   from django.urls import path
   
   from . import views
   
   urlpatterns = [
    path('hello/', views.hello),
   ]

10. Django 서버 시작:
    다음 명령을 사용하여 Django 개발 서버를 시작하세요.

    python manage.py runserver

    http://localhost:8000/api/hello/를 방문하면 반환된 JSON 데이터를 볼 수 있습니다.

11. Vue 프로젝트 만들기:
    이제 새로운 Vue 프로젝트를 만들어야 합니다. 명령줄을 열고 다음 명령을 사용하여 프로젝트를 생성합니다.

    vue create myvueapp

    참고: 프로젝트를 생성할 때 기본 사전 설정 구성을 선택하거나 필요에 따라 구성하십시오.

12. Vue 개발 서버 프록시 구성:
    Vue 프로젝트의 루트 디렉터리에서 vue.config.js 파일을 찾고(그렇지 않은 경우 새 파일 만들기) 다음 구성을 추가합니다.

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

13. Vue 구성 요소 만들기:
    Vue 프로젝트의 src 디렉터리에서 App.vue 파일을 찾아 해당 내용을 다음 코드로 바꿉니다.

    <template>
      <div>
     <h1 id="message">{{ message }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       message: ""
     };
      },
      mounted() {
     this.fetchData();
      },
      methods: {
     fetchData() {
       fetch("/api/hello/")
         .then(response => response.json())
         .then(data => {
           this.message = data.message;
         })
         .catch(err => {
           console.log(err);
         });
     }
      }
    };
    </script>

14. Vue 개발 서버 시작:
    다음 명령을 사용하여 Vue를 시작합니다. 개발 서버:

    cd myvueapp
    npm run serve

    http://localhost :8080을 방문하면 Django API에서 얻은 데이터를 볼 수 있습니다.

이제 Vue3+Django4 풀스택 개발 예제를 성공적으로 완료했습니다. 이 예제를 통해 우리는 개발 환경을 설정하는 방법, Django 프로젝트와 Vue 프로젝트를 생성하는 방법, 라우팅을 구성하는 방법, 뷰와 컴포넌트를 생성하는 방법, AJAX를 통해 백엔드 API에서 데이터를 얻는 방법을 배웠습니다.

요약:
이 글의 학습을 통해 Vue3 및 Django4의 풀스택 개발에 대해 심도 있게 이해하고 실제 사례를 연습했습니다. 풀 스택 개발은 우리에게 더 큰 유연성과 효율성을 제공하여 프런트엔드와 백엔드 요구 사항을 동시에 처리할 수 있게 해줍니다. 이 예제를 통해 독자들이 Vue3+Django4 풀스택 개발에 대해 더 깊이 이해하고 이러한 지식과 기술을 실제 프로젝트에 적용할 수 있기를 바랍니다.

위 내용은 심층 학습: Vue3+Django4 풀 스택 개발 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!