실무 기술 공유: Vue3+Django4 신기술 프로젝트 개발-View.js-php.cn

실무 기술 공유: Vue3+Django4 신기술 프로젝트 개발

WBOY

풀어 주다： 2023-09-10 12:17:02

원래의

1293명이 탐색했습니다.

실무 기술 공유: Vue3+Django4 신기술 프로젝트 개발

최근 몇 년간 프론트엔드 기술이 급속히 발전하면서 Vue.js는 뛰어난 프론트엔드 프레임워크로 많은 주목을 받았습니다. Vue.js3의 공식 출시와 곧 출시될 Django4를 통해 두 가지를 결합하여 새로운 기술 프로젝트를 개발하는 것은 의심할 여지 없이 기술적 병목 현상을 극복하고 프로젝트 개발 효율성을 향상시킬 수 있는 좋은 솔루션입니다. 이 기사에서는 개발자가 Vue3+Django4 기술 프로젝트 개발 프로세스에 더욱 익숙해지는 데 도움이 되는 몇 가지 실용적인 팁을 공유합니다.

우선, 새로운 Vue3+Django4 프로젝트를 시작하려면 먼저 개발 환경을 설정해야 합니다. Vue3 설치에는 Vue2와 비교하여 몇 가지 변경 사항이 있습니다. 이제 부팅 명령을 사용하여 새 프로젝트를 만들 수 있습니다. Vue CLI를 설치하고 다음 명령을 사용하여 새 프로젝트를 만듭니다.

npm install -g @vue/cli
vue create my-project

로그인 후 복사

그러면 자동으로 새 Vue3 프로젝트가 생성되고 종속성이 로컬에 설치됩니다.

다음으로 다음 명령을 사용하여 설치할 수 있는 Django4를 설치해야 합니다.

pip install Django==4.0.*

로그인 후 복사

설치가 완료되면 새 Django 프로젝트를 만들 수 있습니다.

django-admin startproject myproject

로그인 후 복사

다음으로 Vue3와 Vue3 및 Vue3 간의 통신을 구성해야 합니다. 장고4. Vue3와 Django4는 완전히 독립적인 두 프로젝트이므로 도메인 간 문제를 처리하려면 CORS(Cross-Origin Resource Sharing)를 사용해야 합니다. Django의 settings.py 파일에서 다음 내용을 찾아 수정합니다.

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL = True

로그인 후 복사

이렇게 하면 Django4의 크로스 도메인 처리가 구성됩니다.

다음으로 Vue3와 Django4 간의 데이터 상호 작용을 구현하겠습니다. 프런트엔드 및 백엔드 상호 작용을 위해 RESTful API를 사용할 수 있습니다. Vue3 프로젝트에서는 axios 라이브러리를 사용하여 HTTP 요청을 할 수 있습니다. 먼저 axios를 설치해야 합니다.

npm install axios

로그인 후 복사

다음으로 Vue3 프로젝트의 main.js 파일에 다음 코드를 추가합니다.

import axios from 'axios'
Vue.prototype.$http = axios

로그인 후 복사

이렇게 하면 Vue3 프로젝트에서 axios를 사용하여 요청을 보낼 수 있습니다.

Django4 프로젝트에서는 Django의 클래스 뷰와 직렬 변환기를 사용하여 요청과 응답을 처리할 수 있습니다. 먼저 새 Django 애플리케이션을 만듭니다.

python manage.py startapp myapp

로그인 후 복사

다음으로 myapp/views.py 파일에 클래스 뷰를 작성하여 요청 및 응답 로직을 처리합니다. 예를 들어, "HelloView"라는 클래스 뷰를 생성할 수 있습니다:

from rest_framework.views import APIView
from rest_framework.response import Response

class HelloView(APIView):
    def get(self, request):
        return Response({"message": "Hello, Vue3+Django4!"})

로그인 후 복사

그런 다음 myproject/urls.py 파일에 다음 코드를 추가합니다:

from myapp.views import HelloView

urlpatterns = [
    ...
    path('hello/', HelloView.as_view()),
    ...
]

로그인 후 복사

이 방법으로 Django4에서 간단한 API 인터페이스를 구현했습니다.

마지막으로 프런트엔드와 백엔드 간의 데이터 상호작용을 구현해 보겠습니다. Vue3 프로젝트에서는 요청을 보내고 데이터를 가져오는 새 구성 요소를 만들 수 있습니다. 예를 들어 Vue3 프로젝트의 Hello.vue 파일에서는

<template>
  <div>
    <button @click="getData">获取数据</button>
    <p>{{ message }}</p>
  </div>
</template>

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

로그인 후 복사

이런 식으로 버튼을 클릭하면 프런트 엔드가 백 엔드에 요청을 보내고 데이터를 가져옵니다.

이 시점에서 우리는 새로운 Vue3+Django4 기술 프로젝트 구축과 기본 프런트엔드 및 백엔드 데이터 상호 작용을 완료했습니다. 프로젝트 개발 중에 특정 요구 사항에 따라 기능을 계속 확장할 수 있습니다. 동시에 Vue3와 Django4는 많은 새로운 기능과 개선 사항을 가져왔습니다. 개발자는 공식 문서와 참조 예제를 연구하여 이를 더 잘 익히고 프로젝트 개발에 적용할 수 있습니다.

요약하자면 Vue3+Django4는 개발자가 기술 프로젝트를 보다 효율적으로 개발하는 데 도움이 될 수 있는 강력한 기술 조합입니다. 이 기사에서는 개발 환경 설정, 도메인 간 처리 구성, 프런트엔드 및 백엔드 데이터 상호 작용 실현에 대한 실용적인 팁을 공유합니다. 앞으로는 Vue3 및 Django4에 더 많은 개선 사항과 새로운 기능이 있을 예정이며, 이를 계속 탐색하고 적용하여 더욱 강력한 프로젝트를 달성할 수 있습니다.

위 내용은 실무 기술 공유: Vue3+Django4 신기술 프로젝트 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!