LaravelによるVue単一ページアプリケーションの作成(3)

15500 ワード
php laravel
記事は専門のLaravel開発者コミュニティから転送され、元のリンク:https://learnku.com/laravel/t... vue-routerがルーティングに入る前に、Laravelを使用してVue SPAを構築し続けるために、データを非同期でロードする方法を実証します.
以前に、Laravelによって作成されたVue単一ページアプリケーション(2)において、UsersIndexコンポーネントがAPIから非同期にユーザをロードすることが完了した.データベースから実際のバックエンドAPIを構築することを簡略化し、Laravelのfactory()メソッドによってAPIの戻りで偽データをシミュレートすることを選択した.LaravelでVueページを構築したアプリケーションの第1および第2の部分をまだ読んだことがない場合は、まず見てからここに戻ることをお勧めします.ここで待っています.
このチュートリアルでは、シミュレーションの/usersをデータベースによってサポートされているものに置き換えます.私はMySQLを使うことに慣れていますが、あなたが使いたいデータベースドライバを使うことができます.UsersIndex.vueルーティングコンポーネントは、created()のライフサイクル中にAPIを介してデータをロードする.次に、第2の部分の最後のfetchData()の方法の例を示す.
created() {
    this.fetchData();
},
methods: {
    fetchData() {
        this.error = this.users = null;
        this.loading = true;
        axios
            .get('/api/users')
            .then(response => {
                this.loading = false;
                this.users = response.data;
            }).catch(error => {
                this.loading = false;
                this.error = error.response.data.message || error.message;
            });
    }
}

コンポーネントのフロントナビゲーションによってAPIからデータが抽出される場合を示しますが、その前にAPIに実際のデータを出力する必要があります.
本格的なユーザー・エンド・ポイントの作成
Laravel 5.5を使用したUsersControllerの新しいAPIリソースを作成し、JSONデータを返します.
コントローラとAPIリソースを作成する前に、まずデータベースを設定し、SPAにテストデータを提供するためにデータの埋め込みを行います.
ユーザーデータの入力make:seederコマンドを使用して、ユーザー・フィルを作成します.
php artisan make:seeder UsersTableSeeder
UsersTableSeederはとても簡単です.モデルファクトリを使用して50人のユーザーを作成します.
create();
    }
}

次に、UsersTableSeederをdatabase/seeds/DatabaseSeeder.phpファイルに追加します.
call([
            UsersTableSeeder::class,
        ]);
    }
}

データベースを先に作成して構成しないと、データの埋め込みは使用できません.
データベースの構成
私たちのVue SPA Laravelアプリケーションに実際のデータベースに接続する時です.TablePlusのようなGUIツールを使用してSQLiteまたはMySQLを使用できます.Laravelの初心者であれば、データベースの入門に多くのドキュメントを参照できます.
デバイス上で実行されているMySQLインスタンスがある場合は、次のコマンドラインを使用して、新しいデータベースをすばやく作成できます(ローカル環境でパスワードが設定されていない場合).
mysql -u root -e"create database vue_spa;"

#     -p       
mysql -u root -e"create database vue_spa;" -p

データベースがある場合は、.envファイルに構成DB_DATABASE=vue_spaを追加します.問題が発生した場合は、ドキュメントに従ってください.これにより、データベースがより容易に動作します.
データベース接続を構成したら、データ・テーブルを移行し、埋め込みデータを追加できます.LaravelにはUsersテーブルの移行が付属しており、データを埋め込むために使用しています.
#      seeders    
composer dump-autoload
php artisan migrate:fresh --seed

もしあなたが望むならば、あなたも単独のartisan db:seed命令を使うことができます!このように;50人のユーザーを含むデータベースがあるはずです.apiでクエリーして返すことができます.
Usersコントローラ
第2章では、シミュレーションされた/usersは、routes/api.phpの中で次のように長い.
Route::get('/users', function () {
    return factory('App\User', 10)->make();
});

製造環境でphp artisan route:cacheを使用して一定の利点を得ることができるように、コントローラクラスを新規に作成します.この方法では、閉パッケージはサポートされていません.コマンドラインにコントローラとUser APIリソースクラスを同時に作成します.
php artisan make:controller Api/UsersController
php artisan make:resource UserResource

第1のコマンドは、app/Http/Controllers/ApiディレクトリにUserコントローラを作成し、第2のコマンドはapp/Http/ResourcesディレクトリにUserResourceを作成します.
次のコントローラとApiネーミングスペースに対応する新しいroutes/api.phpコード:
Route::namespace('Api')->group(function () {
    Route::get('/users', 'UsersController@index');
});

コントロールが直接的です.ページ付きEloquent APIを返します.

次に、JSON応答の例を示します.前のUserResourceのAPIフォーマットと同様です.
{
   "data":[
      {
         "name":"Francis Marquardt",
         "email":"[email protected]"
      },
      {
         "name":"Dr. Florine Beatty",
         "email":"[email protected]"
      },
      ...
   ],
   "links":{
      "first":"http:\/\/vue-router.test\/api\/users?page=1",
      "last":"http:\/\/vue-router.test\/api\/users?page=5",
      "prev":null,
      "next":"http:\/\/vue-router.test\/api\/users?page=2"
   },
   "meta":{
      "current_page":1,
      "from":1,
      "last_page":5,
      "path":"http:\/\/vue-router.test\/api\/users",
      "per_page":10,
      "to":10,
      "total":50
   }
}

奇妙なことに、Laravelは自動的にページングデータを追加し、ユーザー情報をdataの属性に割り当てます.
次はUserResourceクラスです.
 $this->name,
            'email' => $this->email,
        ];
    }
}
UserResourceは、セット内の各Userモデルを配列に変換し、UserResource::collection()方法を提供して、ユーザのセットをJSONフォーマットに変換する.
今まで、/api/usersインタフェースが1ページのアプリケーションで使用できるはずです.勉強を続けると、新しい戻りが現在のコンポーネントを満たしていないことに気づきます.
UsersIndexコンポーネントの変更then()を調整することによって、ユーザデータが存在するdataキーを呼び出すことができ、UsersIndex.vueコンポーネントを迅速に再動作させることができる.最初は少し斬新に見えましたが、response.dataは応答オブジェクトなので、ユーザーデータをこのように設定することができます.
this.users = response.data.data;
fetchData()と新しいAPIを組み合わせて調整する方法は以下の通りである.
fetchData() {
    this.error = this.users = null;
    this.loading = true;
    axios
        .get('/api/users')
        .then(response => {
            this.loading = false;
            this.users = response.data.data;
        }).catch(error => {
            this.loading = false;
            this.error = error.response.data.message || error.message;
        });
}

ナビゲーション前にデータを読み込む
EMCのコンポーネントは、新しいAPIで動作し、コンポーネントにナビゲートする前にユーザー情報を取得する方法を示す絶好のタイミングです.この方法を用いることで,データを取得した後に新しいルートにナビゲートできる.beforeRouteEnterガードを使用して、コンポーネントに入る前に実装することができます.例Vueルーティングドキュメントは次のとおりです.
beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },

ドキュメントを参照すると、完全な例がありますが、ユーザーデータを非同期で取得し、完了した後にのみnext()をトリガーし、コンポーネントにデータを設定します(変数vm).
ドキュメントをチェックして完全な例を取得しますが、非同期でユーザーデータを取得し、完了するとnextがトリガーされます(コンポーネントにデータを設定します(変数vm).getUsers関数は、APIから非同期にユーザを取得し、コンポーネントへのコールバックをトリガーするように見える場合があります.
const getUsers = (page, callback) => {
    const params = { page };

    axios
        .get('/api/users', { params })
        .then(response => {
            callback(null, response.data);
        }).catch(error => {
            callback(error, error.response.data);
        });
};

このメソッドはPromiseを返さず、完了または失敗したときにコールバックをトリガーすることに注意してください.コールバックは、2つのパラメータを渡します.1つのエラーとAPI呼び出しからの応答です.
我々のgetUsers()メソッドは、最終的にクエリ文字列パラメータとして要求に現れるpage変数を受け入れる.空(ルーティングにページ番号が渡されていない)の場合、APIはデフォルトでpage=1に設定されます.
最後に指摘したいのはconst params値です.実際にはこうです
{
    params: {
        page: 1
    }
}

次に、beforeRouteEnterは、getUsers関数を使用して非同期データを取得し、next()をコンポーネントに呼び出して設定する方法を示します.
beforeRouteEnter (to, from, next) {
    const params = {
        page: to.query.page
    };

    getUsers(to.query.page, (err, data) => {
        next(vm => vm.setData(err, data));
    });
},

これは、APIからデータが返されたgetUsers()呼び出しのcallbackパラメータです.
(err, data) => {
    next(vm => vm.setData(err, data));
}

その後、APIが応答に成功すると、getUsers()においてこのように呼び出される.
callback(null, response.data);

beforeRouteUpdate
コンポーネントがレンダリングされ、ルーティングが変更されると、beforeRouteUpdateが呼び出され、Vueは新しいルーティングでコンポーネントを多重化します.例えば、私たちのユーザーが/users?page=2から/users?page=3にジャンプしたとき.beforeRouteUpdate呼び出しは、beforeRouteEnterと同様である.ただし、前者はthisをアセンブリで使用することができるため、スタイルが若干異なる場合があります.
//               ，
//        。
beforeRouteUpdate (to, from, next) {
    this.users = this.links = this.meta = null
    getUsers(to.query.page, (err, data) => {
        this.setData(err, data);
        next();
    });
},

コンポーネントがレンダリングされているため、APIから次のユーザーのグループを取得する前に、いくつかのデータ属性をリセットする必要があります.コンポーネントにアクセスできます.したがって、this.setData()を呼び出し(まだ示していません)、コールバックを必要とせずにnext()を呼び出すことができます.
最後に、これはUsersIndex組立体におけるsetDataの方法である.
setData(err, { data: users, links, meta }) {
    if (err) {
        this.error = err.toString();
    } else {
        this.users = users;
        this.links = links;
        this.meta = meta;
    }
},
setData()の方法は、オブジェクトプロファイルを使用することによって取得される.data、links、およびmetaのキーは、APIの応答に由来する.data: usersを使用して、dataを新しい変数usersに明確に割り当てます.
UsersIndexのバンドル
このUsersIndexコンポーネントの各セクションを説明しました.すべてのコンポーネントをバンドルし、非常に基本的なページングを行う準備ができています.このチュートリアルでは、ページングの構築方法を説明していません.そのため、独自に奇抜なページングを見つける(または作成する)ことができます.
ページングはvue-routerプログラミングでSPAを参照する方法を示す良い方法です.
これは、ルータフックを使用して非同期データを取得できる新しいフックと方法を備えた完全なコンポーネントです.


import axios from 'axios';

const getUsers = (page, callback) => {
    const params = { page };

    axios
        .get('/api/users', { params })
        .then(response => {
            callback(null, response.data);
        }).catch(error => {
            callback(error, error.response.data);
        });
};

export default {
    data() {
        return {
            users: null,
            meta: null,
            links: {
                first: null,
                last: null,
                next: null,
                prev: null,
            },
            error: null,
        };
    },
    computed: {
        nextPage() {
            if (! this.meta || this.meta.current_page === this.meta.last_page) {
                return;
            }

            return this.meta.current_page + 1;
        },
        prevPage() {
            if (! this.meta || this.meta.current_page === 1) {
                return;
            }

            return this.meta.current_page - 1;
        },
        paginatonCount() {
            if (! this.meta) {
                return;
            }

            const { current_page, last_page } = this.meta;

            return `${current_page} of ${last_page}`;
        },
    },
    beforeRouteEnter (to, from, next) {
        getUsers(to.query.page, (err, data) => {
            next(vm => vm.setData(err, data));
        });
    },
    // when route changes and this component is already rendered,
    // the logic will be slightly different.
    beforeRouteUpdate (to, from, next) {
        this.users = this.links = this.meta = null
        getUsers(to.query.page, (err, data) => {
            this.setData(err, data);
            next();
        });
    },
    methods: {
        goToNext() {
            this.$router.push({
                query: {
                    page: this.nextPage,
                },
            });
        },
        goToPrev() {
            this.$router.push({
                name: 'users.index',
                query: {
                    page: this.prevPage,
                }
            });
        },
        setData(err, { data: users, links, meta }) {
            if (err) {
                this.error = err.toString();
            } else {
                this.users = users;
                this.links = links;
                this.meta = meta;
            }
        },
    }
}

もっとわかりやすいなら、ここではGitHub GistとしてのUsersIndex.vue.
ここには新しいことがたくさんあるので、もっと重要な観点を指摘します.このgoToNext()およびgoToPrev()の方法は、ナビゲーションvue-routerを使用してthis.$router.pushを使用する方法を示している.
this.$router.push({
    query: {
        page: `${this.nextPage}`,
    },
});

トリガされたクエリー文字列beforeRouteUpdateに新しいページをプッシュしています.また、 の前および次の動作の要素を示します.主に、プログラミングによるナビゲーションのプロセスvue-routerを実証するために使用されます.を使用して、自動的にページングルート間をナビゲートする可能性があります.
3つの計算属性(nextPageprevPageおよびpaginatonCount)を導入して、次のページと前のページのページ番号を決定し、paginatonCountは現在のページ番号のビジュアルカウントと合計ページ数を表示します.
次のボタンと前のボタンは、計算された属性を使用して無効にするかどうかを決定し、goToメソッドは、計算された属性を使用してpageクエリー文字列パラメータを次のページまたは前のページにプッシュします.次のページまたは前のページが最初のページと最後のページの境界で空の場合、これらのボタンは無効になります.
コードにはいくつかの冗長性があるかもしれませんが、このコンポーネントは、vue-routerがルーティングに入る前にデータを取得する方法を示しています.
Laravel Mixを実行して最新バージョンのJavaScriptを構築することを忘れないでください.
# NPM
npm run dev

# Watch to update automatically while developing
npm run watch

# Yarn
yarn dev

# Watch to update automatically while developing
yarn watch

最後に、UsersIndex.vueコンポーネントを完全に更新した後に表示されたSPAの結果です.
次のステップは何ですか?
データベースから実際のデータを取得できる有効なAPIと、LaravelのAPIモデルリソースを使用してバックエンドで簡単なページングリンクを行い、 キーにデータをパッケージする簡単なページングコンポーネントがあります.
次に、ユーザーの作成、編集、削除に力を入れます./ usersリソースは実際のアプリケーションにロックされますが、現在は、vue-routerと一緒にデータを非同期でナビゲートおよび抽出する方法を学習するためにCRUD機能を構築しているだけです.
axiosクライアントコードをコンポーネントから抽象化することもできますが、これは簡単です.そのため、第4部までコンポーネントに保持します.他のAPI機能が追加されると、専用のHTTPクライアントのモジュールを作成したいと思います.
セクション4-既存のユーザーの編集を続行できます.
Pythonリンクpresto
webcomponentのお勉強2