Java Spring Boot无法加载Onsen UI JS和CSS_Java_Spring_Spring Boot_Onsen Ui

Java Spring Boot无法加载Onsen UI JS和CSS

java spring spring-boot

Java Spring Boot无法加载Onsen UI JS和CSS,java,spring,spring-boot,onsen-ui,Java,Spring,Spring Boot,Onsen Ui,Spring Boot加载网页的方式让Onsen用户界面变得一团糟。当从Spring引导应用程序提供页面时，ons导航器和ons拆分器标记不能正常工作。ons navigator标记应该充当通过其他HTML片段导航的占位符。从Spring Boot提供服务时，标记不会加载标记属性中指示的相应页面。标签应显示一个侧菜单（通常不涉及弹簧启动）。相反，点击菜单图标只会使页面变暗一点，但不会像通常那样显示菜单。我不确定在这个网页的正常操作中，Spring Boot坏了什么。我会发布尽可能多的相关代码。从

Spring Boot加载网页的方式让Onsen用户界面变得一团糟。当从Spring引导应用程序提供页面时，

ons导航器

和

ons拆分器

标记不能正常工作。ons navigator标记应该充当通过其他HTML片段导航的占位符。从Spring Boot提供服务时，标记不会加载标记属性

中指示的相应页面。

标签应显示一个侧菜单（通常不涉及弹簧启动）。相反，点击菜单图标只会使页面变暗一点，但不会像通常那样显示菜单。我不确定在这个网页的正常操作中，Spring Boot坏了什么。我会发布尽可能多的相关代码。从普通web服务器加载时，此网页确实可以正常工作。但当从Spring Boot加载时，它不工作；它显示一个空白页。如果我取消注释下面加载

home.html

文件的Thymeleaf模板标记，页面确实会加载，但这不是所需的行为，此外，侧菜单仍然无法正确加载

这可能是一个先发者吗？到目前为止，我已经尝试将静态页面放在

resources/static

目录下。不管CSS和JS是如何包含的，它似乎都会导致相同的行为

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.moonlightcheese</groupId>
    <artifactId>jobs</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>jobs</name>
    <description>Time tracking for billable hours</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <version>2.3.5.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-rest</artifactId>
        </dependency>
        <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.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web-services</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.session</groupId>
            <artifactId>spring-session-core</artifactId>
        </dependency>

        <dependency>
            <groupId>com.microsoft.sqlserver</groupId>
            <artifactId>mssql-jdbc</artifactId>
            <scope>runtime</scope>
        </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>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <!--
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    -->
    <link rel="stylesheet" th:href="@{/onsenui/css/onsenui.css}"/>
    <link rel="stylesheet" th:href="@{/onsenui/css/onsen-css-components.min.css}"/>
    <script th:src="@{/onsenui/js/onsenui.min.js}"></script>
    <!--
    <link rel="stylesheet" href="onsenui/css/onsenui.css">
    <link rel="stylesheet" href="onsenui/css/onsen-css-components.min.css">
    <script src="onsenui/js/onsenui.min.js"></script>
    -->
    <script>
        window.fn = {};

        window.fn.toggleMenu = function () {
            document.getElementById('splitter').right.toggle();
            //document.querySelector('#menu').open();
        };

        // window.fn.loadView = function (index) {
        //     document.getElementById('appTabbar').setActiveTab(index);
        //     document.getElementById('sidemenu').close();
        // };

        window.fn.loadLink = function (url) {
            window.open(url, '_blank');
        };

        window.fn.pushPage = function (page, anim) {
            if (anim) {
                document.getElementById('navigator').pushPage(page.id, {data: {title: page.title}, animation: anim});
            } else {
                document.getElementById('navigator').pushPage(page.id, {data: {title: page.title}});
            }
            document.getElementById('sidemenu').close();
        };

        window.fn.popPage = function (page, anim) {
            if (anim) {
                document.getElementById('navigator').popPage({data: {title: page.title}, animation: anim});
            } else {
                document.getElementById('navigator').popPage({data: {title: page.title}});
            }
            document.getElementById('sidemenu').close();
        }

        window.fn.resetToPage = function (page) {
            const navigator = document.querySelector('#navigator');
            navigator.resetToPage(page.name);
            document.getElementById('sidemenu').close();
        }

        var $_GET = {};
        if(document.location.toString().indexOf('?') !== -1) {
            var query = document.location
                .toString()
                // get the query string
                .replace(/^.*?\?/, '')
                // and remove any existing hash string (thanks, @vrijdenker)
                .replace(/#.*$/, '')
                .split('&');

            for(var i=0, l=query.length; i<l; i++) {
                var aux = decodeURIComponent(query[i]).split('=');
                $_GET[aux[0]] = aux[1];
            }
        }
    </script>
    <title>Jobs</title>
</head>
<body>
<ons-page>
    <ons-splitter id="splitter">
        <!-- The side menu -->
        <ons-splitter-side id="sidemenu" page="sidemenu.html" swipeable side="right" collapse width="260px"></ons-splitter-side>
        <!-- Everything not in the side menu -->
        <ons-splitter-content>
            <!-- this is how the navigator should be used -->
            <ons-navigator id="navigator" page="home.html">
                <!-- <ons-page> should be included here, but does not appear when requested from Spring Boot -->
            </ons-navigator>
            <!-- works but not desired behavior -->
            <div th:replace="home.html"></div>
        </ons-splitter-content>
    </ons-splitter>
</ons-page>
<!--
<ons-toolbar>
    <div class="center">Home</div>
    <div class="right">
        <ons-toolbar-button onclick="fn.toggleMenu()">
            <ons-icon icon="ion-navicon, material:fa-bars"></ons-icon>
        </ons-toolbar-button>
    </div>
</ons-toolbar>
<ons-navigator id="appNavigator" swipeable swipe-target-width="80px" page="home.html">
    <ons-page>
        <ons-splitter id="appSplitter">
            <ons-splitter-side id="sidemenu" page="sidemenu.html" swipeable side="right" collapse="portrait" width="260px"></ons-splitter-side>
            <ons-splitter-content page="tabbar.html"></ons-splitter-content>
        </ons-splitter>
    </ons-page>
</ons-navigator>
-->
<style>
    ons-splitter-side[animation=overlay] {
        border-left: 1px solid #bbb;
    }
</style>
<script>
    // if("page" in $_GET) {
    //     document.getElementById("navigator").setAttribute("page", $_GET["page"] + ".html");
    // } else {
    //    document.getElementById("navigator").setAttribute("page", "home.html");
    // }
</script>
</body>
</html>

<ons-page>
    <ons-toolbar>
        <div class="center">Home</div>
        <div class="right">
            <ons-toolbar-button onclick="fn.toggleMenu()">
                <ons-icon icon="fa-bars"></ons-icon>
            </ons-toolbar-button>
        </div>
    </ons-toolbar>
    "CONTENT NOT RELEVANT"
</ons-page>

@Controller
@RequestMapping("/")
public class HomeController {
    @GetMapping("/")
    public String showHome(Model model) {
        model.addAttribute("page", "home.html");
        return "index";
    }
}