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

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

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!