연습을 위한 기본 사항: Vue3+Django4 풀 스택 개발 시작하기-View.js-php.cn

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

WBOY

풀어 주다： 2023-09-08 18:16:41

원래의

1838명이 탐색했습니다.

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

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

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

Vue3 설치 및 구성
먼저 Vue 프로젝트를 생성하고 관리하려면 Vue CLI를 설치해야 합니다. 명령줄에서 다음 명령을 실행하여 Vue CLI를 설치하세요.
```
npm install -g @vue/cli
```
로그인 후 복사
설치가 완료된 후 다음 명령을 사용하여 새 Vue 프로젝트를 생성하세요.
```
vue create my-project
```
로그인 후 복사
프롬프트에 따라 선택하고 기본 옵션을 선택하세요.
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>
```
로그인 후 복사
이는 제목과 버튼을 클릭할 때 제목의 내용을 변경하는 버튼이 포함된 간단한 구성 요소입니다.
Django4 구성
다음으로 Django를 설치하고 새 Django 프로젝트를 생성해야 합니다. Django를 설치하려면 명령줄에서 다음 명령을 실행하세요.
```
pip install django==4.0.0
```
로그인 후 복사
설치가 완료되면 다음 명령을 사용하여 새 Django 프로젝트를 만듭니다.
```
django-admin startproject myproject
```
로그인 후 복사
이렇게 하면 현재 디렉터리에 "myproject"라는 이름의 새 Django 프로젝트가 생성됩니다.
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/'와 연결됩니다.

프로젝트 실행
이제 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 개발 서버를 시작합니다: