SpringBoot結(jié)合Ajax實現(xiàn)登錄頁面實例

更新時間：2022年02月10日 11:21:38 作者：路上的追夢人

大家好，本篇文章主要講的是SpringBoot結(jié)合Ajax實現(xiàn)登錄頁面實例，感興趣的同學(xué)趕快來看一看，對你有幫助的話記得收藏一下

一、 Ajax

1.1 Ajax介紹

AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。

AJAX = 異步 JavaScript 和 XML

AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。

AJAX即Asynchronous JavaScript and XML（異步JavaScript和XML），是實現(xiàn)客戶端和服務(wù)器異步通信的方法；同步：請求和頁面的跳轉(zhuǎn)同時發(fā)生；異步：請求和頁面的跳轉(zhuǎn)不同時發(fā)生；異步的請求可以實現(xiàn)頁面的局部刷新；

1.2 異步的作用

節(jié)省流量；無需刷新整個頁面,服務(wù)器壓力也降低；用戶體驗好；

二、SpringBoot應(yīng)用Ajax

2.1 開發(fā)配置

IDEA項目目錄

pom.xml配置

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>
 
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.8</version>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>

application.yml

# 應(yīng)用名稱
spring:
  application:
    name: springboot-ajax
  # thymeleaf模板
  thymeleaf:
    cache: true
    check-template: true
    check-template-location: true
    enabled: true
    encoding: UTF-8
    mode: HTML5
    prefix: classpath:/templates/
    suffix: .html
 
# 數(shù)據(jù)源
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/ajax?serverTimezone=UTC
    username: root
    password: 1234
    type: com.alibaba.druid.pool.DruidDataSource
 
# 應(yīng)用服務(wù) WEB 訪問端口
server:
  port: 8080
 
mybatis:
  configuration:
    map-underscore-to-camel-case: true

2.2 創(chuàng)建user表

SQL實現(xiàn)

drop table if exists user;
create table user(
id int(8) NOT NULL AUTO_INCREMENT,
loginName varchar(30) NULL DEFAULT NULL,
loginPwd varchar(20) NULL DEFAULT NULL,
realName varchar(30) NULL DEFAULT NULL,
PRIMARY KEY(id) USING BTREE
)ENGINE=INNODB AUTO_INCREMENT=3 ROW_FORMAT=Dynamic;
 
insert into user values(1,'XiaoChen,'123456','小陳');
insert into user values(2,'XiaoWang','123456','小王');
insert into user values(3,'XiaoHua','123456','小花');

2.3 MVC三層架構(gòu)

1）Entity實體類

user對象

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class User {
    private int id;
    private String loginName;
    private String loginPwd;
    private String realName;
}

mapper接口

@Mapper
@Repository
public interface UserMapper {
    @Select("select * from user")
    public List<User> queryUsers();
}

2) Service業(yè)務(wù)層

service層

public interface UserService {
    public List<User> queryAllUsers();
}

serviceImpl層

@Service
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;
 
    @Override
    public List<User> queryAllUsers() {
        return userMapper.queryUsers();
    }
}

3）Controller層

@RestController
@CrossOrigin //解決跨域問題
public class UserController {
    @Resource
    private UserServiceImpl userServiceImpl;
 
    @RequestMapping("/xiaoChen")
    public String index(String name,String pwd){
        String msg="";
        List<User> users=userServiceImpl.queryAllUsers();
        User myUser=null;
        for(User user:users){
            if(user.getLoginName().equals(name)){
                myUser=user;
                msg="OK";
                break;
            }else{
                msg="賬號錯誤";
            }
        }
        if(pwd!=null){
            if(myUser!=null&&myUser.getLoginPwd().equals(pwd)){
                msg="OK";
            }else{
                msg="密碼錯誤";
            }
        }
        return msg;
    }
}

2.4 前端測試頁面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax登錄頁面</title>
    <script src="/js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>
        賬號：<input type="text" id="name" onblur="test1()"/>
        <span id="username"></span>
    </p>
    <p>
        密碼：<input type="text" id="pwd" onblur="test2()"/>
        <span id="userpwd"></span>
    </p>
    <script type="text/javascript">
        function test1(){
            $.post({
                url:"http://localhost:8080/xiaoChen",
                data:{'name':$("#name").val()},
                success:function(data){
                    if(data.toString()=='OK'){
                        $("#username").css("color","green");
                    }else{
                        $("#username").css("color","red");
                    }
                    $("#username").html(data);
                }
            });
        }
        function test2(){
            $.post({
                url: "http://localhost:8080/xiaoChen",
                data: {'pwd': $("#pwd").val()},
                success: function (data) {
                    if (data.toString()=='OK') {
                        $("#userpwd").css("color", "green");
                    } else {
                        $("#userpwd").css("color", "red");
                    }
                    $("#userpwd").html(data);
                }
            });
        }
    </script>
</body>
</html>