SpringBoot结合ajax实现登录功能
1:ajax是什么（https://www.w3school.com.cn/ajax/ajax_intro.asp）？
- AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
-
AJAX = 异步 JavaScript 和 XML。
-
AJAX 是一种用于创建快速动态网页的技术。
-
通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
-
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
2：怎么使用ajax：
准备工作：
- 准备一个jQuery的插件库 可以下载也可以使用在线的CND：<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
- 我这边是使用的是下载的
因为我这边是连接数据库给的数据 所以数据库文件：
/* Navicat Premium Data Transfer Source Server : good Source Server Type : MySQL Source Server Version : 80019 Source Host : localhost:3306 Source Schema : luyunjie Target Server Type : MySQL Target Server Version : 80019 File Encoding : 65001 Date: 21/03/2021 15:35:02 */ SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for t_user -- ---------------------------- DROP TABLE IF EXISTS `t_user`; CREATE TABLE `t_user` ( `id` bigint(0) NOT NULL AUTO_INCREMENT, `loginName` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `loginPwd` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `realName` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Records of t_user -- ---------------------------- INSERT INTO `t_user` VALUES (1, 'lyj', '12356', '陆云杰'); SET FOREIGN_KEY_CHECKS = 1;
然后配置yaml文件：
spring:
datasource:
username: root
password: 5825600
#填写你的mysql密码和账户
#?serverTimezone=UTC解决时区的报错
url: jdbc:mysql://localhost:3306/luyunjie?useSSL=false&useUnicode=false&characterEncoding=UTF-8&serverTimezone=UTC
driver-class-name: com.mysql.cj.jdbc.Driver
type: com.alibaba.druid.pool.DruidDataSource
mybatis:
configuration:
mapUnderscoreToCamelCase: true
#Spring Boot 默认是不注入这些属性值的，需要自己绑定
#druid 数据源专有配置
initialSize: 5
minIdle: 5
maxActive: 20
maxWait: 60000
timeBetweenEvictionRunsMillis: 60000
minEvictableIdleTimeMillis: 300000
validationQuery: SELECT 1 FROM DUAL
testWhileIdle: true
testOnBorrow: false
testOnReturn: false
poolPreparedStatements: true
#配置监控统计拦截的filters，stat:监控统计、log4j：日志记录、wall：防御sql注入
#如果允许时报错 java.lang.ClassNotFoundException: org.apache.log4j.Priority
#则导入 log4j 依赖即可，Maven 地址：https://mvnrepository.com/artifact/log4j/log4j
filters: stat,wall,log4j
maxPoolPreparedStatementPerConnectionSize: 20
useGlobalDataSourceStat: true
connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
数据库 实体类User：
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private int id;
private String loginName;
private String loginPwd;
private String realName;
}
Mapper接口：
@Repository
@Mapper
public interface UserMapper {
@Select("select loginName from t_user")
String getName();
@Select("select loginPwd from t_user")
String getloginPwd();
}
重写server层：
public interface UserMapperImp {
String getName();
String getloginPwd();
}
接口实现类UserServlet ：
@Service
public class UserServlet implements UserMapperImp{
@Autowired
UserMapper mapper;
@Override
public String getName() {
return mapper.getName();
}
@Override
public String getloginPwd() {
return mapper.getloginPwd();
}
}
在测试类中测试 如果结果如下 即可：
Controller层：MyAjax：
@CrossOrigin//解决跨域问题
@Controller
public class MyAjax {
@Autowired
UserServlet userServlet;
@RequestMapping("/jie")
@ResponseBody
public String index(String name , String pwd){
String msg="";
if (name!=null){
if (userServlet.getName().equals(name)){
msg=" OK";
}else {
msg="账户错误";
}
}if (pwd!=null){
if (userServlet.getloginPwd().equals(pwd)){
msg=" OK";
}else {
msg="密码错误";
}
}
return msg;
}
}
编写index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="jquery-3.1.0.js"></script>
</head>
<body>
<p>
用户名:<input type="text" id="name" onblur="a1()"/>
<span id="username"></span>
</p>
<p>
密码:<input type="text" id="pwd" onblur="a2()"/>
<span id="userpwd"></span>
</p>
</body>
</html>
javascript部分:
<script>
function a1(){
$.post({
url:"http://localhost:8080/jie",
data:{'name':$("#name").val()},
success:function (data) {
if (data.toString()=='OK'){
$("#username").css("color","green");
}else {
$("#username").css("color","red");
}
$("#username").html(data);
}
});
}
function a2(){
$.post({
url:"http://localhost:8080/jie",
data:{'pwd':$("#pwd").val()},
success:function (data) {
if (data.toString()=='OK'){
$("#userpwd").css("color","green");
}else {
$("#userpwd").css("color","red");
}
$("#userpwd").html(data);
}
});
}
</script>
测试：
下面来讲解一下：jQuery.ajax(...)里面的参数是什么（小部分）
参考狂神的ajax笔记（https://mp.weixin.qq.com/s/tB4YX4H59wYS6rxaO3K2_g）：
- url：请求地址
- type：请求方式（post get） 但一般不用 一般需要post请求或者get请求 把ajax替换成post或者get即可
- headers：请求头
- data：要发送的数据
- contentType：即将发送信息至服务器的内容编码类型
- timeout：设置请求超时时间（毫秒）
- async：是否异步
- "json": 将服务器端返回的内容转换成相应的JavaScript对象
- "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
小杰复习参考笔记
