欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年02月10日 11:21:38   作者：路上的追夢(mèng)人  
大家好，本篇文章主要講的是SpringBoot結(jié)合Ajax實(shí)現(xiàn)登錄頁(yè)面實(shí)例，感興趣的同學(xué)趕快來(lái)看一看，對(duì)你有幫助的話記得收藏一下

一、 Ajax

1.1 Ajax介紹

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

AJAX = 異步 JavaScript 和 XML

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

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

 1.2 異步的作用

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

 二、SpringBoot應(yīng)用Ajax

2.1 開(kāi)發(fā)配置

IDEA項(xiàng)目目錄

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 訪問(wèn)端口
server:
  port: 8080
 
mybatis:
  configuration:
    map-underscore-to-camel-case: true

 2.2 創(chuàng)建user表 

SQL實(shí)現(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實(shí)體類

user對(duì)象

@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 //解決跨域問(wèn)題
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="賬號(hào)錯(cuò)誤";
            }
        }
        if(pwd!=null){
            if(myUser!=null&&myUser.getLoginPwd().equals(pwd)){
                msg="OK";
            }else{
                msg="密碼錯(cuò)誤";
            }
        }
        return msg;
    }
}

2.4 前端測(cè)試頁(yè)面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax登錄頁(yè)面</title>
    <script src="/js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>
        賬號(hào)：<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>

2.5 測(cè)試結(jié)果

總結(jié)

到此這篇關(guān)于SpringBoot結(jié)合Ajax實(shí)現(xiàn)登錄頁(yè)面實(shí)例的文章就介紹到這了,更多相關(guān)SpringBoot登錄頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Java程序中實(shí)現(xiàn)調(diào)用Python腳本的方法詳解

    Java程序中實(shí)現(xiàn)調(diào)用Python腳本的方法詳解

    這篇文章主要介紹了Java程序中實(shí)現(xiàn)調(diào)用Python腳本的方法,結(jié)合實(shí)例形式分析了eclipse環(huán)境中使用Java調(diào)用Python腳本的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
    2018-03-03
  • Nett分布式分隔符解碼器邏輯源碼剖析

    Nett分布式分隔符解碼器邏輯源碼剖析

    這篇文章主要為大家介紹了Nett分布式分隔符解碼器邏輯源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-03-03
  • springboot實(shí)現(xiàn)修改請(qǐng)求狀態(tài)404改為200

    springboot實(shí)現(xiàn)修改請(qǐng)求狀態(tài)404改為200

    這篇文章主要介紹了springboot實(shí)現(xiàn)修改請(qǐng)求狀態(tài)404改為200方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-07-07
  • mybatis插入數(shù)據(jù)后如何返回新增數(shù)據(jù)的id值

    mybatis插入數(shù)據(jù)后如何返回新增數(shù)據(jù)的id值

    當(dāng)往mysql數(shù)據(jù)庫(kù)插入一條數(shù)據(jù)時(shí),有時(shí)候需要知道剛插入的信息,下面這篇文章主要給大家介紹了關(guān)于mybatis插入數(shù)據(jù)后如何返回新增數(shù)據(jù)id值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • SpringBoot項(xiàng)目中新增脫敏功能的實(shí)例代碼

    SpringBoot項(xiàng)目中新增脫敏功能的實(shí)例代碼

    項(xiàng)目中，由于使用端有兩個(gè)，對(duì)于兩個(gè)端的數(shù)據(jù)權(quán)限并不一樣。Web端可以查看所有數(shù)據(jù)，小程序端只能查看脫敏后的數(shù)據(jù)，這篇文章主要介紹了SpringBoot項(xiàng)目中新增脫敏功能,需要的朋友可以參考下
    2022-11-11
  • java使用正則抓取網(wǎng)頁(yè)郵箱

    java使用正則抓取網(wǎng)頁(yè)郵箱

    這篇文章主要為大家詳細(xì)介紹了java使用正則抓取網(wǎng)頁(yè)郵箱的相關(guān)資料，感興趣的小伙伴們可以參考一下
    2016-05-05
  • Java中ArrayList類的用法與源碼完全解析

    Java中ArrayList類的用法與源碼完全解析

    這篇文章主要介紹了Java中ArrayList類的用法與源碼完全解析,ArrayList類通過(guò)List接口實(shí)現(xiàn),是Java中引申出的一種數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下
    2016-05-05
  • idea 找不到符號(hào)或找不到包的幾種解決方法

    idea 找不到符號(hào)或找不到包的幾種解決方法

    這篇文章主要介紹了idea 找不到符號(hào)或找不到包的幾種解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • ES多條件查詢寫法舉例

    ES多條件查詢寫法舉例

    這篇文章主要給大家介紹了關(guān)于ES多條件查詢的相關(guān)資料,Elasticsearch多條件查詢是指在查詢數(shù)據(jù)時(shí),可以同時(shí)使用多個(gè)條件來(lái)篩選數(shù)據(jù),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • 詳解將Eclipse代碼導(dǎo)入到AndroidStudio的兩種方式

    詳解將Eclipse代碼導(dǎo)入到AndroidStudio的兩種方式

    本篇文章主要介紹了詳解將Eclipse代碼導(dǎo)入到AndroidStudio的兩種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12

最新評(píng)論