使用springboot整合ajax实现登录验证及查询信息。
添加jar依赖
<dependencies>
<!--<dependency>-->
<!-- <groupId>org.aspectj</groupId>-->
<!-- <artifactId>aspectjweaver</artifactId>-->
<!--</dependency>-->
<!--aop-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
</dependency>
<!--分页插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.4.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--mybatis-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.0.0</version>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.21</version>
</dependency>
<!--lombok简化bean的书写-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.28</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
yml配置
mybatis:
type-aliases-package: com.yh.pojo
mapper-locations: classpath:mappers/*.xml
configuration:
map-underscore-to-camel-case: true #驼峰
# 数据源
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql:///examdb?useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&serverTimezone=GMT%2B8&useSSL=false
username: root
password: root
thymeleaf:
cache: false #避免改了模板还要重启服务器
mode: HTML5
encoding: UTF-8
servlet:
content-type: text/html
prefix: classpath:/templates/
suffix: .html
页面结构
UserMapper接口如下：
public interface UserMapper {
@Insert("INSERT users (id, username, gendar, address, password, card) " +
"VALUES (null,#{username}, #{gendar}, #{address}, #{password}, null)")
void saveUser(User user);
@Select({"select * from users where username=#{username}"})
List<User>findUsersByName(String username);
}
User类：
@Data public class User { private Integer id; private String username; private String gendar; private String address; private String password; //private String card; }
UserService接口
public interface UserService { void saveUser(User user); List<User> findUsersByName(String username); }
UserViceImpl实现类 @Service public class UserServiceImpl implements UserService { @Autowired UserMapper userMapper; @Override public void saveUser(User user) { userMapper.saveUser(user); }
@Override
public List<User> findUsersByName(String username) {
return userMapper.findUsersByName(username);
}
}
启动类配置：
@SpringBootApplication @MapperScan("com.yh.mapper") public class ExamApp { public static void main(String[] args) { SpringApplication.run(ExamApp.class); } }
添加用户页面代码如下：
<!DOCTYPE html>
<html>
<head>
<title>用户添加</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}
h2 {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
color: #333;
}
form {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
}
label {
font-size: 14px;
font-weight: bold;
color: #333;
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"], input[type="password"] {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 3px;
margin-bottom: 20px;
box-sizing: border-box;
font-size: 16px;
color: #666;
background-color: #f7f7f7;
}
input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 3px;
background-color: #333;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.error-message {
color: red;
font-size: 14px;
margin-top: -10px;
margin-bottom: 10px;
}
input[type="file"] {
margin-bottom: 20px;
}
.gender-group label {
margin-right: 10px;
}
.gender-group {
display: flex;
align-items: center;
margin-bottom: 20px;
}
</style>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(function (){
$("#username").blur(function (){
//调用ajax的语法格式；
$.ajax({
url:'findUsersByName',
method:'get',
data:{username:$(this).val()},
success:function (resp){
console.log(resp);
if(resp=='success'){
$('#namemsg').html('用户名存在了').css('color','red');
$('input[type="submit"]').prop('disabled',true).css('color','gray');
}else{
$('#namemsg').html('');
$('input[type="submit"]').prop('disabled',false).css('color','white');
}
}
});
});
});
</script>
</head>
<body>
<h2>添加用户</h2>
<form action="/register" method="POST" enctype="multipart/form-data">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<p class="error-message" id="namemsg"></p>
<label for="phone">手机号:</label>
<input type="text" id="phone" name="phone" required>
<div class="gender-group">
<label>性别:</label>
<label for="male">男</label>
<input type="radio" id="male" name="gender" value="man" required>
<label for="female">女</label>
<input type="radio" id="female" name="gender" value="woman" required>
</div>
<label for="address">住址:</label>
<input type="text" id="address" name="address" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<label for="repassword">确认密码:</label>
<input type="password" id="repassword" name="repassword" required>
<input type="submit" value="新增">
</form>
</body>
</html>