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 将自动替换 ? 为正确的函数名，以执行回调函数

　　　　小杰复习参考笔记

posted @ 2021-03-21 15:59 小杰i 阅读(1367) 评论(0) 收藏举报

刷新页面返回顶部

小杰

SpringBoot结合ajax实现登录功能

公告