Spring Boot静态资源映射规则

最新推荐文章于 2024-07-10 16:15:27 发布

IT1995

最新推荐文章于 2024-07-10 16:15:27 发布

阅读量4.3k

点赞数 11

本文链接：https://blog.csdn.net/qq78442761/article/details/88338189

版权

Java 同时被 2 个专栏收录

370 篇文章 20 订阅

订阅专栏

Spring Boot

140 篇文章 4 订阅

订阅专栏

理论

演示

理论

使用Spring Boot：

1. 创建Spring Boot应用，选中需要的模块；

2. Spring Boot已默认将这些场景配置好，只需要在配置文件中指定少量配置就可以运行起来；

3. 自己编写业务代码；

静态资源文件：

"classpath:/META-INF/resources/"
"classpath:/resources/"
"classpath:/static/"
"classpath:/public"
"/"：当前项目的根目录"

如localhost:8080/abc

就会去静态资源文件里面找abc

演示

从webjars中导入jquery的maven

将

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

拷贝到pron.xml中！

把程序跑起来后，输入连接：

http://localhost:8080/webjars/jquery/3.3.1/jquery.js

即可访问文件：

在resources下创建一个public，如下图，再创建一个页面；

其中index.html源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Web</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
</head>

<style type="">
    body {
        background: url(../img/background.jpg);
        height: 100%;
    }

    .container {position: relative;}
    .main-content {
        height: 780px;
        padding-bottom: 70px;
    }
    footer {
        height: 70px;
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    footer {
        height: 70px;
        left: 0;
        bottom: 0;
        width: 100%;
        position: fixed;
    }

</style>

<body>
<!-- 导航页 -->
<nav class = "ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class = "ui container">
        <div class = "ui inverted secondary stackable menu">
            <img class = "ui Mini circular image" src ="https://avatar.csdn.net/E/5/8/3_qq78442761.jpg">
            <h2 class = "ui teal header item">My Web</h2>
            <a href="https://www.baidu.com" class="m-item item m-mobile-hide"><i class="mini computer icon"></i>点击访问我</a>
    </div>
    </div>
</nav>
<br>
<br>
<div class="m-container main-container">
    <div class="ui container main-content">
        <div class="ui stackable grid">
            <div class="six wide column">
                <div class="ui top attached segment">
                    <div class="ui header">登录后台</div>
                </div>
                <div class="ui attached segment">
                    <form method="post" ation="" class="ui form">
                        <div class="ui labeled left icon input">
                            <i class="computer icon"></i>
                            <input type="text" name="userName" placeholder="admin" >
                            <a class="ui tag label">
                                用户名
                            </a>
                        </div>
                        <br>
                        <br>
                        <div class="ui labeled left icon input">
                            <i class="briefcase icon"></i>
                            <input type="password" name="passWord" placeholder="admin">
                            <a class="ui tag label">
                                密  码
                            </a>
                        </div>
                        <br>
                        <br>
                        <button class="fluid ui teal button" type="submit">提交</button>
                    </form>
                </div>
                <div class="ui segment">
                    <div class="ui header">登录记录</div>
                        <table class="ui inverted teal table">
                            <thead>
                            <tr><th>IP地址</th>
                                <th>时间</th>
                                <th>浏览器</th>
                            </tr></thead><tbody>
                        <tr>
                            <td>127.0.0.1</td>
                            <td>2018/3/8 00:00:00</td>
                            <td>谷歌</td>
                        </tr>
                        <tr>
                            <td>192.168.1.100</td>
                            <td>2018/3/8 00:00:11</td>
                            <td>未知</td>
                        </tr>
                        </tbody>
                        </table>
                </div>
            </div>

            <div class="nine wide column">
                <div class="ui segment">
                    <img src="https://picsum.photos/800/600/?random" alt="" class="ui rounded image">
                </div>
            </div>

        </div>
    </div>
</div>

<!--footer-->
<footer class="ui inverted vertical segment">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">

        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2019 - 2020 </p>
    </div>
</footer>


</body>
</html>

运行截图如下：