Maison > Article > interface Web > Tutoriel pratique : Nouvelle pratique technique Vue3+Django4

Tutoriel pratique : Nouvelle pratique technique Vue3+Django4

WBOYoriginal: 2023-09-09 08:52:42892parcourir

Introduction :
Avec le développement continu de la technologie front-end, Vue.js est devenu l'un des frameworks front-end les plus populaires. En tant que framework Web Python puissant et flexible, Django est également privilégié par les développeurs. Cet article vous amènera à explorer comment combiner Vue3 et Django4 pour réaliser une nouvelle pratique technique.

1. Configuration de l'environnement :
Tout d'abord, nous devons configurer un environnement de développement. Assurez-vous que votre ordinateur dispose des dernières versions de Node.js et Python installées. Installez ensuite Vue CLI et Django via la commande suivante :

Installez Vue CLI :
```
npm install -g @vue/cli
```
Créez un projet Vue :
```
vue create vue-django-project
```
Cela créera un projet Vue appelé vue-django-project.
Installer Django :
```
pip install Django
```

2. Créer un projet Django :
Ensuite, nous créerons un projet Django et y intégrerons le projet Vue.

Créer un projet Django :
```
django-admin startproject django_project
```
Cela créera un projet Django appelé django_project.
Créer l'application Django :
```
cd django_project
python manage.py startapp vueapp
```
Cela créera une application Django appelée vueapp.
Configurez le projet Django :
Ouvrez le fichier django_project/settings.py et ajoutez vueapp à INSTALLED_APPS :
```
INSTALLED_APPS = [
 ...
 'vueapp',
]
```

Ensuite, ajoutez l'instruction suivante dans les paramètres de la base de données :

DATABASES = {
    'default': {
        ...
        'CONN_MAX_AGE': 600,
    }
}

Créez la vue Django :
Dans Dans vueapp/views.py, ajoutez le code suivant :
```
from django.shortcuts import render

def index(request):
 return render(request, 'vueapp/index.html')
```
Cela créera une vue nommée index.
Créer le routage URL Django :
Dans le répertoire vueapp, créez le fichier urls.py et ajoutez le code suivant :
```
from django.urls import path
from . import views

urlpatterns = [
 path('', views.index, name='index'),
]
```

Puis, dans django_project/urls.py, importez vueapp.urls et ajoutez-le dans urlpatterns :

from django.urls import include, path

urlpatterns = [
    ...
    path('', include('vueapp.urls')),
]

3. Créer un composant Vue :
Maintenant, nous allons créer le composant Vue et l'intégrer dans la vue Django.

Créer un composant Vue :
Dans le répertoire vue-django-project/src/components, créez un composant Vue nommé Exemple.vue, le code est le suivant :

<template>
  <div>
 <h1>{{ title }}</h1>
 <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
 return {
   title: 'Vue3+Django4全新技术实践',
   content: '这是一个示例文本。',
 };
  },
};
</script>

Compilez le projet Vue :
Dans vue -django -project directory, exécutez la commande suivante pour compiler le projet Vue :
```
npm run build
```
Cela générera un répertoire dist contenant le code Vue compilé.
Configurez les fichiers statiques de Django :
A la fin de django_project/settings.py, ajoutez le code suivant :
```
STATICFILES_DIRS = [
 os.path.join(BASE_DIR, 'vue-django-project/dist'),
]

STATIC_URL = '/static/'
```

4. Intégrez Vue dans la vue Django :
Maintenant, nous allons intégrer le composant Vue dans la vue Django. Vue Django et accessible via URL.

Créer un modèle Django :
Dans le répertoire vueapp, créez un modèle Django nommé index.html, le code est le suivant :

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3+Django4全新技术实践</title>
  <link href="{% static 'css/app.css' %}" rel="stylesheet">
</head>
<body>
  <div id="app">
 <example></example>
  </div>
  <script src="{% static 'js/app.js' %}"></script>
</body>
</html>

Mettre à jour la vue Django :
Dans la vue index de vueapp/views.py, modifier Le premier paramètre de la méthode de rendu est vueapp/index.html :
```
def index(request):
 return render(request, 'vueapp/index.html')
```

5. Exécutez le projet :
Enfin, nous démarrerons le serveur de développement Django et accéderons au projet via l'URL.

Démarrez le serveur de développement Django :
Dans le répertoire django_project, exécutez la commande suivante pour démarrer le serveur de développement Django :
```
python manage.py runserver
```
Accédez au projet :
Entrez http://localhost:8000/ dans le navigateur pour accéder le projet.

Conclusion :
Grâce à la pratique de cet article, nous avons combiné avec succès Vue3 et Django4 et mis en œuvre une nouvelle pratique technique. Grâce à la puissance de Vue3 et à la flexibilité de Django4, nous pouvons développer des applications Web plus efficaces et plus élégantes. J'espère que cet article sera utile à tout le monde et vous aidera à continuer à explorer et à innover dans les domaines de Vue et Django !

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!

Python django node.js vue.js html 前端框架 JS 数据库 http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprenez l'API combinée dans Vue 3 pour mieux organiser et gérer le code des composantsArticle suivant：Apprenez l'API combinée dans Vue 3 pour mieux organiser et gérer le code des composants

Articles Liés

Voir plus