심층 학습: Vue3+Django4 풀 스택 개발 예제-View.js-php.cn

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

WBOY

풀어 주다： 2023-09-09 19:13:41

원래의

1372명이 탐색했습니다.

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

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

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

환경 설정:
먼저 Python, Node.js 및 Vue CLI가 올바르게 설치되었는지 확인해야 합니다. 다음 명령을 사용하여 설치할 수 있습니다.
Python 설치: https://www.python.org/downloads/
Node.js 설치: https://nodejs.org/
Vue CLI 설치: npm install - g @ vue/cli
Django 프로젝트 생성:
먼저, 새로운 Django 프로젝트를 생성해야 합니다. 명령줄을 열고 다음 명령을 사용하여 프로젝트를 생성합니다.
```
django-admin startproject myproject
```
로그인 후 복사
Django 애플리케이션 생성:
다음으로 Django 애플리케이션을 생성해야 합니다. 프로젝트 디렉터리를 입력하고 다음 명령을 사용하여 애플리케이션을 생성합니다:
```
cd myproject
python manage.py startapp myapp
```
로그인 후 복사
Django 라우팅 구성:
myproject/myproject/urls.py 파일에서 Django의 루트 경로와 myapp의 하위 경로를 구성합니다:
```
from django.urls import path, include

urlpatterns = [
 path('api/', include('myapp.urls')),
]
```
로그인 후 복사

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

from django.shortcuts import render
from django.http import JsonResponse

def hello(request):
 return JsonResponse({'message': 'Hello, World!'})

로그인 후 복사

Django 라우팅 구성:
myapp/urls.py 파일에서 myapp의 라우팅을 구성합니다.
```
from django.urls import path

from . import views

urlpatterns = [
 path('hello/', views.hello),
]
```
로그인 후 복사
Django 서버 시작:
다음 명령을 사용하여 Django 개발 서버를 시작하세요.
```
python manage.py runserver
```
로그인 후 복사
http://localhost:8000/api/hello/를 방문하면 반환된 JSON 데이터를 볼 수 있습니다.
Vue 프로젝트 만들기:
이제 새로운 Vue 프로젝트를 만들어야 합니다. 명령줄을 열고 다음 명령을 사용하여 프로젝트를 생성합니다.
```
vue create myvueapp
```
로그인 후 복사
참고: 프로젝트를 생성할 때 기본 사전 설정 구성을 선택하거나 필요에 따라 구성하십시오.
Vue 개발 서버 프록시 구성:
Vue 프로젝트의 루트 디렉터리에서 vue.config.js 파일을 찾고(그렇지 않은 경우 새 파일 만들기) 다음 구성을 추가합니다.
```
module.exports = {
 devServer: {
     proxy: {
         '/api': {
             target: 'http://localhost:8000',
             ws: true,
             changeOrigin: true
         }
     }
 }
}
```
로그인 후 복사

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

<template>
  <div>
 <h1>{{ 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>

로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!