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
Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung
1. Aktivieren Sie den Remotezugriff auf den Docke...
So beseitigen Sie den zusätzlichen Leerraum am unteren Rand der erstellten Webseite beim Surfen
Beim Erstellen von HTML-Webseiten mit Dreamweaver...
Testfragen und Referenzantworten zum Thema Webdesign und Produktion
<br />Test zu Webdesign und -produktion, Tei...
So erhöhen Sie die Ladegeschwindigkeit von HTML-Seiten
(1) Reduzieren Sie HTTP-Anfragen. (Ressourcendate...
So zeigen Sie alle laufenden Prozesse in Linux an
Sie können den Befehl ps verwenden. Es kann relev...
Anfänger lernen einige HTML-Tags (1)
Anfänger können HTML lernen, indem sie einige HTM...
So ändern Sie das Root-Passwort in MySQL 5.7
Ab MySQL 5.7 wurden viele Sicherheitsupdates hinz...
Ein kurzer Vortrag über das Klonen von JavaScript
Inhaltsverzeichnis 1. Oberflächliches Klonen 2. T...
Detaillierte Erläuterung von MySQL-Abfragebeispielen für mehrere Tabellen [Linkabfrage, Unterabfrage usw.]
Dieser Artikel beschreibt MySQL-Mehrtabellenabfra...
Grafisches Tutorial zur Installation und Konfiguration komprimierter Pakete von MySQL 5.7.17
Da es im Internet nur wenige und unzureichende In...
So wechseln Sie in Linux effizient zwischen Verzeichnissen
Wenn es um den Verzeichniswechsel unter Linux geh...
17 hervorragende Webdesigns, sorgfältig von Startups entwickelt
Startups überraschen uns oft mit ihren unkonventi...
Probleme mit der Rancher-Bereitstellung und dem Importieren von K8S-Clustern
Die Rancher-Bereitstellung kann über drei Archite...
Beispieloperation MySQL Kurzlink
So richten Sie einen MySQL-Kurzlink ein 1. Überpr...
Verwenden Sie das Docker-Buildkit, um ein Docker-Image zu erstellen, das auf dem Raspberry Pi verwendet werden kann
Docker-Installation curl -fsSL https://get.docker...