풀스택 애플리케이션 구축: Vue3+Django4 프로젝트 개발에 대한 자세한 설명
1. 소개
인터넷의 급속한 발전과 함께 풀스택 개발이 점점 더 주목을 받고 있습니다. 풀스택 개발자는 프론트엔드와 백엔드 개발 작업을 모두 담당할 수 있어 개발 효율성과 프로젝트의 전반적인 품질이 향상됩니다. 이 글에서는 풀스택 애플리케이션을 구축하는 방법과 Vue3 및 Django4를 개발 프레임워크로 사용하는 방법을 자세히 소개합니다.
2. 기술 개요
풀 스택 애플리케이션을 구축하기 전에 몇 가지 주요 기술 개념을 이해해야 합니다. Vue3은 최신 웹 애플리케이션을 구축하는 데 사용할 수 있는 간단하고 유연하며 효율적인 JavaScript 프레임워크입니다. Django4는 안전하고 안정적인 웹 애플리케이션을 빠르게 개발하기 위한 강력하고 사용하기 쉬운 Python 웹 프레임워크입니다.
3. 프론트엔드 구축
node -v npm -v
vue create my-vue-app
에 따라 몇 가지 기본 설정을 선택하십시오. 프로젝트 이름, 프로젝트 구성 등과 같은 프롬프트
cd my-vue-app npm install vue-router vuex
<template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { data() { return { msg: "Hello, World!" }; } }; </script> <style scoped> h1 { color: blue; } </style>
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;
import { createStore } from "vuex"; export default createStore({ state() { return { count: 0 }; }, mutations: { increment(state) { state.count++; } } });
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. 백엔드 구축
python -V pip -V
django-admin startproject mydjangoapp
cd mydjangoapp ./manage.py startapp myapp
DATABASES = { "default": { "ENGINE": "django.db.backends.sqlite3", "NAME": BASE_DIR / "db.sqlite3", } }
from django.http import JsonResponse def hello_world(request): return JsonResponse({"message": "Hello, World!"})
from django.urls import path from myapp.views import hello_world urlpatterns = [ path("api/hello", hello_world), ]
./manage.py runserver
5. 프런트엔드 및 백엔드 공동 디버깅
module.exports = { devServer: { proxy: { "/api": { target: "http://localhost:8000", ws: true, changeOrigin: true } } } };
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!