Home > LARAVELで〆、バリデーションとページ管理

LARAVELで〆、バリデーションとページ管理

LARAVELで〆、バリデーションとページ管理

Mon Dec 24 2018

今年初挑戦のアドカレ

去年のアドカレで、Nuxt凄い!Netlifyも使ってみよ!

といった記事を目にし以降存分に利用させていただきました。

逆に今年は私から発信できれば、と思い初挑戦!

今回Vue.jsやNuxt、Firebaseに引き続き第4弾、Laravel編です。

今まで第3弾までの記事は、

  1. FIRESTOREに移行したら色々と楽になった話
  2. プレゼンテーションスライドもVUEで作っちゃう話
  3. ATOMIC DESIGNでの技術選定の結果、そして今後

技術スタック

2年近くアプリ内ブラウザ、管理画面をLaravelで制作。

バックエンドでゲームサーバが動作、データベースはMySQL/Redisを使っています。

長らくお世話になっていながら、社内で留まっていた技術も数多く..^^;

今年のアドベントカレンダー Laravel #2で〆てみました!

主な機能

マスタデータの管理やアイテム付与など、全体として変わったことをしていません。

Google Spreadsheetとの連携辺りでしょうか。

今回はユーザデータの管理でDBファサードを使ってJSON形式を取得。

// 各キーワードを取得
$user_name = $request->query('userName');

switch ($user_table) {
    case 'user.users':
        $query = DB::connection('user')->table('users as u');
            break;
    //
}

Validator

管理画面ではプルダウンメニューより、テーブルを選択。

検索するためにキーワードを入力するInputFormなど他にもFormは存在。

デフォルトではテーブル名のみ設定します。

private変数として事前に定義したvalidatorを使って情報取得します。

// バリデータ
private $userValidator = [
    'userTable' => 'max: 16',
    'userName' => 'max: 64',
];

public function list(Request $request) {
    $this->validate($request, $this->userValidator);
}

バリデータで引っ掛かるとVueでは以下のようにエラーを表示できるようにします。

<form-error
    v-if="errors[item]"
    :errors="errors[item]"
/>

<!-- components/common/ FormError.vue -->
<span v-for="(item, index) in errors">
    {{ item }}
</span>

Pagination

デフォルトのPaginationでは設計通り実現できず少し詰まった箇所でした。

結果、LengthAwarePaginatorを採用しました。

config/app.phpでページ数を予め設定すること。

use Illuminate\Support\Facades\Input;
use Illuminate\Pagination\LengthAwarePaginator;

$page = Input::get('page', 1);
$paginate = config('app.paginate_limit');
$currentPage = LengthAwarePaginator::resolveCurrentPage();
$dataForCurrentPage = $query->slice(($currentPage - 1) * $paginate, $paginate);
$query = new LengthAwarePaginator($dataForCurrentPage, count($query), $paginate, $page);

なぜ選定.. ?

一つは検索機能を充実させるため、前のページに戻るか、次のページに進むことができたらOK

各ページにアクセスする必要が無くなりました。

# デフォルトのページネーション
[<] [1] [2] [3] ... [10] [>]

# 実現したいページネーション
[<] [>]

もう一つは、テーブルを結合して成型しなければいけなかった。

ログテーブルは各月で管理しているが、テーブルを結合せず済む場合と処理を分ける必要があった。

まとめて済ませることができるなら、一度に済ませる方が良いという判断でした。

あとはフロントで取得するのみ

予め準備したJSON形式の情報をaxiosを使ってアクセス。

この時必要なキーワードをdataでインスタンス化。

created() {
    const self = this;
    axios
        .get('/users')
        .then(function(response) {
            self.responseData = response.data;
    });
}

検索したい文字列や日時は随時paramsに追加。

created() {
    const self = this;
    let params = 
        'userTable=' + this.searchData.userTable + 
        '&userName=' + this.searchData.userName;
    axios
        .get('/users?' + params)
        .then(function(response) {
            self.responseData = response.data;
    });
}

コメントを残す