vue-cli vuelidate基于后端数据验证注册

摘要：介绍在实现基本的验证之后我们需要去真正实现项目中的注册登录以及我们的验证流程有的具体的代码我也会放到我的上面后端以及数据准备对于前端的请求以作为后端项目需要对数据进行处理和相应的反馈我们可以先去创建在项目终端生成后就去定义好字段信息

在实现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