Beispielcode zur Trennung von Front-End und Back-End mit FastApi+Vue+LayUI
Vorwort Bei der bisherigen API-Entwicklung ist uns dies mit FastApi gut gelungen. In der Praxis empfehlen wir jedoch normalerweise, Front-End- und Back-End-Projekte zu trennen. Heute werden wir FastApi+Vue+LayUI verwenden, um eine Demo mit Trennung von Front-End und Back-End zu erstellen. Projektdesign hinteres Ende Auf dem Backend verwenden wir FastApi, um eine Route in der neuen Testansicht zu definieren und sie in der App zu registrieren. Wir definieren auch eine Schnittstelle in der Testansicht, um das Lesen von Daten aus der Datenbank zu simulieren, damit das Frontend sie aufrufen und rendern kann. test.py
von fastapi importiere FastAPI, Depends, Header, HTTPException, APIRouter
von fastapi.param_functions importiere Body
von starlette.requests importiere Anfrage
von starlette.templating importiere Jinja2Templates
vom Starlette Importstatus
Uvicorn importieren
von Deta importiere Deta
von fastapi.responses importiere StreamingResponse
von fastapi.responses importiere JSONResponse
# Instanziieren Sie den Router router = APIRouter()
Vorlagen = Jinja2Templates('Vorlagen')
# Beachten Sie, dass die Ansicht den Router verwendet, um die Anforderungsmethode und den URI zu deklarieren
@router.get('/info')
def Benutzerliste():
# Antwortdatenelemente von Vue = [
{'id':'1','name':'phyger'},
{'id':'2','name':'fliegen'},
{'id':'3','name':'enheng'},
]
JSON-Antwort zurückgeben (Inhalt=Elemente)
@router.get('/')
def willkommen():
return "Hier ist die Testroute"
'''
Tatsächlich benötigt home.html hier auch den Front-End-Dienst, um es dem Benutzer anzuzeigen.
Zur Vereinfachung der Demonstration haben wir den Front-End-Server jedoch nicht gestartet und den Front-End-Code direkt in home.html geschrieben.
Wenn der Benutzer /check anfordert, fordert der Front-End-Code tatsächlich die /info-Schnittstelle an, um Daten zu erhalten.
Dies ermöglicht die Datenwiedergabe auf der Front-End-Seite.
'''
@router.get('/prüfen')
def home(Anfrage:Anfrage):
Rückgabevorlagen.TemplateResponse(name='home.html',context={'request':request,}) Frontend Auf der Vorderseite importieren wir die JS- und CSS-CDN-Ressourcen von Vue, LayUI und Axios direkt. Während der Mount-Phase der Vue-Instanz verwenden wir Axios, um die Backend-Schnittstelle aufzurufen und Daten abzurufen, und verwenden den LayUI-Stil, um die Tabellenelemente zu verschönern.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Importiere layui.css -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" rel="externes Nofollow" />
<!-- Importiere layui.js -->
<script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<title>Startseite</title>
</Kopf>
<Text>
<div id="app">
<Tabelle Klasse="layui-Tabelle">
<tr v-for="p in infos">
<td>[[ p.id ]]</td>
<td>[[ Seitenname ]]</td>
</tr>
</Tabelle>
</div>
<table id="test" class="layui-table"></table>
<Skripttyp="text/javascript">
const Vapp = Vue.createApp({
Daten() {
zurückkehren {
Infos: [{id:1,name:'phyger'}],
Info: „Hallo Vue …“
}
},
montiert() {
dies.showinfo();
},
Methoden: {
zeigeinfo(){
axios.get('/test/info')
.dann(Antwort=>{
diese.infos=Antwort.Daten;
console.log(Antwort);
konsole.log(diese.infos);
})
,err=>{
console.log(fehler);
};
},
},
})
Vapp.config.compilerOptions.delimiters = ['[[', ']]']
Vapp.mount('#app')
</Skript>
</body>
</html> Ausführen des ProjektsStarten Sie den FastApi-Backend-Server und greifen Sie auf die /test/check-Schnittstelle zu.
Fragen und Antworten F: Warum erscheint bei der Anforderung der /info-Schnittstelle immer eine temporäre Umleitung?
A: Der Grund dafür ist, dass das Format des URI nicht standardisiert war, als wir die FastApi-Schnittstelle definiert haben. Das Ende des URI musste kein / haben. Wenn Sie der Schnittstelle ein / hinzufügen und wir einen Browser verwenden, um auf den URI zuzugreifen, ignoriert der Browser das Ende /. FastApi leitet die Browseranforderung ohne / intern an die Ansichtsfunktion weiter, die wir mit einem / definiert haben. Dies ist das Ende dieses Artikels über den Beispielcode für FastApi+Vue+LayUI zur Realisierung der Frontend- und Backend-Trennung. Weitere verwandte Inhalte zur Frontend- und Backend-Trennung von FastApi+Vue+LayUI finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: HTML Einführungstutorial HTML Tag Symbole schnell beherrschen
Artikel empfehlen
js implementiert einen einfachen Countdown
In diesem Artikelbeispiel wird der spezifische Co...
So legen Sie in Linux eine feste IP fest (getestet und effektiv)
Öffnen Sie zunächst die virtuelle Maschine Öffnen...
Das Problem, dass beim Verbinden mit der MySQL-Datenbank in Idea chinesische Zeichen verstümmelt erscheinen
Problem: Bei Verwendung von JDBC zur Verbindung m...
Lösung zum Anwenden von CSS3-Transformationen auf Hintergrundbilder
CSS-Transformationen sind zwar cool, wurden aber ...
Beschreibung der Schreibmethode des Foreach-Arrays in Vue und des Traversal-Arrays in js
So schreiben Sie ein Vue-foreach-Array und durchl...
CentOS 6.5 Installations-Tutorial zu MySQL 5.7
1. Neue Funktionen MySQL 5.7 ist ein spannender M...
Detaillierte Erklärung zur korrekten Verwendung der if-Funktion in MySQL
Für das, was ich heute schreiben werde, lief das ...
Detaillierte Erklärung der Listendarstellung von Vue
Inhaltsverzeichnis 1. v-for: Array-Inhalte durchl...
Analyse von Beispielen für die Verwendung von Anti-Shake und Throttling in Vue-Komponenten
Seien Sie vorsichtig, wenn Sie auf Ereignisse ach...
Beispiel für die Anpassung von rem an mobile Geräte
Vorwort Überprüfung und Zusammenfassung von REM-A...
Reagieren Sie auf die Verarbeitung von Fehlergrenzkomponenten
Dies ist der Inhalt von React 16. Es ist nicht di...
W3C Tutorial (4): W3C XHTML Aktivitäten
HTML ist eine Hybridsprache, die zum Veröffentlic...
Detaillierte Erklärung zur Verwendung des MySQL-Parameters sql_safe_updates in der Produktionsumgebung
Vorwort Im Falle eines Anwendungsfehlers oder ein...
MySQL-Sortierung nach konventioneller Sortierung, benutzerdefinierter Sortierung und Sortierung nach chinesischen Pinyin-Buchstaben
Normale MySQL-Sortierung, benutzerdefinierte Sort...
Detaillierte Erklärung gängiger Befehle in MySQL 8.0+
Aktivieren Sie den Fernzugriff Aktivieren Sie die...