vue-cli vuelidate基於後端數據驗證註冊

時間 2019-12-06

標籤 vue cli vuelidate 基於後端數據驗證註冊简体版

原文原文鏈接

介紹

在實現vuelidate基本的驗證以後咱們須要去真正實現項目中的註冊登陸以及咱們的驗證流程php

有的具體的代碼我也會放到個人gist上面html

後端api以及數據準備

對於前端的請求以laravel做爲後端項目須要對數據進行處理和相應的反饋前端

咱們能夠先去建立User Model在項目終端:vue

$ php artisan make:model User -m

生成Model後就去定義好字段信息:ios

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而後能夠生成測試數據:laravel

$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),
    ];
});

寫好模型工廠後咱們能夠試着生成幾個測試數據項目終端:git

$ php artisan tinker;

$ namespace App;

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

如今咱們已經準備好測試數據固然你也可使用註冊事後的數據 github

開始註冊以前先去生成對應的Controllerjson

個人laravel後端項目是5.4 而在5.4裏面新增了控制器與模型的綁定axios

在項目終端執行:

$ 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);
}

固然對於郵箱的檢驗也是同樣的

這些完成後咱們再去前端完成咱們的註冊方法應該就差很少能夠了但其實並非

由於註冊的前提的是每一個字段都符合要求這樣才能夠去進行註冊這個邏輯

因此在註冊按鈕添加方法:

<div class="control-group">
    <button
            class="btn btn-primary btn-lg btn-block btn-login-register"
            @click="register($v.newUser)"
    >當即註冊
    </button>
</div>

這裏的$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)
        })
    }
}