vuelidate 结合 Laravel 后端数据注册验证

介绍

在实现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);
}

当然对于邮箱的检验也是一样的

这些完成后我们再去前端完成我们的注册方法应该就差不多可以了但其实并不是

因为注册的前提的是每个字段都符合要求这样才可以去进行注册这个逻辑

所以在注册按钮添加方法：

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