단계별: Vue3+Django4 풀 스택 프로젝트 구현 단계

단계별: Vue3+Django4 풀스택 프로젝트 구현 단계

웹 개발의 지속적인 발전과 함께 풀스택 개발이 점차 트렌드가 되었습니다. Vue와 Django는 프런트엔드 및 백엔드 개발에서 가장 널리 사용되는 기술 스택 중 하나이며 이들의 조합도 매우 강력합니다. 이번 글에서는 Vue3와 Django4를 사용하여 풀스택 프로젝트를 구현하는 방법을 단계별로 소개하겠습니다.

1. 준비
   먼저 Node.js와 Python을 로컬에 설치하고 해당 패키지 관리자 npm과 pip를 설치해야 합니다. 동시에 VS Code와 같은 통합 개발 환경(IDE)도 필요합니다.

2. Django 프로젝트 만들기
   터미널을 열고 프로젝트를 만들 디렉터리를 입력한 후 다음 명령을 실행하여 Django 프로젝트를 만듭니다.

   django-admin startproject myproject

3. Django 애플리케이션 만들기
   프로젝트 디렉터리를 입력하고 다음 명령을 실행합니다. Django 애플리케이션을 생성하려면 다음 명령을 따르세요.

   cd myproject
   python3 manage.py startapp myapp

4. Django 데이터베이스 구성
   settings.py 파일을 열고 SQLite 사용과 같은 데이터베이스 정보를 구성합니다.

   DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
   }

5. 데이터베이스 모델 생성
   에서 데이터베이스 모델을 정의합니다. models.py 파일입니다. 예를 들어 사용자 모델을 생성합니다:

   from django.db import models
   
   class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    password = models.CharField(max_length=100)

6. Perform 데이터베이스 마이그레이션
   다음 명령을 실행하여 데이터베이스 마이그레이션을 수행합니다.

   python3 manage.py makemigrations
   python3 manage.py migrate

7. Django 뷰 생성
   views.py 파일에 Django 뷰 함수를 작성합니다. 예를 들어, 모든 사용자를 가져오는 보기 기능을 만듭니다:

   from django.shortcuts import render
   from django.http import JsonResponse
   from .models import User
   
   def get_users(request):
    users = User.objects.all()
    data = [{'name': user.name, 'email': user.email} for user in users]
    return JsonResponse({'users': data})

8. Create Vue project
   터미널에서 Vue 프로젝트를 만들려는 디렉터리를 입력하고 다음 명령을 실행하여 Vue 프로젝트를 만듭니다.

   vue create myproject

9. Vue 프록시 구성
   myproject/vue.config.js 파일에서 Vue의 프록시를 구성하여 Django 백엔드에 대한 요청을 프록시합니다.

   module.exports = {
     devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
     }
   }

10. Vue 구성 요소 만들기
    src/views에서 Users.vue 구성 요소 만들기 사용자 목록을 표시할 디렉터리:

    <template>
      <div>
     <ul>
       <li v-for="user in users" :key="user.name">
         {{ user.name }} - {{ user.email }}
       </li>
     </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       users: []
     }
      },
      created() {
     this.getUsers()
      },
      methods: {
     getUsers() {
       axios.get('/api/users')
         .then(response => {
           this.users = response.data.users
         })
     }
      }
    }
    </script>

11. Vue 라우팅 구성
    src/router/index.js 파일에서 Vue 라우팅 구성 및 Users.vue 구성 요소를 경로로 사용:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Users from '../views/Users.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
     path: '/',
     name: 'Users',
     component: Users
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

12. 다음 위치에서 프로젝트 실행
    Django 및 Vue의 루트 각각 디렉터리에서 다음 명령을 실행하여 프로젝트를 실행합니다.

    python3 manage.py runserver
    npm run serve

이제 브라우저에서 http://localhost:8080을 방문하여 전체 스택 프로젝트를 볼 수 있습니다. 사용자 구성 요소는 Django 백엔드에서 데이터를 가져와 페이지에 표시합니다.

요약:
위 단계를 통해 Vue3 및 Django4를 사용하여 풀스택 프로젝트를 성공적으로 구현했습니다. 프론트엔드와 백엔드 개발을 통합함으로써 강력한 웹 애플리케이션을 보다 효율적으로 개발할 수 있습니다. 이 글이 여러분에게 도움이 되기를 바라며, Vue와 Django의 풀스택 개발 프로세스에 더 잘 익숙해지기를 바랍니다.

위 내용은 단계별: Vue3+Django4 풀 스택 프로젝트 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!