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

1. Préparation de l'environnement
   Tout d'abord, vous devez installer Node.js et le gestionnaire de packages npm. Une fois l'installation terminée, utilisez la commande suivante pour vérifier la version :

node -v
npm -v

2. Créer un projet Vue
   Entrez la commande suivante dans la ligne de commande pour créer un nouveau projet Vue :

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.

3. Installez Vue Router et Vuex
   Installez Vue Router et Vuex dans votre projet Vue à l'aide de la commande suivante :

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

4. Créez des composants
   Créez un dossier appelé composants sous le dossier src et créez un dossier nommé composants dans le fichier pour HelloWorld.vue et ajoutez le code suivant :

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

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

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

5. Configurer le routage
   Créez un dossier nommé router sous le dossier src, puis créez-y un fichier nommé index.js et ajoutez le code suivant :

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. Configure state gestion
   Créez un dossier nommé store sous le dossier src, puis créez-y un fichier nommé index.js et ajoutez le code suivant :

import { createStore } from "vuex";

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

7. Dans le principal Introduisez les composants, le routage et la gestion de l'état dans l'application
   Ajoutez ce qui suit codez le fichier main.js sous le dossier src :

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

1. Préparation de l'environnement
   Tout d'abord, vous devez installer Python et le gestionnaire de paquets pip . Une fois l'installation terminée, utilisez la commande suivante pour vérifier la version :

python -V
pip -V

2. Créer un projet Django
   Entrez les instructions suivantes dans la ligne de commande pour créer un nouveau projet Django :

django-admin startproject mydjangoapp

3. Créer une application Django
   Entrez dans le répertoire racine du projet Sur la ligne de commande, saisissez les instructions suivantes pour créer une application nommée mydjangoapp :

cd mydjangoapp
./manage.py startapp myapp

4. Configurez la base de données
   Configurez les paramètres de connexion à la base de données dans le fichier settings.py :

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

5. Écrivez les vues API
   Vues sous le dossier myapp.py :

from django.http import JsonResponse

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

6. Configurer le routage
   Ajoutez le code suivant dans le fichier urls.py sous le dossier mydjangoapp :

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

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

7. Démarrez le serveur de développement Django
   Exécutez la commande suivante dans le projet. répertoire racine pour démarrer le serveur de développement Django :

./manage.py runserver

5. Débogage conjoint front-end et back-end

1. Créer la configuration du proxy
   Créez un fichier nommé vue.config.js dans le répertoire racine du projet Vue et ajoutez le code suivant :

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

2. Appelez l'API
   Ajoutez le code suivant dans le composant 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. 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!