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 將自動替換 ? 為正確的函數名，以執行回調函數

　　　　小傑復習參考筆記