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 将自动替换 ? 为正确的函数名,以执行回调函数
小杰复习参考笔记