spring boot 整合Jqury 和 bootstrap

最新推荐文章于 2023-08-27 15:37:42 发布

l1306395862

最新推荐文章于 2023-08-27 15:37:42 发布

阅读量164

点赞数

本文链接：https://blog.youkuaiyun.com/l1306395862/article/details/107467557

版权

本文介绍如何在Spring Boot项目中集成WebJars，以便引入jQuery和Bootstrap库。通过添加版本号，确保正确引用资源，并展示了利用Ajax实现登录页面的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导入webjars

　　　　　<dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.1</version>
        </dependency>

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator</artifactId>
            <version>0.32</version>
        </dependency>

在需要的页面引入，添加的时候可能需要添加版本号

<link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.css">
 
<script src="webjars/jquery/jquery.js"></script>
<script src="webjars/bootstrap/js/bootstrap.js"></script>

使用ajax实现登陆页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="webjars/jquery/3.4.1/jquery.js"></script>
</head>
<body>
        <label>用户
            <input type="text" id="username" name="username">
        </label>
        <br>
        <label>密码
            <input type="password" id="password" name="password">
        </label>
        <br>
        <button type="button"  onclick="login()">登陆</button>
        
    <script>
        function login() {
            var username =$("#username").val();
            var password =$("#password").val();

            $.ajax({
                type: "post",
                url: "/login",
                data: {
                    "username": username,
                    "password": password
                },
                success: function (data) {
                    if(data.isok){
                        location.href="/success"
                    }
                    else {
                        alert(data.message)
                    }
                }
            })

        }

    </script>
</body>
</html>