Explication détaillée d'exemples de création de projets de séparation front-end et back-end à l'aide de Vue.js et Django

Cet article présente principalement l'exemple de Django+Vue.js construisant un projet de séparation front-end et back-end. Il a une certaine valeur de référence. Si vous êtes intéressé, vous pouvez en apprendre davantage

Pendant ce temps. en écrivant cet article, je l'ai appris en passant. Parlons de la façon d'utiliser Markdown.

L'auteur est un salaud. J'ai tout appris tout seul, donc il n'y a pas de système ni d'apprentissage systématique. L’objectif principal ici est de séparer l’avant et l’arrière du projet.

Il est supposé que vous disposez déjà des fichiers Django et vue.js requis sur votre ordinateur. Sinon, faites défiler vers le bas pour voir le processus d'installation de vue.js. Django a déjà été écrit, je n'entrerai donc pas dans les détails.

1. Construisez normalement le processus de projet de séparation front-end et back-end

Créez un projet Django

Commande :

django-admin startproject ulb_manager

Structure :

├── manage.py
└── ulb_manager
  ├── __init__.py
  ├── settings.py
  ├── urls.py
  └── wsgi.py

2. Entrez le répertoire racine du projet et créez une application en tant que backend du projet

Commande :

cd ulb_manager
python manage.py startapp backend

La structure est plus basique que celle ci-dessus, avec un backend supplémentaire

Utilisez vue-cli pour créer une vue. Projet .js comme frontal du projet

Commande :

vue-init webpack frontend

Interface :

Nom du projet : (touche Entrée par défaut)

Description du projet : (Touche Entrée par défaut)

Auteur : (Entrez votre nom, n'hésitez pas)

... : (La valeur par défaut est oui et entrez la clé, je ne la comprends pas encore, je viens juste de commencer à entrer en contact avec elle), je n'ai pas trouvé cette chose en ligne, j'ai donc choisi la valeur par défaut ou Oui)

La structure a un frontend supplémentaire

Résumé de la structure :

Répertoire racine du projet Il y a deux nouveaux dossiers, un appelé backend et un appelé frontend, respectivement : backend une application de Django, frontend Vue.js projet

4. Utilisez webpack pour empaqueter le projet Vue.js

Commande :

cd frontend
npm install
npm run build

5. Utilisez la vue universelle de Django. TemplateView

dans urls.py dans le répertoire racine du projet (c'est-à-dire ulb_manager/urls .py) Créez le contrôleur de modèle le plus simple à l'aide de vues génériques.

Code :

urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^$',TemplateView.as_view(template_name="index.html")),
  #url(r'^api/',include('backend.urls', namespace='api'))
  #最后一行代码我注释掉，因为运行报错：Error:No module named 'backend.urls',暂时解决不掉，但是我运行的时候，注释掉这行代码，是能正常运行的。
]

6. Configurez le chemin de recherche du modèle du projet Django

Ouvrez settings.py (c'est-à-dire ulb_manager /settings .py) recherchez l'élément de configuration TEMPLATES et modifiez-le comme suit :

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    #'DIRS': [],
    'DIRS':['frontend/dist'],
    'APP_DIRS': True,
    'OPTIONS': {
      'context_processors': [
        'django.template.context_processors.debug',
        'django.template.context_processors.request',
        'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages',
      ],
    },
  },
]

PS : lors de l'apprentissage de Django auparavant, je voulais ajouter une application sous l'élément de configuration INSTALLED_APPS sous settings.py, j'ai donc ajouté 'backend' moi-même.

7. Configurez le chemin de recherche de fichiers statiques

Ouvrez settings.py (ulb_manager/settings.py), recherchez l'élément de configuration STATICFILES_DIRS, configurez-le comme suit :

# Add for vue.js
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, "frontend/dist/static"),
]

Sinon, ajoutez-le vous-même.

À ce stade, l'exécution du projet Django peut s'exécuter normalement. L'interface d'exécution normale est la suivante :

Interface d'exécution

2. Installez vue.js

S'il n'y a pas de vue.js sur votre ordinateur, voici le processus d'installation de vue.js :

1.node.js

vue.js L'environnement d'installation recommandé est node.js, j'ai donc d'abord installé node.js.

Connectez-vous au site officiel de node.js et téléchargez la dernière version v6.11.1.

2.npm

est intégré à Node.js et n'a pas besoin d'être installé.

3.cnpm

Entrez la commande dans la ligne de commande :

npm install -g cnpm --registry=http://registry.npm.taobao.org

Attendez la fin de l'installation.

4. Installez l'outil de création d'échafaudage vue-cli

Entrez la commande sur la ligne de commande :

npm install -g vue-cli

Attendez la fin de l'installation.

À ce stade, vue-cli a été installé.

PS : je ne sais pas encore comment écrire l’arborescence des répertoires du fichier dans Markdown.

Il a été modifié car il ne fonctionnera pas du tout s'il est copié exactement selon la version originale. J'ai écrit un cadre de base. Comme une mouche sans tête... (et je ne peux pas me permettre un hébergeur cloud... les novices n'ont pas besoin de l'acheter)

Markdown est très libre d'utilisation, et il peut également appeler certaines commandes HTML , ce qui est assez intéressant, même si je n'ai pas encore compris combien et quelles commandes peuvent être appelées...

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!