연습을 위한 기본 사항: Vue3+Django4 풀 스택 개발 시작하기

실습 기본 사항: Vue3+Django4 풀 스택 개발 소개

개요:
풀 스택 개발은 개발자가 프런트엔드와 백엔드 작업을 동시에 처리할 수 있다는 의미입니다. 현대 웹 개발에서는 더 일반적이며 중요합니다. 이 기사에서는 전체 스택 개발을 위해 Vue3 및 Django4를 사용하는 방법을 소개하고 독자가 시작하는 데 도움이 되는 몇 가지 코드 예제를 제공합니다.

1. Vue3 설치 및 구성
   먼저 Vue 프로젝트를 생성하고 관리하려면 Vue CLI를 설치해야 합니다. 명령줄에서 다음 명령을 실행하여 Vue CLI를 설치하세요.

   npm install -g @vue/cli

   설치가 완료된 후 다음 명령을 사용하여 새 Vue 프로젝트를 생성하세요.

   vue create my-project

   프롬프트에 따라 선택하고 기본 옵션을 선택하세요.

2. Vue 구성 요소 만들기
   Vue 프로젝트에서는 구성 요소를 사용하여 사용자 인터페이스를 구축할 수 있습니다. Vue 프로젝트의 src 디렉터리에 "comComponents"라는 폴더와 그 안에 "HelloWorld.vue"라는 파일을 만듭니다. 이 파일에서 구성 요소 코드를 작성할 수 있습니다. 예:

   <template>
     <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      message: 'Hello World!'
    }
     },
     methods: {
    changeMessage() {
      this.message = 'New Message!'
    }
     }
   }
   </script>

   이는 제목과 버튼을 클릭할 때 제목의 내용을 변경하는 버튼이 포함된 간단한 구성 요소입니다.

3. Django4 구성
   다음으로 Django를 설치하고 새 Django 프로젝트를 생성해야 합니다. Django를 설치하려면 명령줄에서 다음 명령을 실행하세요.

   pip install django==4.0.0

   설치가 완료되면 다음 명령을 사용하여 새 Django 프로젝트를 만듭니다.

   django-admin startproject myproject

   이렇게 하면 현재 디렉터리에 "myproject"라는 이름의 새 Django 프로젝트가 생성됩니다.

4. Django 뷰 및 URL 만들기
   Django 프로젝트의 루트 디렉터리에서 settings.py 파일을 열고 INSTALLED_APPS 설정에 다음 콘텐츠를 추가하세요.

   INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',  // myapp是我们将要创建的应用的名称，根据需要修改
    ...
   ]

   그런 다음 설정 끝에 다음 콘텐츠를 추가하세요. .py 파일:

   REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
   }

   이것은 API를 생성하기 위해 REST 프레임워크를 사용하도록 Django를 구성합니다.

다음으로 Django 프로젝트의 루트 디렉터리에 "myapp"이라는 애플리케이션을 만듭니다.

python manage.py startapp myapp

myapp 디렉터리에서 views.py 파일을 열고 다음 콘텐츠를 추가합니다.

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

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello World!'})

이것은 간단한 view 함수는 URL에 액세스하면 "Hello World!"가 포함된 JSON 응답을 반환합니다.

다음으로, myproject 디렉터리에서 urls.py 파일을 열고 다음 콘텐츠를 추가하세요.

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path('api/hello/', hello_world),
]

이렇게 하면 보기 기능이 URL 경로 '/api/hello/'와 연결됩니다.

5. 프로젝트 실행
   이제 Vue와 Django의 기본 구성이 완료되었습니다. 다음으로 Vue 애플리케이션과 Django 프로젝트를 연결해야 합니다.

Vue 프로젝트의 루트 디렉터리에서 "main.js" 파일을 열고 다음 콘텐츠를 추가합니다.

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

이렇게 하면 axios를 HTTP 클라이언트로 사용하도록 Vue 애플리케이션이 전역적으로 구성됩니다.

Vue 프로젝트의 루트 디렉터리에서 "App.vue" 파일을 열고 다음 콘텐츠를 추가하세요.

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getMessage">Get Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage() {
      this.$http.get('http://localhost:8000/api/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

버튼을 클릭하면 Django의 뷰에 요청이 전송되고 페이지에 반환된 메시지가 표시됩니다.

이제 모든 구성이 완료되었습니다. Vue 프로젝트의 루트 디렉터리에서 다음 명령을 실행하여 Vue 개발 서버를 시작합니다:

npm run serve

Django 프로젝트의 루트 디렉터리에서 다음 명령을 실행하여 Django 개발 서버를 시작합니다:

python manage.py runserver

이제 " http: //localhost:8080"을 입력하면 "Hello World!" 버튼이 포함된 페이지가 표시됩니다. 버튼을 클릭하면 페이지에 "Hello World!"가 표시됩니다.

Vue3 및 Django4를 사용한 풀 스택 개발 입문 가이드입니다. 이 기사의 샘플 코드를 통해 기본 Vue 및 Django 애플리케이션을 구축하고 서로 연결하는 방법을 배울 수 있습니다. 이것이 여러분의 풀 스택 개발 여정에 도움이 되기를 바랍니다!

위 내용은 연습을 위한 기본 사항: Vue3+Django4 풀 스택 개발 시작하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!