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
Sollte ich JQuery aufgeben?
Inhaltsverzeichnis Vorwort Was soll verwendet wer...
JavaScript-Tipps zur Verbesserung Ihrer Programmierkenntnisse
Inhaltsverzeichnis 1. Filtern Sie eindeutige Wert...
UTF-8- und GB2312-Webkodierung
In letzter Zeit haben mich viele Studenten zur Ko...
Super ausführliches Tutorial zur Installation und Bereitstellung von mysql-canal-rabbitmq
Inhaltsverzeichnis 1.1. MySQL-Binlog aktivieren 1...
So installieren Sie CentOS8 in VMware12 (Tutorial zur Installation von CentOS8 in einer virtuellen VM-Maschine)
CentOS8 wurde vor ein paar Tagen veröffentlicht. ...
Verschönerung der Dualsystem-Boot-Schnittstelle für Win10 + Ubuntu20.04 LTS
Effektanzeige Die eingebaute Boot-Oberfläche ist ...
JavaScript-Selektorfunktionen querySelector und querySelectorAll
Inhaltsverzeichnis 1. querySelector fragt ein ein...
Vue einfache Implementierung einer Plattenspielerlotterie
In diesem Artikel wird der spezifische Code von V...
Detaillierte Erklärung zur Installation von PHP7 unter Linux
Wie installiere ich PHP7 unter Linux? 1. Installi...
Nach der Installation von Navicat in MySQL wird 2059 angezeigt: Authentifizierungs-Plugin und Docker für lokale virtuelle Maschinen sowie Remote-Link-Server
Vorwort Nach der Installation von MySQL und Navic...
So legen Sie den Stil geordneter und ungeordneter Listenelemente in CSS fest
In einer ungeordneten Liste ul>li ist das Symb...
Detaillierte Erklärung der vier Arten von MySQL-Verbindungen und Multi-Table-Abfragen
Inhaltsverzeichnis MySQL Inner Join, Left Join, R...
Notieren Sie einen Fehlerbehebungsbericht für die hohe CPU-Auslastung des Tomcat-Prozesses
Dieser Artikel zeichnet hauptsächlich einen Tomca...
Detaillierte Erklärung des Flex-Layouts in CSS
Flex-Layout wird auch elastisches Layout genannt....
Fehlerbehebung bei hohem Speicherverbrauch von NodeJs, tatsächlicher Kampfrekord
Vorwort Dies ist eine Untersuchung, die durch die...