Partage d'expérience pratique : guide de développement de projets full-stack Vue3+Django4

Partage d'expériences pratiques : Guide de développement de projets full-stack Vue3+Django4

Introduction :
À l'ère actuelle d'Internet hautement développé, le développement full-stack est devenu une direction à laquelle de plus en plus de développeurs prêtent attention et apprennent. . Le framework Vue est actuellement l'un des frameworks front-end les plus populaires, et Django est un puissant framework back-end Python. Leur combinaison peut nous offrir une expérience de développement full-stack complète. Cet article expliquera comment utiliser Vue3 et Django4 pour créer un projet full-stack complet et partagera une expérience de développement et des exemples de code.

1. Préparation de l'environnement
Avant de démarrer le projet, vous devez effectuer des préparations environnementales. Assurez-vous d'avoir installé les logiciels suivants :

1. Node.js et npm : utilisés pour installer et gérer les dépendances frontales.
2. Python et pip : utilisés pour installer et gérer les dépendances backend.
3. Vue CLI : outil de ligne de commande pour créer des projets Vue.
4. Django : pour créer et gérer des projets backend.

2. Créer un projet Vue3
Tout d'abord, nous utilisons Vue CLI pour créer un projet Vue3. Ouvrez l'interface de ligne de commande et exécutez la commande suivante :

$ vue create vue_project

Suivez les invites de ligne de commande, sélectionnez la configuration dont vous avez besoin et attendez que le projet soit créé.

3. Créer un projet Django
Ensuite, nous utilisons Django pour créer un projet back-end. Exécutez la commande suivante dans l'interface de ligne de commande :

$ django-admin startproject django_project

Cela créera un dossier nommé django_project dans le répertoire courant et générera le squelette d'un projet.

4. Configurer les connexions front-end et back-end
Dans cette étape, nous devons configurer les connexions front-end et back-end afin que les front-end et back-end puissent communiquer entre eux. Tout d'abord, créez un fichier .env.development dans le répertoire vue_project/src et ajoutez le contenu suivant : .env.development，并添加以下内容：

VUE_APP_BACKEND_URL=http://localhost:8000

这里的http://localhost:8000是Django后端运行的地址。

接下来，打开vue_project/src/main.js文件，添加以下代码到createApp之前：

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL

这个代码段设置了axios的默认基础URL为我们刚才配置的后端地址。

五、开发前端页面
现在，我们可以开始开发前端页面了。Vue3的语法与Vue2略有不同，但大体上相似。Vue3提供了更加强大的组合式API，可以更好地管理代码逻辑。下面是一个简单的例子。

首先，在vue_project/src/components目录下创建一个名为HelloWorld.vue的组件文件，并添加以下内容：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    return {
      message
    }
  }
}
</script>

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

这个组件显示了一个红色的标题，标题内容通过ref定义的响应式变量设置。

为了在页面中使用这个组件，我们需要在vue_project/src/App.vue中引入它。首先，删除原有的内容，然后添加以下代码：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Arial', sans-serif;
}
</style>

这里我们导入了刚才创建的HelloWorld.vue组件，并在页面中引用它。

六、开发后端API
在Django项目中，我们需要创建API来提供后端服务。以创建一个简单的用户API为例。

首先，在django_project目录下执行以下命令，创建一个名为users的应用：

$ python manage.py startapp users

在users目录下创建一个名为views.py的文件，并添加以下代码：

from django.http import JsonResponse

def get_users(request):
    users = [
        {"id": 1, "name": "Alice"},
        {"id": 2, "name": "Bob"},
        {"id": 3, "name": "Charlie"}
    ]
    return JsonResponse(users, safe=False)

这个简单的视图函数返回一个带有用户信息的JSON响应。

接下来，打开django_project/django_project/urls.py文件，并添加以下代码：

from django.urls import path
from users.views import get_users

urlpatterns = [
    path('api/users', get_users),
]

这个代码段将get_users视图函数映射到路径/api/users上。

七、前后端通信
为了让前端可以访问后端API，我们需要使用axios发送HTTP请求。回到vue_project/src/components/HelloWorld.vue文件，在setup函数中添加以下代码：

import axios from 'axios'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    axios.get('/api/users').then((response) => {
      console.log(response.data)
    })
    return {
      message
    }
  }
}

这个代码段使用axios发送一个GET请求到/api/users，并打印返回的数据。

八、运行项目
最后，我们只需要将前后端项目分别运行起来就可以了。

在vue_project目录下执行以下命令：

$ npm install
$ npm run serve

在django_project目录下执行以下命令：

$ python manage.py runserver

现在，打开浏览器并访问http://localhost:8080rrreee

Le http://localhost:8000 voici Django Le adresse où le terminal est exécuté.

Ensuite, ouvrez le fichier vue_project/src/main.js et ajoutez le code suivant avant createApp :

rrreee🎜Cet extrait de code définit l'URL de base par défaut d'axios sur l'adresse backend que nous venons de configurer. 🎜🎜5. Développer la page front-end🎜Maintenant, nous pouvons commencer à développer la page front-end. La syntaxe de Vue3 est légèrement différente de celle de Vue2, mais généralement similaire. Vue3 fournit une API combinée plus puissante pour mieux gérer la logique du code. Vous trouverez ci-dessous un exemple simple. 🎜🎜Tout d'abord, créez un fichier de composant nommé HelloWorld.vue dans le répertoire vue_project/src/components, et ajoutez le contenu suivant : 🎜rrreee🎜Ce composant affiche un titre rouge, et le contenu du titre passe en Responsive paramètres variables définis par la réf. 🎜🎜Pour utiliser ce composant dans la page, nous devons l'introduire dans vue_project/src/App.vue. Tout d'abord, supprimez le contenu original, puis ajoutez le code suivant : 🎜rrreee🎜Ici, nous importons le composant HelloWorld.vue que nous venons de créer et le référençons dans la page. 🎜🎜6. Développer une API back-end🎜Dans le projet Django, nous devons créer une API pour fournir des services back-end. Prenons l'exemple de la création d'une API utilisateur simple. 🎜🎜Tout d'abord, exécutez la commande suivante dans le répertoire django_project pour créer une application nommée users : 🎜rrreee🎜Créez un fichier nommé views.py dans le répertoire des utilisateurs et ajoutez le code suivant : 🎜rrreee🎜 Cette simple fonction d'affichage renvoie une réponse JSON avec les informations utilisateur. 🎜🎜Ensuite, ouvrez le fichier django_project/django_project/urls.py et ajoutez le code suivant : 🎜rrreee🎜Cet extrait de code mappe la fonction d'affichage get_users au chemin /api/users code >Haut. 🎜🎜7. Communication front-end et back-end🎜Pour que le front-end puisse accéder à l'API back-end, nous devons utiliser axios pour envoyer des requêtes HTTP. Revenez au fichier vue_project/src/components/HelloWorld.vue et ajoutez le code suivant dans la fonction <code>setup : 🎜rrreee🎜Cet extrait de code utilise axios pour envoyer une requête GET à /api /users code> et imprimez les données renvoyées. 🎜🎜8. Exécuter le projet🎜Enfin, il suffit d'exécuter les projets front-end et back-end séparément. 🎜🎜Exécutez la commande suivante dans le répertoire vue_project : 🎜rrreee🎜Exécutez la commande suivante dans le répertoire django_project : 🎜rrreee🎜Maintenant, ouvrez le navigateur et visitez <code>http://localhost:8080, si tout se passe bien, vous devriez pouvoir voir les données renvoyées par l'API backend dans la console. 🎜🎜Résumé : 🎜Cet article présente comment utiliser Vue3 et Django4 pour créer un projet full-stack complet, et partage des expériences pratiques et des exemples de code. Grâce à cette approche de développement full-stack, nous pouvons créer plus efficacement des applications Web avec une séparation front-end et back-end. J'espère que cet article pourra aider les développeurs qui apprennent le 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!