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

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

1. バックエンド実装

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

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

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

1. Vue プロジェクトの作成

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

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

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

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

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

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

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」にアクセスします。

4. ビルドとデプロイ

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

npm run build

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

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

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

1. 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 の場合、リスト データがページに表示されます。それ以外の場合は、警告ボックスがポップアップ表示され、エラー メッセージが表示されます。

2. 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 サイトの他の関連記事を参照してください。