Maison > Article > interface Web > Construire une application full-stack : explication détaillée du développement du projet Vue3+Django4
Créer une application full-stack : Explication détaillée du développement du projet Vue3+Django4
1 Introduction
Avec le développement rapide d'Internet, le développement full-stack a reçu de plus en plus d'attention. Les développeurs full-stack peuvent être responsables du travail de développement front-end et back-end, améliorant ainsi l'efficacité du développement et la qualité globale du projet. Cet article présentera en détail comment créer une application full-stack et utilisera Vue3 et Django4 comme cadre de développement pour l'expliquer.
2. Aperçu technique
Avant de créer une application full-stack, nous devons comprendre certains concepts techniques clés. Vue3 est un framework JavaScript simple, flexible et efficace qui peut être utilisé pour créer des applications Web modernes. Django4 est un framework Web Python puissant et facile à utiliser pour développer rapidement des applications Web sécurisées et fiables.
3. Construisez le front-end
node -v npm -v
vue create my-vue-app
Sélectionnez certains paramètres de base en fonction de la invites, telles que le nom du projet, la configuration du projet, etc.
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");
Quatre. Construisez le backend
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. Débogage conjoint front-end et back-end
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. Exécutez le projet
Entrez le répertoire racine du projet Vue sur la ligne de commande et exécutez la commande suivante pour démarrer le serveur de développement front-end :
npm run serve
Dans une autre fenêtre de ligne de commande Entrez le répertoire racine du projet Django et exécutez la commande suivante pour démarrer le serveur de développement backend :
./manage.py runserver
Maintenant, ouvrez le navigateur et visitez http://localhost :8080, vous verrez un message contenant la page "Hello, World!" et "Count: 0". Cliquez sur le bouton "Incrémenter" et "Count" augmentera automatiquement de 1.
7. Résumé
Grâce à l'introduction détaillée de cet article, nous avons appris à créer une application full-stack, en utilisant Vue3 comme framework front-end et Django4 comme framework back-end, et démontré le processus de débogage conjoint de les extrémités avant et arrière à travers des exemples de code. Le développement full-stack est d'une grande importance pour améliorer l'efficacité du développement et la qualité des projets. J'espère que cet article vous sera utile. Je vous souhaite plus de réussite sur la voie du développement full-stack !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!