실습: Vue3+Django4 풀스택 개발 실습

실습: Vue3+Django4 풀스택 개발 실습

인터넷의 급속한 발전과 함께 프런트엔드와 백엔드 분리 개발 모델이 현대 웹 개발의 주류가 되었습니다. 널리 사용되는 두 가지 개발 프레임워크인 Vue와 Django는 프런트엔드 및 백엔드 개발에서 중요한 역할을 합니다. 이 기사에서는 풀 스택 개발을 위해 Vue3 및 Django4를 사용하는 방법을 소개하고 실제 예제를 통해 실제 프로세스를 보여줍니다.

1. 프로젝트 기획

개발을 시작하기 전에 먼저 프로젝트 기획을 진행해야 합니다. 사용자가 로그인하고, 작업을 생성하고, 작업 목록을 보고, 작업 상태를 업데이트할 수 있는 간단한 작업 관리 시스템을 만들어 보겠습니다. 시스템은 Vue3을 프런트엔드 프레임워크로, Django4를 백엔드 프레임워크로 사용하고 프런트엔드 및 백엔드 통신을 위해 API를 사용합니다.

2. 프론트 엔드 개발

1. Vue3 프로젝트 만들기
   먼저 Vue CLI를 사용하여 새로운 Vue3 프로젝트를 만듭니다. 터미널에서 다음 명령을 실행하세요:

   vue create frontend

   프롬프트에 따라 필요한 구성 항목을 선택하고 프로젝트가 생성될 때까지 기다립니다.

2. 라우팅 및 페이지 구성 요소 설정
   src 디렉터리에 router.js 파일을 만들고 라우팅을 설정합니다. 로그인 페이지, 작업 목록 페이지, 작업 세부정보 페이지의 세 가지 페이지가 있습니다. router.js에 다음 코드를 추가하세요. router.js文件，并设置路由。我们将有三个页面：登录页面、任务列表页面和任务详情页面。在router.js中添加以下代码：

   import { createRouter, createWebHistory } from 'vue-router'
   import Login from './views/Login.vue'
   import TaskList from './views/TaskList.vue'
   import TaskDetail from './views/TaskDetail.vue'
   
   const routes = [
     {
    path: '/login',
    name: 'Login',
    component: Login
     },
     {
    path: '/taskList',
    name: 'TaskList',
    component: TaskList
     },
     {
    path: '/taskDetail/:id',
    name: 'TaskDetail',
    component: TaskDetail
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })
   
   export default router

3. 创建页面组件
   在src/views目录下创建Login.vue、TaskList.vue和TaskDetail.vue三个页面组件，并编写相关的HTML和逻辑。这里不再展示具体代码，读者可以根据需要自行创建相关组件。
4. 发送API请求
   在src目录下创建api.js文件，用于发送API请求。这里我们使用Axios库来发送HTTP请求。具体的API请求代码可以根据后端API的设计来编写。
5. 集成Vuex
   在src目录下创建store.js文件，并配置Vuex。我们将在store中存储用户信息和任务列表数据，并通过mutations和actions来修改和获取这些数据。

至此，我们的前端开发工作就完成了。可以通过执行npm run serve命令来启动开发服务器，并在浏览器中访问http://localhost:8080来查看页面。

三、后端开发

1. 创建Django4项目
   在终端中执行以下命令来创建一个新的Django4项目：

   django-admin startproject backend

2. 创建应用
   进入项目目录，并执行以下命令来创建一个新的应用：

   cd backend
   python manage.py startapp tasks

3. 设置数据库和模型
   在项目的settings.py中配置数据库信息，并在tasks应用的models.py中创建所需的模型。例如，任务模型可以定义如下：

   from django.db import models
   
   class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    status = models.CharField(max_length=20)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

4. 创建API视图
   在tasks应用的views.py中创建API视图，并定义相关的路由。使用Django的Rest Framework可以更便捷地创建API视图和路由。
5. 配置CORS
   由于前端和后端分别运行在不同的域名或端口上，我们需要进行跨域资源共享（CORS）的配置。通过在settings.py中进行配置即可实现跨域请求。

四、前后端集成

1. 运行后端服务器
   在终端中执行以下命令来启动Django的开发服务器：

   python manage.py runserver

2. 配置前端API请求
   在前端的api.js文件中配置API请求的base URL，使其指向后端服务器的地址和端口。
3. 配置前端路由
   在前端的router.jsrrreee

페이지 구성 요소 생성

src/views 디렉터리에 Login.vue 및 TaskList.vue 생성 code> 및 <code>TaskDetail.vue 세 개의 페이지 구성요소를 작성하고 관련 HTML 및 로직을 작성합니다. 특정 코드는 더 이상 여기에 표시되지 않으며 독자는 필요에 따라 관련 구성 요소를 직접 만들 수 있습니다.

API 요청 보내기

API 요청을 보내기 위해 src 디렉토리에 api.js 파일을 생성하세요. 여기서는 Axios 라이브러리를 사용하여 HTTP 요청을 보냅니다. 특정 API 요청 코드는 백엔드 API 설계에 따라 작성될 수 있습니다.

Vuex 통합🎜src 디렉토리에 store.js 파일을 생성하고 Vuex를 구성하세요. 사용자 정보와 작업 목록 데이터를 스토어에 저장하고, 이 데이터를 변형과 작업을 통해 수정하고 획득합니다. 🎜🎜🎜이 시점에서 우리의 프론트 엔드 개발 작업이 완료되었습니다. npm run Serve 명령을 실행하여 개발 서버를 시작하고, 브라우저에서 http://localhost:8080에 접속하여 페이지를 볼 수 있습니다. 🎜🎜3. 백엔드 개발🎜🎜🎜🎜Django4 프로젝트 생성🎜새 Django4 프로젝트를 생성하려면 터미널에서 다음 명령을 실행하세요.🎜rrreee🎜🎜🎜애플리케이션 생성🎜프로젝트 디렉터리에 들어가서 다음 명령을 실행하여 새로운 애플리케이션: 🎜rrreee🎜🎜🎜데이터베이스 및 모델 설정🎜 프로젝트의 settings.py에서 데이터베이스 정보를 구성하고 작업 애플리케이션의 models.py에서 필요한 모델을 생성합니다. 예를 들어 작업 모델은 다음과 같이 정의할 수 있습니다. 🎜rrreee🎜🎜API 보기 생성🎜 작업 애플리케이션의 views.py에서 API 보기를 생성하고 관련 경로를 정의합니다. Django의 Rest Framework를 사용하면 API 뷰와 경로를 더 쉽게 만들 수 있습니다. 🎜🎜CORS 구성🎜프런트엔드와 백엔드가 서로 다른 도메인 이름이나 포트에서 실행되므로 CORS(교차 도메인 리소스 공유)를 구성해야 합니다. settings.py를 구성하여 도메인 간 요청을 구현할 수 있습니다. 🎜🎜🎜4. 프런트엔드 및 백엔드 통합🎜🎜🎜🎜백엔드 서버 실행🎜Django 개발 서버를 시작하려면 터미널에서 다음 명령을 실행하세요.🎜rrreee🎜🎜프런트엔드 API 요청 구성🎜 프런트엔드의 api.js에서 code> 파일에 있는 API 요청의 기본 URL이 백엔드 서버의 주소와 포트를 가리키도록 구성합니다. 🎜🎜프런트 엔드 라우팅 구성🎜실제 필요에 따라 프런트 엔드 <code>router.js 파일에서 라우팅을 구성하세요. 🎜🎜🎜이제 프론트엔드와 백엔드 통합 작업이 완료되었습니다. 프런트엔드의 URL에 액세스하여 애플리케이션의 기능을 테스트하고 백엔드와 통신할 수 있습니다. 🎜🎜5. 요약🎜🎜이 글에서는 Vue3과 Django4를 사용하여 풀스택 개발을 하는 방법을 소개하고 실제 사례를 통해 실제 프로세스를 보여줍니다. 프론트엔드와 백엔드를 분리한 개발 모델을 통해 강력한 웹 애플리케이션을 보다 효율적으로 개발하고 유지할 수 있습니다. 이 글이 초보자들에게 작은 영감을 주고 실제 개발에 도움이 되기를 바랍니다. 부족한 점이 있으면 바로잡아주세요. 🎜

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