vue-cli vuelidateバックエンドデータ検証に基づく登録

紹介するvuelidateの基本的な検証を実装した後、プロジェクトの登録ログインと検証プロセスを実装する必要があります.
具体的なコードもgistに載せます
バックエンドapiおよびデータ準備
フロントエンドの要求に対してlaravelをバックエンドプロジェクトとするには、データの処理と対応するフィードバックが必要である.
まずUser Modelをプロジェクト端末に作成することができます.

$ php artisan make:model User -m

Modelを生成したら、フィールド情報を定義します.

 public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->string('password');
            $table->string('avatar');//      
            $table->string('confirm_code',64);//      code
            $table->smallInteger('is_confirmed')->default(0);//               
            $table->integer('followers_count')->default(0);
            $table->integer('followings_count')->default(0);
            $table->rememberToken();
            $table->timestamps();
        });
 }

また、対応するFactoryを作成してテストデータを生成することもできます.

$factory->define(App\User::class, function (Faker\Generator $faker) {
    static $password;

    return [
        'name' => $faker->name,
        'email' => $faker->unique()->safeEmail,
        'avatar' => $faker->imageUrl(256, 256),
        'confirm_code' => str_random(48),
        'password' => $password ?: $password = bcrypt('secret'),
        'remember_token' => str_random(10),
    ];
});

モデル工場を作成したら、いくつかのテストデータプロジェクト端末を生成してみましょう.

$ php artisan tinker;

$ namespace App;

$ factory(User::class,4)->create()

テストデータを用意しましたもちろん登録後のデータも使えます
登録を開始する前に、対応するControllerを生成します.
私のlaravelバックエンドプロジェクトは5.4で、5.4にコントローラとモデルのバインドが追加されました.
プロジェクト端末で実行:

$ php artisan make:controller UserController --model=User

コントローラを生成したら、ルーティング方法を定義します.

Route::group(['prefix'=>'user','middleware'=>['api','cors']], function () {
    Route::post('/register','UserController@store');
});

UserControllerの具体的な論理は通常の登録論理です.

public function store(Request $request)
    {
        $data = [
            'avatar' => '/images/avatar/default.png',
            'confirm_code' => str_random(48),
        ];
        $user = User::create(array_merge($request->get('user'),$data));
        return json_encode(["user_id"=>$user->id,"status"=>"success"]);
 }

これにより、登録されたバックエンド処理ロジックを完了できます.vueバックエンドapiデータに基づくデータ検証
私たちのtemplateの内容は基本的にそのような判断方法ですが、ここではフィールドの一意性についてユーザー名とメールボックスについて
私の具体的なvalidationsはこうです

validations: {
    newUser:{
       name: {
            required,
            minLength: minLength(4),
            async isUnique (value) {
               if (value === '') return true
               const response = await fetch(`http://localhost:8000/api/unique/name/${value}`)
               return Boolean(await response.json())
            }
       },
       email: {
            required,
            email,
            async isUnique (value) {
               if (value === '') return true
               const response = await fetch(`http://localhost:8000/api/unique/email/${value}`)
               return Boolean(await response.json())
            }
       },
       password: {
           required,
           minLength: minLength(6)
       },
       confirm_pwd: {
            required,
            sameAsPassword: sameAs('password')
       }
    }
},

もちろん、これはフィールド検証のバックエンドを必要とする検証ルーティング方法にすぎません.

Route::group(['prefix'=>'unique','middleware'=>['api','cors']], function () {
    Route::get('/name/{value}','ValidateController@ValidateName');
    Route::get('/email/{value}','ValidateController@ValidateEmail');
});

ここではControllerを単独で生成して方法論理を実現しました
ユーザー名の検証:

public function ValidateName($name)
    {
        $res = User::where("name",$name)->count();
        if($res){
            return response()->json(false);
        }
        return response()->json(true);
}

もちろんメールボックスのチェックも同じです
これらが完成したらフロントエンドに行って登録方法を完成するのは悪くないはずですが、実はそうではありません.
登録の前提は各フィールドが要求に合致することであるため、この論理を登録することができる.
登録ボタンにメソッドを追加します.

ここの$v.newUserは実はすべての検査データの集合です.私のdataはこのように宣言されています.

 data(){
    return{
        newUser: {
            name:'',
            email:'',
            password:'',
            confirm_pwd:''
        },
    }
},

これで最終的な登録ロジックはregister functionに入れられました

register:function(value){
    value.$touch();//      
    if(!value.$error){
        this.axios.post('http://localhost:8000/api/user/register',{user:this.newUser}).then(response => {
          console.log("data = "+response.data.status)
        })
    }
}

ここでのvalue.$errorは、全てのフィールドについての$errorまたはその結果、全てのフィールドについての$errorがfalseである場合のみ、検査により次の登録を行うことができるvalue.$touch()は実際に実行された設定であり、$dirtyはtrueである.これらはドキュメントにも紹介されている.
登録プロセス全体を見てみましょう

ユーザ登録

jasonのユーザーを登録しました

データ検査

ログインプロセスの基本的なロジック、つまり私たちの通常のログインは、このようにデータの校正とデータの戻りにほかならない.
資料リンク

vuelidate URL

gistアドレス1

gistアドレス2