Detaillierte Erläuterung von Beispielen für die Erstellung von Front-End- und Back-End-Trennungsprojekten mit Vue.js und Django

In diesem Artikel wird hauptsächlich das Beispiel des Aufbaus eines Front-End- und Back-End-Projekts vorgestellt. Wenn Sie interessiert sind, können Sie mehr darüber erfahren Beim Schreiben dieses Artikels habe ich es übrigens gelernt. Lassen Sie uns darüber sprechen, wie man Markdown verwendet.

Der Autor ist ein Drecksack. Ich habe alles selbst gelernt, es gibt also kein System oder systematisches Lernen. Der Hauptzweck besteht hier darin, das vordere und hintere Ende des Projekts zu trennen.

Es wird davon ausgegangen, dass Sie bereits über die erforderlichen Django- und vue.js-Dateien auf Ihrem Computer verfügen. Wenn nicht, scrollen Sie nach unten, um den Installationsprozess von vue.js anzuzeigen. Über Django wurde schon früher geschrieben, daher werde ich nicht näher darauf eingehen.

1. Erstellen Sie normalerweise den Front-End- und Back-End-Trennprojektprozess

1 >

Befehl:

Struktur:

django-admin startproject ulb_manager

2. Geben Sie das Projektstammverzeichnis ein und erstellen Sie eine App als Projekt-Backend

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

Befehl:

Die Struktur ist einfacher als die obige, mit einem zusätzlichen Backend

cd ulb_manager
python manage.py startapp backend

3. Verwenden Sie vue-cli, um ein Vue zu erstellen .js-Projekt als Projekt-Frontend

Befehl:

Schnittstelle:

vue-init webpack frontend

Projektname: (Standard-Eingabetaste)

Projektbeschreibung: (Standard-Eingabetaste)

Autor: (Geben Sie Ihren Namen ein, zögern Sie nicht)

...: (Standard ist Ja und Eingabetaste, ich verstehe es noch nicht, ich habe gerade erst angefangen, damit in Kontakt zu treten), ich habe dieses Ding nicht online gefunden, also habe ich die Standardeinstellung oder Ja gewählt)

Die Struktur hat ein zusätzliches Frontend

Strukturzusammenfassung:

Projektstammverzeichnis Es gibt zwei neue Ordner, einen namens Backend und einen namens Frontend: Backend eine App von Django, Frontend Vue.js Projekt

4. Verwenden Sie Webpack, um das Vue.js-Projekt zu packen

Befehl:

5. Verwenden Sie die universelle Ansicht von Django TemplateView

cd frontend
npm install
npm run build

in urls.py im Projektstammverzeichnis (d. h. ulb_manager/urls .py) Erstellen Sie den einfachsten Template-Controller mit generischen Ansichten.

Code:

6. Konfigurieren Sie den Vorlagensuchpfad des Django-Projekts

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',暂时解决不掉，但是我运行的时候，注释掉这行代码，是能正常运行的。
]

Öffnen Sie „settings.py“ (d. h. ulb_manager /settings .py) Suchen Sie das Konfigurationselement TEMPLATES und ändern Sie es wie folgt:

PS: Als ich zuvor Django gelernt habe, wollte ich eine App unter dem Konfigurationselement INSTALLED_APPS unter Settings.py hinzufügen, also habe ich hinzugefügt 'Backend' selbst.

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

7. Statischen Dateisuchpfad konfigurieren

Einstellungen.py (ulb_manager/settings.py) öffnen, das Konfigurationselement STATICFILES_DIRS suchen und wie folgt konfigurieren:

Wenn nicht, fügen Sie es selbst hinzu.

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

Zu diesem Zeitpunkt kann das Django-Projekt normal ausgeführt werden. Die normale Laufschnittstelle ist wie folgt:

Laufschnittstelle

2. Installieren Sie vue.js

Wenn auf Ihrem Computer kein vue.js vorhanden ist, erfolgt die Installation von vue.js wie folgt:

1.node.js

vue.js Die empfohlene Installationsumgebung ist node.js, daher habe ich zuerst node.js installiert.

Melden Sie sich auf der offiziellen Website von node.js an und laden Sie die neueste Version v6.11.1 herunter.

2.npm

ist in Node.js integriert und muss nicht installiert werden.

3.cnpm

Geben Sie den Befehl in die Befehlszeile ein:

Warten Sie, bis die Installation abgeschlossen ist.

4. Installieren Sie das vue-cli-Gerüstbau-Tool

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

Geben Sie den Befehl in die Befehlszeile ein:

Warten Sie, bis die Installation abgeschlossen ist.

Zu diesem Zeitpunkt wurde vue-cli installiert.

npm install -g vue-cli

PS: Ich weiß noch nicht, wie ich die Verzeichnisbaumstruktur der Datei in Markdown schreiben soll.

Es wurde geändert, da es überhaupt nicht funktioniert, wenn es genau entsprechend der Originalversion kopiert wird. Habe ein Grundgerüst geschrieben. Wie eine kopflose Fliege ... (und ich kann mir keinen Cloud-Host leisten ... Anfänger müssen ihn nicht kaufen)

Markdown fühlt sich sehr frei an und kann auch einige HTML-Befehle aufrufen , was ziemlich interessant ist, obwohl ich noch nicht herausgefunden habe, wie viele und welche Befehle aufgerufen werden können...

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für die Erstellung von Front-End- und Back-End-Trennungsprojekten mit Vue.js und Django. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!