Wie kann man mit Vue eine Front-End- und Back-End-Trennung sowie Schnittstellen-Docking erreichen?

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:

1. Erstellen Sie ein Vue-Projekt

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项目

2. Ändern Sie die Konfigurationsdatei

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      // 是否跨域
      }
    }
  }
}

3. Schreiben Sie die Front-End-Seite und die Schnittstellenaufrufe

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.

4. Erstellen und bereitstellen

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.

1. Andocken des JSON-Datenformats

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.

2. Restful Interface Docking

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:

// 获取所有用户
Vue.http.get('/api/users')
    .then(response => {
        // ...
    })

// 获取指定用户信息
Vue.http.get('/api/users/' + userId)
    .then(response => {
        // ...
    })

// 新建一个用户
let data = { name: '张三', age: 20 }
Vue.http.post('/api/users', data)
    .then(response => {
        // ...
    })

// 更新指定用户信息
let data = { name: '李四', age: 30 }
Vue.http.patch('/api/users/' + userId, data)
    .then(response => {
        // ...
    })

// 删除指定用户
Vue.http.delete('/api/users/' + userId)
    .then(response => {
        // ...
    })

Das obige ist der detaillierte Inhalt vonWie kann man mit Vue eine Front-End- und Back-End-Trennung sowie Schnittstellen-Docking erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!