실전 경험 공유: Vue3+Django4 풀스택 프로젝트 개발 가이드
소개:
인터넷이 고도로 발달한 시대에 풀스택 개발은 점점 더 많은 개발자들이 주목하고 배우는 방향이 되었습니다. . Vue 프레임워크는 현재 가장 인기 있는 프런트엔드 프레임워크 중 하나이며, Django는 강력한 Python 백엔드 프레임워크입니다. 이들의 조합은 포괄적인 풀 스택 개발 경험을 제공할 수 있습니다. 이 기사에서는 Vue3 및 Django4를 사용하여 완전한 풀 스택 프로젝트를 구축하는 방법을 소개하고 일부 개발 경험과 코드 예제를 공유합니다.
1. 환경 준비
프로젝트를 시작하기 전에 환경 준비가 필요합니다. 다음 소프트웨어가 설치되어 있는지 확인하세요.
2. Vue3 프로젝트 만들기
먼저 Vue CLI를 사용하여 Vue3 프로젝트를 만듭니다. 명령줄 인터페이스를 열고 다음 명령을 실행합니다.
$ vue create vue_project
명령줄 프롬프트에 따라 필요한 구성을 선택하고 프로젝트가 생성될 때까지 기다립니다.
3. Django 프로젝트 만들기
다음으로 Django를 사용하여 백엔드 프로젝트를 만듭니다. 명령줄 인터페이스에서 다음 명령을 실행하세요:
$ django-admin startproject django_project
이렇게 하면 현재 디렉터리에 django_project라는 폴더가 생성되고 프로젝트의 뼈대가 생성됩니다.
4. 프런트엔드 및 백엔드 연결 구성
이 단계에서는 프런트엔드와 백엔드가 서로 통신할 수 있도록 프런트엔드 및 백엔드 연결을 구성해야 합니다. 먼저 vue_project/src 디렉터리에 .env.development
파일을 만들고 다음 내용을 추가합니다. .env.development
,并添加以下内容:
VUE_APP_BACKEND_URL=http://localhost:8000
这里的http://localhost:8000
是Django后端运行的地址。
接下来,打开vue_project/src/main.js文件,添加以下代码到createApp
之前:
import axios from 'axios' axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL
这个代码段设置了axios的默认基础URL为我们刚才配置的后端地址。
五、开发前端页面
现在,我们可以开始开发前端页面了。Vue3的语法与Vue2略有不同,但大体上相似。Vue3提供了更加强大的组合式API,可以更好地管理代码逻辑。下面是一个简单的例子。
首先,在vue_project/src/components目录下创建一个名为HelloWorld.vue
的组件文件,并添加以下内容:
<template> <div class="hello"> <h1>{{ message }}</h1> </div> </template> <script> import { ref } from 'vue' export default { name: 'HelloWorld', setup() { const message = ref('Hello, Vue3!') return { message } } } </script> <style scoped> h1 { color: red; } </style>
这个组件显示了一个红色的标题,标题内容通过ref定义的响应式变量设置。
为了在页面中使用这个组件,我们需要在vue_project/src/App.vue中引入它。首先,删除原有的内容,然后添加以下代码:
<template> <div id="app"> <HelloWorld/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> #app { font-family: 'Arial', sans-serif; } </style>
这里我们导入了刚才创建的HelloWorld.vue
组件,并在页面中引用它。
六、开发后端API
在Django项目中,我们需要创建API来提供后端服务。以创建一个简单的用户API为例。
首先,在django_project目录下执行以下命令,创建一个名为users
的应用:
$ python manage.py startapp users
在users目录下创建一个名为views.py
的文件,并添加以下代码:
from django.http import JsonResponse def get_users(request): users = [ {"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"}, {"id": 3, "name": "Charlie"} ] return JsonResponse(users, safe=False)
这个简单的视图函数返回一个带有用户信息的JSON响应。
接下来,打开django_project/django_project/urls.py文件,并添加以下代码:
from django.urls import path from users.views import get_users urlpatterns = [ path('api/users', get_users), ]
这个代码段将get_users
视图函数映射到路径/api/users
上。
七、前后端通信
为了让前端可以访问后端API,我们需要使用axios发送HTTP请求。回到vue_project/src/components/HelloWorld.vue文件,在setup
函数中添加以下代码:
import axios from 'axios' export default { name: 'HelloWorld', setup() { const message = ref('Hello, Vue3!') axios.get('/api/users').then((response) => { console.log(response.data) }) return { message } } }
这个代码段使用axios发送一个GET请求到/api/users
,并打印返回的数据。
八、运行项目
最后,我们只需要将前后端项目分别运行起来就可以了。
在vue_project目录下执行以下命令:
$ npm install $ npm run serve
在django_project目录下执行以下命令:
$ python manage.py runserver
现在,打开浏览器并访问http://localhost:8080
rrreee
http://localhost:8000
는 Django입니다. 터미널이 실행 중인 주소입니다.
다음으로, vue_project/src/main.js 파일을 열고 createApp
앞에 다음 코드를 추가하세요.
HelloWorld.vue
라는 구성 요소 파일을 만들고 다음 내용을 추가합니다. 🎜rrreee🎜이 구성 요소는 빨간색 제목을 표시하며 제목 내용은 Responsive를 통과합니다. ref로 정의된 변수 설정. 🎜🎜페이지에서 이 컴포넌트를 사용하려면 vue_project/src/App.vue에 이를 소개해야 합니다. 먼저 원본 콘텐츠를 삭제한 후 다음 코드를 추가하세요. 🎜rrreee🎜여기서 방금 생성한 HelloWorld.vue
구성 요소를 가져오고 페이지에서 참조합니다. 🎜🎜6. 백엔드 API 개발🎜Django 프로젝트에서는 백엔드 서비스를 제공하기 위한 API를 만들어야 합니다. 간단한 사용자 API 생성을 예로 들어보겠습니다. 🎜🎜먼저 django_project 디렉토리에서 다음 명령을 실행하여 users
라는 애플리케이션을 생성합니다. 🎜rrreee🎜users 디렉토리에 views.py
라는 파일을 생성하고 다음 코드: 🎜rrreee🎜 이 간단한 보기 함수는 사용자 정보가 포함된 JSON 응답을 반환합니다. 🎜🎜다음으로, django_project/django_project/urls.py 파일을 열고 다음 코드를 추가하세요: 🎜rrreee🎜이 코드 조각은 get_users
보기 함수를 /api/users 경로에 매핑합니다. 코드> 위로. 🎜🎜7. 프론트엔드와 백엔드 통신🎜프론트엔드가 백엔드 API에 액세스하려면 axios를 사용하여 HTTP 요청을 보내야 합니다. vue_project/src/comComponents/HelloWorld.vue 파일로 돌아가 <code>setup
함수에 다음 코드를 추가합니다. 🎜rrreee🎜이 코드 조각은 axios를 사용하여 /api에 GET 요청을 보냅니다. /users code>를 입력하고 반환된 데이터를 인쇄합니다. 🎜🎜8. 프로젝트 실행🎜마지막으로 프런트엔드 프로젝트와 백엔드 프로젝트만 별도로 실행하면 됩니다. 🎜🎜vue_project 디렉토리에서 다음 명령을 실행하세요: 🎜rrreee🎜django_project 디렉토리에서 다음 명령을 실행하세요: 🎜rrreee🎜이제 브라우저를 열고 <code>http://localhost:8080
를 방문하세요. 잘 진행되면 콘솔에서 백엔드 API가 반환한 데이터를 볼 수 있을 것입니다. 🎜🎜요약: 🎜이 글에서는 Vue3 및 Django4를 사용하여 완전한 풀 스택 프로젝트를 구축하는 방법을 소개하고 몇 가지 실제 경험과 코드 예제를 공유합니다. 이러한 풀스택 개발 접근 방식을 통해 프런트엔드와 백엔드가 분리된 웹 애플리케이션을 보다 효율적으로 구축할 수 있습니다. 이 글이 풀스택 개발을 배우고 있는 개발자들에게 도움이 되기를 바랍니다. 🎜위 내용은 실무 경험 공유: Vue3+Django4 풀스택 프로젝트 개발 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!