Vue を使用してフロントエンドとバックエンドの分離とインターフェイスのドッキングを実現するにはどうすればよいですか?-Vue.js-php.cn

Vue を使用してフロントエンドとバックエンドの分離とインターフェイスのドッキングを実現するにはどうすればよいですか?

WBOY

リリース： 2023-06-27 10:09:48

オリジナル

7961 人が閲覧しました

フロントエンドテクノロジの継続的な開発に伴い、フロントエンドとバックエンドを分離するアーキテクチャモデルがますます一般的になってきています。フロントエンドとバックエンドを分離することの利点は明らかで、フロントエンドとバックエンドをそれぞれ独自のテクノロジー選択と開発リズムで独立して開発できるため、システムの保守性と拡張性が向上します。人気のあるフロントエンドフレームワークとして、Vue はより優れたユーザーエクスペリエンスをもたらします。この記事では、Vue を使用してフロントエンドとバックエンドの分離のアーキテクチャパターンを実装する方法を詳しく紹介し、インターフェイスのドッキング方法を示します。

1. バックエンド実装

バックエンド実装には、Java の Spring フレームワークや Python の Django フレームワークなど、使い慣れた言語とフレームワークを選択できます。ここではあまり詳しく説明しません。

2. フロントエンドの実装

Vue は軽量で使いやすいフロントエンドフレームワークで、フロントエンドとバックエンドのアーキテクチャパターンを実現するのに非常に適しています。分離。 Vue を使用してフロントエンドとバックエンドの分離を実現する手順は次のとおりです。

Vue プロジェクトの作成

まず、新しい Vue を作成する必要があります。コマンドラインツールを使用してプロジェクトを実行します。ここでは Vue-cli スキャフォールディングを使用しています。コマンドは次のとおりです。

npm install -g vue-cli         // 全局安装Vue-cli
vue init webpack my-project   // 创建一个webpack项目

ログイン後にコピー

設定ファイルを変更します

設定ファイル config/index.js で、 proxyTable 属性としてプロキシバックエンドのアドレス:

module.exports = {
  // ...
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: 'http://localhost:8888',   // 后端接口地址
        changeOrigin: true      // 是否跨域
      }
    }
  }
}

ログイン後にコピー

フロントエンドページとインターフェイス呼び出しの記述

Vue の中心的な考え方はコンポーネント化です。コンポーネントとしてのフロントエンドページ。同時に、インターフェイスは ajax 経由で呼び出されます。Vue リソースライブラリはここで使用できます:

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

ログイン後にコピー

上記のコードでは、UserList という名前のコンポーネントを定義し、インターフェイスを呼び出してユーザーリストを取得します。作成されたイベントをトリガーして、最後にデータをページにバインドします。なお、ここで呼ぶインターフェースアドレスは「/api/users」ですが、設定ファイルにプロキシを設定しているため、実際にはバックエンドアドレス「http://localhost:8888/api" /users」にアクセスします。

ビルドとデプロイ

フロントエンドコードの作成が完了したら、コマンド

npm run build

ログイン後にコピー

を使用して Vue プロジェクトをビルドしてパッケージ化できます。パッケージ化後生成されたフォルダーがデプロイするフォルダーとなるので、このフォルダーを通常の方法で Web サーバーにデプロイするだけです。

3. インターフェースの接続方法は?

インターフェイスドッキングは、フロントエンドとバックエンドの分離アーキテクチャの中核となるコンテンツです。上記のコードでは、バックエンドアドレス「http://localhost:8888/api/users」にアクセスしていますが、実際にはバックエンドに接続する方法が 2 つあります。

JSON データ形式のドッキング

この場合、バックエンドは JSON 形式を返す API インターフェイスを提供する必要があり、フロントエンドは ajax を通じてこのインターフェイスを呼び出して取得します。データ。バックエンドによって返されるデータ形式は次のとおりです:

{
    "code": 0,
    "message": "",
    "data": [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }]
}

ログイン後にコピー

フロントエンドコードでは、バックエンドによって返されるデータを解析して表示する必要があります:

Vue.http.get('/api/users')
      .then(response => {
        if (response.body.code === 0) {
          this.users = response.body.data
        } else {
          alert(response.body.message)
        }
      })

ログイン後にコピー

上記のコードでは、バックエンドの場合返されたデータコード属性が 0 の場合、リストデータがページに表示されます。それ以外の場合は、警告ボックスがポップアップ表示され、エラーメッセージが表示されます。

Restful インターフェイスのドッキング

この場合、バックエンドは RESTful API インターフェイスを公開する必要があります。たとえば、ユーザー管理システムでは、次の API インターフェイスを使用できます:

##/usersGETすべてのユーザーを取得#/users/{id}/users/users/{id}/users/{id}フロントエンドコード内

インターフェイス名	リクエストメソッド	関数

GET	指定したユーザー情報を取得
POST	新しいユーザーの作成
PATCH	指定したユーザー情報を更新します
DELETE	指定されたユーザーを削除します

// 获取所有用户
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 => {
        // ...
    })

ログイン後にコピー

上記のコードでは、さまざまなビジネス機能を実装するためにさまざまな RESTful インターフェイスを呼び出す方法を示しています Vue-resource は、シンプルなメソッドでインターフェイスのドッキング機能を簡単に実現できます呼び出します。

つまり、Vue を介してフロントエンドとバックエンドを分離するアーキテクチャパターンにより、システムの保守性と拡張性が大幅に向上します。この記事では、Vue を使用してフロントエンドとバックエンドの分離のアーキテクチャパターンを実現する方法を、実装原理、フロントエンドコードの実装、インターフェイスのドッキングの 3 つの側面から詳しく紹介します。同時に、実際の開発プロセスでは、より美しいフロントエンドとバックエンドの分離アーキテクチャを実現するために、実際の状況に応じて微調整と変換を行う必要があることに注意してください。

以上がVue を使用してフロントエンドとバックエンドの分離とインターフェイスのドッキングを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。