Construire une application full-stack : guide de développement de projet Vue3+Django4

Création d'applications full-stack : guide de développement de projets Vue3+Django4

À l'ère d'Internet d'aujourd'hui, le développement full-stack est devenu un domaine de préoccupation croissant. Les développeurs full-stack maîtrisent non seulement la technologie front-end, mais sont également familiers avec le développement back-end. Cet article expliquera comment utiliser Vue3 et Django4 pour créer une application full-stack et fournira quelques exemples de code pour aider les lecteurs à démarrer rapidement.

Tout d’abord, présentons brièvement Vue3 et Django4.

Vue3 est la dernière version du framework Vue.js. Il a une vitesse de rendu plus rapide, une taille plus petite et une meilleure expérience de développement. Vue3 introduit l'API Composition afin que la logique des composants puisse être mieux organisée et réutilisée. Dans le même temps, Vue3 offre également une meilleure prise en charge de TypeScript, rendant le code plus robuste et plus maintenable.

Django4 est un framework Web avancé écrit en langage Python. Il suit le modèle de conception MTV (model-template-view) et fournit de puissantes fonctions d'exploitation de base de données et de gestion de routage. Les fonctionnalités de Django4 incluent une bonne évolutivité, une haute sécurité et une multitude d'outils de développement et de plug-ins.

Ci-dessous, nous expliquerons comment utiliser Vue3 et Django4 pour créer une application full-stack simple. Notre application full-stack mettra en œuvre un système de gestion des utilisateurs, comprenant des fonctions d'enregistrement, de connexion et de gestion des informations personnelles.

Tout d'abord, nous devons créer un projet Django et configurer la base de données. Supposons que notre projet s'appelle "UserManagement" et que la base de données utilise MySQL. Vous pouvez exécuter les commandes suivantes pour créer et configurer :

$ django-admin startproject UserManagement
$ cd UserManagement
$ python manage.py migrate

Ensuite, nous devons créer une application Django pour gérer la logique liée à l'utilisateur. Vous pouvez exécuter la commande suivante pour créer une application nommée "user":

$ python manage.py startapp user

Après avoir créé l'application, nous devons enregistrer l'application dans le fichier de configuration de Django. Ouvrez le fichier UserManagement/settings.py et ajoutez le nom de l'application à la liste INSTALLED_APPS : UserManagement/settings.py文件，将应用名添加到INSTALLED_APPS列表中：

INSTALLED_APPS = [
    ...
    'user',
    ...
]

然后，我们需要创建用户相关的数据模型。在user/models.py文件中，定义一个名为User的模型，包括用户名、密码等字段：

from django.db import models

class User(models.Model):
    username = models.CharField(max_length=120)
    password = models.CharField(max_length=120)

接下来，我们需要创建用户相关的视图。在user/views.py文件中，添加以下代码：

from django.shortcuts import render
from django.http import JsonResponse

def register(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')

        # 在这里进行用户注册逻辑

        return JsonResponse({'message': '注册成功'})
    else:
        return render(request, 'register.html')

def login(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')

        # 在这里进行用户登录逻辑

        return JsonResponse({'message': '登录成功'})
    else:
        return render(request, 'login.html')

def profile(request):
    # 在这里进行用户个人信息管理逻辑

    return render(request, 'profile.html')

在上面的代码中，我们定义了三个视图函数：register用于处理用户注册逻辑，login用于处理用户登录逻辑，profile用于处理用户个人信息管理逻辑。

接下来，我们需要创建一些Vue组件来处理前端的逻辑。在Vue3中，我们可以使用createApp函数来创建一个应用实例，并使用setup函数来定义组件的逻辑。在main.js文件中，添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

然后，在src目录下创建一个名为App.vue的文件，添加以下代码：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
}
</script>

以上的代码定义了一个根组件，它包含了一个名为router-view的组件，用于显示不同的页面。

接下来，我们需要使用Vue Router来管理前端路由。执行以下命令来安装Vue Router：

$ npm install vue-router@4

然后，在src目录下创建一个名为router.js的文件，添加以下代码：

import { createRouter, createWebHistory } from 'vue-router'
import Register from './views/Register.vue'
import Login from './views/Login.vue'
import Profile from './views/Profile.vue'

const routes = [
  { path: '/register', component: Register },
  { path: '/login', component: Login },
  { path: '/profile', component: Profile },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

接下来，我们需要创建一些视图组件来处理具体页面的逻辑。在src/views目录下，分别创建Register.vue、Login.vue和Profile.vue文件，分别用于处理用户注册、登录和个人信息管理页面的逻辑。

在具体的视图组件中，我们可以使用Axios来发送HTTP请求到后端API。执行以下命令来安装Axios：

$ npm install axios

在具体的视图组件中，可以使用以下代码发送POST请求到后端API：

import axios from 'axios'

axios.post('/api/register', {
  username: 'Alice',
  password: '123456'
})
.then(response => {
  console.log(response.data.message)
})
.catch(error => {
  console.error(error)
})

以上的代码发送了一个用户注册的请求，并在控制台中打印出返回的消息。

最后，我们需要将Vue应用实例和路由器挂载到DOM元素上。在main.js文件中，修改如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

在上面的代码中，我们使用app.use(router)来安装Vue Router插件，并使用app.mount('#app')来将Vue应用实例挂载到名为apprrreee

Ensuite, nous devons créer un modèle de données lié à l'utilisateur. Dans le fichier user/models.py, définissez un modèle nommé User, comprenant le nom d'utilisateur, le mot de passe et d'autres champs :

rrreee

Ensuite, nous devons créer une vue relative à l'utilisateur. Dans le fichier user/views.py, ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous définissons trois fonctions d'affichage : register est utilisé pour gérer l'enregistrement des utilisateurs. Logique , login est utilisé pour traiter la logique de connexion de l'utilisateur et profile est utilisé pour traiter la logique de gestion des informations personnelles de l'utilisateur. 🎜🎜Ensuite, nous devons créer des composants Vue pour gérer la logique frontale. Dans Vue3, nous pouvons utiliser la fonction createApp pour créer une instance d'application, et utiliser la fonction setup pour définir la logique du composant. Dans le fichier main.js, ajoutez le code suivant : 🎜rrreee🎜Ensuite, créez un fichier nommé App.vue dans le répertoire src, ajoutez le code suivant : 🎜rrreee🎜Le code ci-dessus définit un composant racine, qui contient un composant nommé router-view pour afficher différentes pages. 🎜🎜Ensuite, nous devons utiliser Vue Router pour gérer le routage front-end. Exécutez la commande suivante pour installer Vue Router : 🎜rrreee🎜 Ensuite, créez un fichier nommé router.js dans le répertoire src et ajoutez le code suivant : 🎜rrreee🎜Next , nous devons créer des composants de vue pour gérer la logique de pages spécifiques. Dans le répertoire src/views, créez respectivement les fichiers Register.vue, Login.vue et Profile.vue. Utilisé pour traiter respectivement la logique des pages d'enregistrement des utilisateurs, de connexion et de gestion des informations personnelles. 🎜🎜Dans le composant de vue spécifique, nous pouvons utiliser Axios pour envoyer des requêtes HTTP à l'API backend. Exécutez la commande suivante pour installer Axios : 🎜rrreee🎜Dans le composant de vue spécifique, vous pouvez utiliser le code suivant pour envoyer une requête POST à ​​l'API backend : 🎜rrreee🎜Le code ci-dessus envoie une demande d'enregistrement d'utilisateur et imprime le retour dans l'actualité de la console. 🎜🎜Enfin, nous devons monter l'instance d'application Vue et le routeur sur l'élément DOM. Dans le fichier main.js, modifiez-le comme suit : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons app.use(router) pour installer le plug-in Vue Router , et utilisez app.mount('#app') pour monter l'instance d'application Vue sur l'élément DOM nommé app. 🎜🎜Ci-dessus sont les étapes générales pour créer une application full-stack à l'aide de Vue3 et Django4. Les lecteurs peuvent encore améliorer et optimiser cette application en fonction de leurs propres besoins et préférences. J'espère que cet article pourra aider les lecteurs à se lancer rapidement dans 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!