풀스택 애플리케이션 구축: Vue3+Django4 프로젝트 개발에 대한 자세한 설명

풀스택 애플리케이션 구축: Vue3+Django4 프로젝트 개발에 대한 자세한 설명

1. 소개
인터넷의 급속한 발전과 함께 풀스택 개발이 점점 더 주목을 받고 있습니다. 풀스택 개발자는 프론트엔드와 백엔드 개발 작업을 모두 담당할 수 있어 개발 효율성과 프로젝트의 전반적인 품질이 향상됩니다. 이 글에서는 풀스택 애플리케이션을 구축하는 방법과 Vue3 및 Django4를 개발 프레임워크로 사용하는 방법을 자세히 소개합니다.

2. 기술 개요
풀 스택 애플리케이션을 구축하기 전에 몇 가지 주요 기술 개념을 이해해야 합니다. Vue3은 최신 웹 애플리케이션을 구축하는 데 사용할 수 있는 간단하고 유연하며 효율적인 JavaScript 프레임워크입니다. Django4는 안전하고 안정적인 웹 애플리케이션을 빠르게 개발하기 위한 강력하고 사용하기 쉬운 Python 웹 프레임워크입니다.

3. 프론트엔드 구축

1. 환경 준비
   먼저 Node.js와 npm 패키지 관리자를 설치해야 합니다. 설치가 완료되면 다음 명령을 사용하여 버전을 확인하십시오.

node -v
npm -v

2. Create Vue 프로젝트
   새 Vue 프로젝트를 생성하려면 명령줄에 다음 명령을 입력하십시오.

vue create my-vue-app

에 따라 몇 가지 기본 설정을 선택하십시오. 프로젝트 이름, 프로젝트 구성 등과 같은 프롬프트

3. Vue Router 및 Vuex 설치
   다음 명령을 사용하여 Vue 프로젝트에 Vue Router 및 Vuex를 설치합니다.

cd my-vue-app
npm install vue-router vuex

4. 구성 요소 생성
   src 폴더 아래에 구성 요소라는 폴더를 만들고 해당 파일에 구성 요소라는 폴더를 만듭니다. HelloWorld.vue를 실행하고 다음 코드를 추가하세요:

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello, World!"
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

5. 라우팅 구성
   src 폴더 아래에 router라는 폴더를 생성한 후 그 안에 index.js라는 파일을 생성하고 다음 코드를 추가하세요:

import { createRouter, createWebHistory } from "vue-router";

import HelloWorld from "../components/HelloWorld.vue";

const routes = [
  {
    path: "/",
    name: "HelloWorld",
    component: HelloWorld
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

6. 상태 구성 Management
   src 폴더 아래에 store라는 폴더를 만든 다음 그 안에 index.js라는 파일을 만들고 다음 코드를 추가합니다.

import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

7. 메인에서 애플리케이션에 구성 요소, 라우팅 및 상태 관리를 소개합니다
   다음을 추가합니다. src 폴더 아래의 main.js 파일에 코드를 추가하세요:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App)
  .use(router)
  .use(store)
  .mount("#app");

4. 백엔드 구축

1. 환경 준비
   먼저 Python과 pip 패키지 관리자를 설치해야 합니다. 설치가 완료되면 다음 명령을 사용하여 버전을 확인하세요.

python -V
pip -V

2. Create Django project
   새 Django 프로젝트를 생성하려면 명령줄에 다음 지침을 입력하세요.

django-admin startproject mydjangoapp

3. Create Django application
   입력 프로젝트 루트 디렉터리 명령줄에서 다음 지침을 입력하여 mydjangoapp이라는 애플리케이션을 생성합니다.

cd mydjangoapp
./manage.py startapp myapp

4. 데이터베이스 구성
   settings.py 파일에서 데이터베이스 연결 매개변수 구성:

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

5. Write API views
   myapp 폴더 아래의 보기:

from django.http import JsonResponse

def hello_world(request):
    return JsonResponse({"message": "Hello, World!"})

6. 라우팅 구성
   mydjangoapp 폴더 아래의 urls.py 파일에 다음 코드를 추가하세요.

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path("api/hello", hello_world),
]

7. Django 개발 서버 시작
   프로젝트에서 다음 명령을 실행하세요. Django 개발 서버를 시작하기 위한 루트 디렉토리:

./manage.py runserver

5. 프런트엔드 및 백엔드 공동 디버깅

1. 프록시 구성 생성
   Vue 프로젝트의 루트 디렉토리에 vue.config.js라는 파일을 생성하고 다음을 추가합니다. 다음 코드:

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        ws: true,
        changeOrigin: true
      }
    }
  }
};

2. API 호출
   HelloWorld.vue 구성 요소에 다음 코드를 추가하세요.

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>Count: {{ count }}</h2>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
      count: 0
    };
  },
  created() {
    fetch("/api/hello")
      .then(response => response.json())
      .then(data => {
        this.msg = data.message;
      });
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  },
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

6. 프로젝트를 실행합니다.
명령줄에 Vue 프로젝트 루트 디렉터리를 입력하고 다음 명령을 실행하여 시작합니다. 프런트 엔드 개발 서버:

npm run serve

다른 명령줄 창에서 Django 프로젝트의 루트 디렉터리를 입력하고 다음 명령을 실행하여 백엔드 개발 서버를 시작합니다.

./manage.py runserver

이제 브라우저를 열고 http:/를 방문합니다. /localhost:8080, "Hello, World!" 및 "Count: 0" 페이지가 포함된 메시지가 표시됩니다. "증가" 버튼을 클릭하면 "개수"가 자동으로 1씩 증가합니다.

7. 요약
이 글의 자세한 소개를 통해 우리는 Vue3를 프론트엔드 프레임워크로, Django4를 백엔드 프레임워크로 사용하여 풀스택 애플리케이션을 구축하는 방법을 배웠고, 코드 예제를 통해 앞부분과 뒷부분을 살펴보세요. 풀스택 개발은 개발 효율성과 프로젝트 품질 향상에 큰 의미가 있습니다. 이 글이 여러분에게 도움이 되기를 바랍니다. 풀스택 개발을 향한 여러분의 더 큰 성공을 기원합니다!

위 내용은 풀스택 애플리케이션 구축: Vue3+Django4 프로젝트 개발에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!