介绍
在实现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);
}当然对于邮箱的检验也是一样的
这些完成后我们再去前端完成我们的注册方法应该就差不多可以了 但其实并不是
因为注册的前提的是每个字段都符合要求 这样才可以去进行注册这个逻辑
所以在注册按钮添加方法:
这里的$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