摘要：介紹在實(shí)現(xiàn)基本的驗(yàn)證之后我們需要去真正實(shí)現(xiàn)項(xiàng)目中的注冊(cè)登錄以及我們的驗(yàn)證流程有的具體的代碼我也會(huì)放到我的上面后端以及數(shù)據(jù)準(zhǔn)備對(duì)于前端的請(qǐng)求以作為后端項(xiàng)目需要對(duì)數(shù)據(jù)進(jìn)行處理和相應(yīng)的反饋我們可以先去創(chuàng)建在項(xiàng)目終端生成后就去定義好字段信息

在實(shí)現(xiàn)vuelidate基本的驗(yàn)證之后 我們需要去真正實(shí)現(xiàn)項(xiàng)目中的注冊(cè)登錄以及我們的驗(yàn)證流程

有的具體的代碼我也會(huì)放到我的gist上面

對(duì)于前端的請(qǐng)求 以laravel作為后端項(xiàng)目需要對(duì)數(shù)據(jù)進(jìn)行處理和相應(yīng)的反饋

我們可以先去創(chuàng)建User Model在項(xiàng)目終端:

$ 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");//保存用戶(hù)頭像
            $table->string("confirm_code",64);//郵箱確認(rèn)激活code
            $table->smallInteger("is_confirmed")->default(0);//判斷用戶(hù)呢是否已經(jīng)激活他的郵箱
            $table->integer("followers_count")->default(0);
            $table->integer("followings_count")->default(0);
            $table->rememberToken();
            $table->timestamps();
        });
 }

我們也可以嘗試創(chuàng)建對(duì)應(yīng)的Factory然后可以生成測(cè)試數(shù)據(jù):

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

寫(xiě)好模型工廠(chǎng)后我們可以試著生成幾個(gè)測(cè)試數(shù)據(jù) 項(xiàng)目終端:

$ php artisan tinker;

$ namespace App;

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

現(xiàn)在我們已經(jīng)準(zhǔn)備好測(cè)試數(shù)據(jù) 當(dāng)然你也可以使用注冊(cè)過(guò)后的數(shù)據(jù)

開(kāi)始注冊(cè)之前先去生成對(duì)應(yīng)的Controller

我的laravel后端項(xiàng)目是5.4 而在5.4里面新增了控制器與模型的綁定

在項(xiàng)目終端執(zhí)行:

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

生成控制器后就去路由定義我們的路由方法:

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

而UserController里面的具體邏輯就是平常的注冊(cè)邏輯:

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

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

我們的template內(nèi)容基本還是那樣的判斷方式 只不過(guò)在這里我對(duì)字段的唯一性的針對(duì)用戶(hù)名和郵箱

所以我的具體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")
       }
    }
},

當(dāng)然這只是對(duì)字段檢驗(yàn)的要求 后端的檢驗(yàn)路由方法:

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

這里我是多帶帶生成了一個(gè)Controller去實(shí)現(xiàn)方法邏輯

對(duì)于用戶(hù)名的檢驗(yàn):

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

當(dāng)然對(duì)于郵箱的檢驗(yàn)也是一樣的

這些完成后我們?cè)偃デ岸送瓿晌覀兊淖?cè)方法應(yīng)該就差不多可以了 但其實(shí)并不是

因?yàn)樽?cè)的前提的是每個(gè)字段都符合要求 這樣才可以去進(jìn)行注冊(cè)這個(gè)邏輯

所以在注冊(cè)按鈕添加方法:

    立即注冊(cè)
    

這里的$v.newUser其實(shí)就是所有被檢驗(yàn)數(shù)據(jù)的集合 因?yàn)槲业?b>data是這樣被聲明的:

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

這樣完成好后 最終的注冊(cè)邏輯被我放在了register function里面

register:function(value){
    value.$touch();//驗(yàn)證所有信息
    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是對(duì)所有字段的$error的或的結(jié)果 只有所有字段的$error為false時(shí) 才能通過(guò)檢驗(yàn)進(jìn)行下一步的注冊(cè)
value.$touch() 其實(shí)是執(zhí)行的設(shè)置其$dirty為true這些在文檔上也都有介紹

這樣我們?nèi)プ咭幌抡麄€(gè)的注冊(cè)流程

用戶(hù)注冊(cè)

我們已經(jīng)注冊(cè)過(guò)了以為jason的用戶(hù)

數(shù)據(jù)檢驗(yàn)

登錄過(guò)程的基本邏輯也就是我們通常的登錄無(wú)非就是像這樣進(jìn)行數(shù)據(jù)的校對(duì)和數(shù)據(jù)的返回

vuelidate網(wǎng)址

gist地址1

gist地址2