首先，我们需要明确一下实现表单提交数据重复验证的基本思路。我们可以在页面上的表单中增加一个校验码字段，每次提交时，先检测校验码，若校验码匹配成功则将表单数据保存至数据库，否则提示用户“数据已存在”。
下面是实现表单提交数据重复验证的完整攻略：
我们可以先创建一个名为user的数据库表，用来存储用户表单提交数据。以下是该表的基本结构：
CREATE TABLE `user` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
`username` varchar(50) NOT NULL COMMENT '用户名',
`password` varchar(50) NOT NULL COMMENT '密码',
PRIMARY KEY (`id`),
UNIQUE KEY `index_username` (`username`) COMMENT '用户名唯一索引'
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='用户表';
其中，username字段为用户名字段，为了保证用户名的唯一性，我们在该字段上设置唯一索引。
在前端页面上，我们需要增加一个文本框用于输入用户名，并添加一个“检测用户名是否已存在”的按钮。以下是示例页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交数据重复验证</title>
<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form id="userForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">用户名</label>
<div class="col-md-10">
<input type="text" id="username" name="username" class="form-control" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="button" id="checkUsernameBtn" class="btn btn-default">检测用户名是否已存在</button>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" id="submitButton" class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- 引入jQuery和Bootstrap的Javascript文件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
// 检测用户名是否已存在
$('#checkUsernameBtn').click(function() {
var username = $('#username').val();
if(username) {
$.ajax({
url: '/user/checkUsername',
type: 'POST',
dataType: 'json',
data: {
username: username
},
success: function(data) {
if(data) {
alert('用户名已存在');
} else {
alert('用户名可用');
}
}
});
} else {
alert('请输入用户名');
}
});
});
</script>
</body>
</html>
以上代码中，我们通过Bootstrap框架创建了一个简单的表单页面，并增加了一个检测用户名是否已存在的按钮。
接下来，我们需要在后端实现具体的数据重复验证逻辑。一般情况下，我们可以采用如下思路：
下面是示例Java代码：
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/checkUsername")
public Boolean checkUsername(@RequestParam String username) {
return userService.checkUsername(username);
}
}
以上代码中采用RestController注解，以实现该类提供Json格式返回值的功能。这里我们提供一个“检测用户名是否已存在”的接口，接口需要传入“用户名”参数，接口返回一个布尔值告知前端该用户名是否已存在。
public interface UserService {
Boolean checkUsername(String username);
}
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public Boolean checkUsername(String username) {
User user = userMapper.selectByUsername(username);
return user != null;
}
}
以上代码中提供了一个UserService接口，我们在该接口中声明了一个checkUsername方法，用于检测指定的用户名是否已存在。在ServiceImpl中，我们首先通过Depency Injection(依赖注入)注入了UserMapper对象，然后在checkUsername()方法中，我们调用UserMapper的查询用户名方法，获取符合条件的记录。如果查询结果不为空，说明指定用户名的记录已经存在，我们返回True，否则返回False。
@Mapper
@Repository
public interface UserMapper {
@Select("SELECT * FROM user WHERE username = #{username}")
User selectByUsername(String username);
}
以上代码中，我们在Mapper层中提供一个查询用户名的方法来检测是否存在重复记录。在该方法中，通过select查询语句根据“用户名”字段去查询user表中的记录，如果查询到了符合条件的用户信息，则返回该用户实体类对象，否则返回null。
在上面的攻略中，我们通过Bootstrap和Mybatis两个框架，实现了表单提交数据重复验证的功能。在前端页面中，我们增加了一个“检测用户名是否已存在”的按钮，当提交表单时，我们将通过ajax的方式调用服务器端的检测重复数据的接口进行检测，在服务器端，通过调用Service层检测用户信息是否存在的方法来查询数据库是否存在该用户信息，返回检测的结果。如该例中所示，这种方式可以用来检测表单提交数据的重复性，我们也可以将其应用到其他场景中。
本文链接：http://task.lmcjl.com/news/8894.html