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
Bearbeiten Sie zwei Datenspalten als neue Spalten in SQL
Wie unten dargestellt: wähle a1,a2,a1+a2 a,a1*a2 ...
Detaillierte Erläuterung der Vue-Projektverpackung
Inhaltsverzeichnis 1. Zugehörige Konfiguration Fa...
MySQL Binlog-Datenwiederherstellung: Detaillierte Erklärung zum versehentlichen Löschen einer Datenbank
Wiederherstellung der MySQL Bin-Protokolldaten: v...
Eine kurze Erläuterung zum eleganten Löschen großer Tabellen in MySQL
Inhaltsverzeichnis 1. Truncate-Operation 1.1 Welc...
MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)
Einige MySQL-Tabellen können doppelte Datensätze ...
Eine dauerhafte Lösung für MySQLs Unfähigkeit, Chinesisch zu erkennen
In den meisten Fällen unterstützt MySQL Chinesisc...
Lösung für das Problem der MySQL-Transaktionsparallelität
Ich bin während der Entwicklung auf ein solches P...
Löschen Sie den Image-Vorgang von „none“ in Docker-Images
Da ich normalerweise den Befehl „Docker Build“ ve...
MySQL vollständig deinstallieren. Persönlicher Test!
MySQL sauber deinstallieren. Persönlich getestet,...
Detaillierte Erläuterung des Lese-Commits der MySQL-Transaktionsisolationsebene
MySQL-Transaktionsisolationsebene anzeigen mysql&...
Ubuntu 18.0.4 installiert MySQL und behebt FEHLER 1698 (28000): Zugriff für Benutzer ''root''@''localhost'' verweigert
Vorwort Ich habe vor Kurzem Linux gelernt und dan...
Vue2.x-Reaktionsfähigkeit – einfache Erklärung und Beispiele
1. Überprüfen Sie die Vue-Responsive-Nutzung Die...
Fehler bei der Eingabe chinesischer Zeichen im Flex-Programm Firefox
In niedrigeren Versionen von Firefox können keine ...
Detailliertes Tutorial zum Abrufen der Oracle 11g-Imagekonfiguration über Docker
Ohne weitere Umschweife Beginnen Sie mit der Aufz...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Win10
In diesem Artikel werden die Installations- und K...