Tutoriel pratique : Nouvelle pratique technique Vue3+Django4-Voir.js-php.cn

Tutoriel pratique : Nouvelle pratique technique Vue3+Django4

WBOY

Libérer： 2023-09-09 08:52:42

original

1024 Les gens l'ont consulté

Tutoriel pratique : Nouvelle pratique technique Vue3+Django4

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
```
Copier après la connexion
Créez un projet Vue :
```
vue create vue-django-project
```
Copier après la connexion
Cela créera un projet Vue appelé vue-django-project.
Installer Django :
```
pip install Django
```
Copier après la connexion

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
```
Copier après la connexion
Cela créera un projet Django appelé django_project.
Créer l'application Django :
```
cd django_project
python manage.py startapp vueapp
```
Copier après la connexion
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',
]
```
Copier après la connexion

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

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

Copier après la connexion

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')
```
Copier après la connexion
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'),
]
```
Copier après la connexion

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')),
]

Copier après la connexion

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>

Copier après la connexion

Compilez le projet Vue :
Dans vue -django -project directory, exécutez la commande suivante pour compiler le projet Vue :
```
npm run build
```
Copier après la connexion
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/'
```
Copier après la connexion

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>

Copier après la connexion

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')
```
Copier après la connexion

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
```
Copier après la connexion
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!