Marco de validación de Spring: SpringValidation
Es un marco de verificación para verificar que el valor del atributo en la clase de entidad especificada es digno de verificación. Puede especificar el formato del valor del atributo (regular) en esta clase de entidad. Si no cumple con los requisitos, puede enviar un mensaje de error.
¿Por qué necesita el marco de autenticación de Spring?
Hemos utilizado js para verificar la información ingresada por el usuario anteriormente, pero la verificación del front-end no es confiable. Independientemente de si el front-end está verificado o no, el back-end de Java debe verificar la información para garantizar la seguridad de los datos.
Agregue el archivo pom.xml de dependencia agregue la siguiente dependencia
<!-- 验证框架 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>Vaya a la clase de entidad a verificar y agregue el código de verificación al ejemplo de RegisterVo del proyecto:
@Data
public class RegisterVo implements Serializable {
// @NotBlank针对字符串类型不能为null也不能为""
@NotBlank(message = "邀请码不能为空")
private String inviteCode;
@NotBlank(message = "手机号不能为空")
@Pattern(regexp = "^1\\d{10}$",message = "手机号不正确")
private String phone;
@NotBlank(message = "昵称不能为空")
@Pattern(regexp = "^.{2,20}$",message = "昵称长度是2到20个字符")
private String nickname;
@NotBlank(message = "密码不能为空")
@Pattern(regexp = "^\\w{6,20}$",message = "密码是6到20个字母,数字,_组成")
private String password;
@NotBlank(message = "确认密码不能为空")
private String confirm;
}SpringValidation anotaciones de validación de uso común
@NotBlank , para el tipo de cadena, no puede ser nulo o ""
@NotNull, para cualquier tipo de referencia no puede ser nulo, pero si es una cadena, puede ser ""
@NotEmpty , generalmente para colecciones, no puede ser nulo y la longitud no puede ser 0
@Patrón, escribe expresiones regulares
Para iniciar la verificación, debe agregar una anotación donde se usa la clase de entidad . Ejemplo del código de método registrado en la clase SystemController :
@PostMapping("/register")
public R registerStudent(@Validated RegisterVo registerVo,
BindingResult res){
//@Validated表示要SpringValidation验证 registerVo
//BindingResult res来保存SpringValidation验证的结果
//方法中先来判断res有没有错误
if(res.hasErrors()){
//如果有错误,获得第一个错误信息
String error=res.getFieldError().getDefaultMessage();
return R.unproecsableEntity(error);
}
//判断两次密码输入是否一致
if(!registerVo.getPassword().equals(registerVo.getConfirm())){
return R.unproecsableEntity("两次密码输入不一致");
}
}Vista
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Vue Demo</h1>
<p v-text="message">这是演示信息</p>
<input type="text" v-model="desc">
<button type="button" v-on:click="hello">演示</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
message:"Hello Vue!!!",
desc:"2021-1-15"
},
methods:{
hello:function(){
console.log(this.desc);
this.message=this.desc;
}
}
})
</script>
</html>La operación de Vue puede realizar el enlace bidireccional de datos de página y variables de Vue
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/plugins/css/vueAlert.css">
<link rel="stylesheet" href="css/login.css">
<script src="bower_components/jquery/dist/jquery.min.js" ></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row">
<div class="mx-auto mt-5" style="width: 400px">
<div class="bg-white p-4" id="app">
<p class="text-center"><b>注册新用户</b></p>
<div id="error" class="alert alert-danger" style="display: none"
v-bind:class="{'d-block':hasError}">
<i class="fa fa-exclamation-triangle"></i>
<span v-text="message">邀请码错误！</span>
</div>
<form action="/register" method="post" v-on:submit.prevent="register">
<div class="form-group has-icon">
<input type="tel" name="phone" class="form-control" placeholder="请输入手机号"
pattern="^\d{11}$" required="required" v-model="phone">
<span class=" fa fa-phone form-control-icon"></span>
</div>
<div class="form-group has-icon">
<input type="text" name="nickname" class="form-control" placeholder="请设置昵称，字数为2-20之间"
pattern="^.{2,20}$" required="required" v-model="nickname">
<span class="fa fa-user form-control-icon"></span>
</div>
<div class="form-group has-icon">
<input type="password" name="password" class="form-control" placeholder="设置密码6-20个字母、数字、下划线"
required="required" pattern="^\w{6,20}$" v-model="password" >
<span class="fa fa-lock form-control-icon"></span>
</div>
<button type="submit" class="btn btn-primary btn-block btn-flat" >注册</button>
</form>
<a href="login.html" class="text-center d-inline-block mt-3">已有账号，立即登录</a>
</div>
<!-- /.form-box -->
</div>
</div>
</div>
</body>
<script src="js/utils.js"></script>
<script src="js/register.js"></script>
</html>
V-bind se utiliza principalmente para resolver el problema de vincular el valor de atributo del elemento HTML y se utiliza para vincular dinámicamente uno o más atributos o accesorios de un componente a expresiones en respuesta a la actualización de los atributos de los elementos HTML.
v-bind vincula clase, método de vinculación: sintaxis del objeto, lo que significa que la clase va seguida de un objeto
v-text se utiliza para manipular texto sin formato, reemplazará el valor mostrado en el objeto de datos correspondiente. Cuando el valor del objeto de datos vinculado cambia, el contenido del punto de interpolación también se actualizará en consecuencia. Nota: Esta es una vinculación unidireccional. Cuando el valor en el objeto de datos cambia, la interpolación cambiará, pero cuando la interpolación cambia, no afectará el valor del objeto de datos.
v-on: submit.prevent significa que cualquier botón de envío en el formulario puede activar el evento
El modelo V se utiliza generalmente para encuadernación bidireccional:
Permite que un componente v-model personalizado personalice el accesorio y el evento cuando está en uso . De forma predeterminada, v en un componente -model se value usará como accesorio y input evento, pero algunos tipos de entrada, como botones de radio y botones de casilla de verificación, pueden querer usar value prop para diferentes propósitos. Utilice model opciones para evitar conflictos causados por estas situaciones.
<!--引入标签的导航栏-->
<div class="container-fluid" th:fragment="tags_nav" >
<div class="nav font-weight-light" id="tagsApp">
<a href="tag/tag_question.html" class="nav-item nav-link text-info"><small>全部</small></a>
<a href="tag/tag_question.html" class="nav-item nav-link text-info"
v-for="tag in tags">
<small v-text="tag.name">Java基础</small></a>
</div>
</div>
v-for: instrucción para representar una lista basada en una matriz. v-for La instrucción debe usar item in items una sintaxis especial del formulario, donde items la matriz de datos de origen item es el alias del elemento de la matriz que se está iterando.
let app = new Vue({
el:'#app',
data:{
phone:'',
nickname:'',
password:'',
message: '',
hasError: false
},
methods:{
register:function () {
console.log('Submit');
let data = {
phone: this.phone,
nickname: this.nickname,
password: this.password,
}
console.log(data);
if(data.password !== data.confirm){
this.message = "确认密码不一致！";
this.hasError = true;
return;
}
$.ajax({
url:"/register",
method: "POST",
data: data,
success: function (r) {
console.log(r);
if(r.code == CREATED){
console.log("注册成功");
console.log(r.message);
app.hasError = false;
location.href = '/login.html?register';
}else{
console.log(r.message);
app.hasError = true;
app.message = r.message;
}
}
});
}
}
});