element-ui SSM架构创建用户的注册页面

1. 首先我们需要用到axios去和spring后端进行数据交互
2. validator的验证器去定义验证方法进行判断
3. 我们需要在失去焦点的时候就提示用户名已存在，用户名的大小范围，而不是通过提交后提示，当然，我没有用@blur。
4. 用户名的限制，二次密码的一致性在element-ui的官网可以查到源码，这里不做过多解释。

Register.vue：

<template>
	<el-form :model="regForm" status-icon :rules="rules" ref="regForm" label-width="100px" class="demo-ruleForm" style="width:500px;height:500px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)">
		<h1 style="text-align:center;padding-left: 70px;">用户注册</h1>
	  <el-form-item label="用户名" prop="username">
		  <el-input type="text" v-model="regForm.username" autocomplete="off" ></el-input>
	  </el-form-item>
	  <el-form-item label="密码" prop="password">
	    <el-input type="password" v-model="regForm.password" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="确认密码" prop="checkPass">
	    <el-input type="password" v-model="regForm.checkPass" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="email" prop="email" >
	    <el-input  type="email" v-model="regForm.email"></el-input>
	  </el-form-item>
	  <el-form-item>
		  <div class="btns" style="display: flex;padding-left: 70px;">
	    <el-button type="primary" @click="register()">提交</el-button>
	    <el-button @click="resetRegForm()">重置</el-button>
		<el-button type="danger" @click="back()">退回</el-button>
		</div>
	  </el-form-item>
	</el-form>
</template>

<script>
	export default{
		data(){
			var checkUsername=(rule,value,callback) =>{
				 this.$http.post("usernameHas",this.regForm).then((res_user)=>{
					 if(res_user.data.flag=="has"){
						 callback(new Error("该用户名已存在"));
					 }
					 else{
						 callback();
					 }
					
				 }).catch(error=>{
					 
				 })
				
				};
			
			 var validatePass = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请输入密码'));
			        } else {
			          if (this.regForm.checkPass !== '') {
			            this.$refs.regForm.validateField('checkPass');
			          }
			          callback();
			        }
			      };
			 var validatePass2 = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请再次输入密码'));
			        } else if (value !== this.regForm.password) {
			          callback(new Error('两次输入密码不一致!'));
			        } else {
			          callback();
			        }
			      };
			return{
				regForm:{
					username:"",
					password:"",
					checkPass:"",
					email:""
				},
				regRules:{
					
					
				},
				 rules: {
				          password: [
							   { required: true, message: '密码为必填项', trigger: 'blur'}, //失去焦点事件,//必填验证
							   { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' },
				            { validator: validatePass, trigger: 'blur' }
				          ],
				          checkPass: [
							   { required: true, message: '密码为必填项', trigger: 'blur'}, //失去焦点事件,//必填验证
							   { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' },
				            { validator: validatePass2, trigger: 'blur' }
				          ],
						  username:[
						  		 { required: true, message: '用户名为必填项', trigger: 'blur'}, //失去焦点事件,//必填验证
						  		 { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' },
								 {validator:checkUsername, trigger:'blur'}
						  ],
						  email:[
							   { required: true, message: '邮箱为必填项', trigger: 'blur'}, //失去焦点事件,//必填验证
							   {pattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/ , message:'邮箱格式不正确'}
						  ],
						   
				 },
				
			};
		},
		methods:{
			
			resetRegForm()//重置表单内容
			{
										  this.$refs.regForm.resetFields();
			},
			register()
			{
				this.$refs.regForm.validate(async valid =>{//验证规则
												   if(!valid) return;//验证失败
												   this.$confirm('确认注册？', '提示', {
												             confirmButtonText: '确定',
												             cancelButtonText: '取消',
												             type: 'warning'
												           }).then(() => {
															    this.$http.post("register",this.regForm).then((res)=>{
																	if(res.data.flag == "ok")
																	{
																		this.$message.success("注册成功");
												            													  
																		//网页路由跳转
																		this.$router.push({path:"/login"});
																	
																	}
																	else{
																		this.$message.error("注册失败");
																	}
																	}).catch(error=>{
																		
																	})
												           }).catch(() => {
												             this.$message({
												               type: 'info',
												               message: '已取消注册'
																});          
												   
															});
												
													
				})
			},
			back()
			{
				this.$router.push({path:"/login"});
			}
			
		}
	}
</script>

<style>
</style>

判断用户名是否存在的时候需要注意：不能用ref的valid方法进行await
post，因为本身他就在rule里定义的validator去调用的该方法，所以会出现死循环，我也是被困扰了很久，然后选用了.then()的处理方法.获取到request后，一定要加.data才能将数据从JSON格式中获取出来。

后端验证：

@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)//跨域：origins:允许跨域的url
@RestController
public class UsernameController {
    @Autowired//自动注入
    UserDao userDao;
    @RequestMapping("/usernameHas")
    public String usernameHas(@RequestBody  User user){
        String flag = "null";
        HashMap<String,Object> res=new HashMap<>();
        User u=userDao.hasUsername(user.getUsername());
        if(u!=null)
            flag="has";
        else
            flag="null";
        res.put("flag",flag);

        return JSON.toJSONString(res);
    }
}

Mapping.xml配置mybatis的sql语句

最后运行结果：

测试用户名已存在情况：

注册成功：

当然是取名叫保罗乔治了！13forever

按下取消后跳出提示框
按下确认后：

成功后跳转到login页面。