摘要：介紹在實現基本的驗證之后我們需要去真正實現項目中的注冊登錄以及我們的驗證流程有的具體的代碼我也會放到我的上面后端以及數據準備對于前端的請求以作為后端項目需要對數據進行處理和相應的反饋我們可以先去創建在項目終端生成后就去定義好字段信息

在實現vuelidate基本的驗證之后 我們需要去真正實現項目中的注冊登錄以及我們的驗證流程

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

對于前端的請求 以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(AppUser::class, function (FakerGenerator $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"]);
 }

這樣就可以完成注冊的后端處理邏輯

我們的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網址

gist地址1

gist地址2