Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie wird das Architekturmodell der Trennung von Front-End und Back-End immer beliebter. Die Vorteile der Trennung von Front-End und Back-End liegen auf der Hand. Front-End und Back-End können unabhängig voneinander entwickelt werden, jeweils mit eigener Technologieauswahl und eigenem Entwicklungsrhythmus, was die Wartbarkeit und Skalierbarkeit des Systems verbessern kann. Als beliebtes Front-End-Framework kann Vue eine bessere Benutzererfahrung bieten. In diesem Artikel wird detailliert beschrieben, wie Sie mit Vue das Architekturmuster der Front-End- und Back-End-Trennung implementieren und die Schnittstellen-Docking-Methode demonstrieren.
1. Back-End-Implementierung
Für die Back-End-Implementierung können wir Sprachen und Frameworks auswählen, mit denen wir vertraut sind, z. B. das Spring-Framework von Java oder das Django-Framework von Python. Ich werde hier nicht zu sehr ins Detail gehen.
2. Front-End-Implementierung
Vue ist ein leichtes, benutzerfreundliches Front-End-Framework, das sich sehr gut zur Umsetzung des Architekturmusters der Front-End- und Back-End-Trennung eignet. Die Schritte zur Verwendung von Vue zur Erzielung einer Front-End- und Back-End-Trennung lauten wie folgt:
Zuerst müssen wir über das Befehlszeilentool ein neues Vue-Projekt erstellen. Hier verwenden wir das Vue-cli-Gerüst. Der Befehl lautet wie folgt:
npm install -g vue-cli // 全局安装Vue-cli vue init webpack my-project // 创建一个webpack项目
Konfigurieren Sie in der Konfigurationsdatei config/index.js das ProxyTable-Attribut auf die Adresse des Proxy-Backends:
module.exports = {
// ...
dev: {
// ...
proxyTable: {
'/api': {
target: 'http://localhost:8888', // 后端接口地址
changeOrigin: true // 是否跨域
}
}
}
}Die Kernidee von Vue ist die Komponentisierung. Wir können eine Front-End-Seite als Komponente definieren. Gleichzeitig wird die Schnittstelle über Ajax aufgerufen. Sie können die Vue-Ressourcenbibliothek hier verwenden:
<template>
<div>
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
export default {
name: 'UserList',
data () {
return {
users: []
}
},
created () {
Vue.http.get('/api/users')
.then(response => {
this.users = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>Im obigen Code definieren wir eine Komponente namens UserList und lösen das erstellte Ereignis aus, um die Schnittstelle aufzurufen, um die Benutzerliste abzurufen , und schließlich die Daten an die Seite binden. Es ist zu beachten, dass die hier aufgerufene Schnittstellenadresse „/api/users“ ist. Da wir den Proxy in der Konfigurationsdatei festgelegt haben, greifen wir tatsächlich auf die Backend-Adresse „http://localhost:8888/api“ /users zu.
Nachdem wir mit dem Schreiben des Front-End-Codes fertig sind, können wir das Vue-Projekt über den folgenden Befehl erstellen und verpacken:
npm run build
Der nach dem Packen generierte Ordner ist der Ordner, den wir bereitstellen müssen. Legen Sie diesen Ordner ab Stellen Sie es einfach wie gewohnt auf dem Webserver bereit.
3. Wie verbinde ich die Schnittstelle?
Schnittstellen-Docking ist der Kerninhalt der Front-End- und Back-End-Trennarchitektur. Im obigen Code beziehen wir den Zugriff auf die Backend-Adresse „http://localhost:8888/api/users“ ein. Tatsächlich gibt es zwei Methoden, um eine Verbindung zum Backend herzustellen.
In diesem Fall muss das Backend eine API-Schnittstelle bereitstellen, die das JSON-Format zurückgibt, und das Frontend ruft diese Schnittstelle über Ajax auf, um Daten abzurufen. Das vom Backend zurückgegebene Datenformat lautet wie folgt:
{
"code": 0,
"message": "",
"data": [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }]
}Im Front-End-Code müssen wir die vom Backend zurückgegebenen Daten analysieren und anzeigen:
Vue.http.get('/api/users')
.then(response => {
if (response.body.code === 0) {
this.users = response.body.data
} else {
alert(response.body.message)
}
})Wenn im obigen Code das vom Backend zurückgegebene Datencodeattribut vorliegt Backend ist 0. Dann werden die Listendaten auf der Seite angezeigt. Andernfalls wird ein Warnfeld angezeigt, das eine Fehlermeldung auslöst.
In diesem Fall muss unser Backend die RESTful API-Schnittstelle verfügbar machen. In einem benutzerverwalteten System können wir beispielsweise die folgende API-Schnittstelle haben:
| Schnittstellenname | Anfragemethode | Funktion | |
|---|---|---|---|
| /Benutzer | GET | Alle Benutzer abrufen + | |
| Kurz gesagt, das Architekturmuster der Front-End- und Back-End-Trennung durch Vue kann die Wartbarkeit und Skalierbarkeit des Systems erheblich verbessern. In diesem Artikel wird detailliert beschrieben, wie Vue verwendet wird, um das Architekturmuster der Front-End- und Back-End-Trennung aus drei Aspekten zu realisieren: Implementierungsprinzip, Front-End-Code-Implementierung und Schnittstellen-Docking. Gleichzeitig ist zu beachten, dass Sie im eigentlichen Entwicklungsprozess eine Feinabstimmung und Transformation entsprechend Ihrer tatsächlichen Situation vornehmen müssen, um eine schönere Front-End- und Back-End-Trennarchitektur zu erreichen. |
