Spring Boot无法加载Onsen UI JS和CSS

问题描述

关于Spring Boot加载网页的方式与Onsen UI有关。当从Spring Boot应用程序提供页面时，ons-navigator和ons-splitter标签无法正常工作。 ons-navigator标签应充当占位符，以浏览其他HTML片段。从Spring Boot提供服务时，标签不会加载标签属性<ons-navigator page="foo.html"></ons-navigator>中指示的相应页面。 <ons-splitter>标签应显示一个侧面菜单（通常在不涉及Spring Boot的情况下会显示）。相反，点击菜单图标只会使页面变暗一点，但不会像平常一样显示菜单。我不确定该网页的正常运行会破坏什么Spring Boot。我将发布尽可能多的相关代码。从普通Web服务器加载后，此网页可以正常工作。但是从Spring Boot加载时它不起作用。它显示一个空白页。如果我取消注释Thymeleaf模板标签的注释，在该标签下面加载了home.html文件，该页面的确加载了，但这不是您想要的行为，此外，侧面菜单仍然无法正确加载。

会成为首发者之一吗？到目前为止，我已经尝试将静态页面放在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>

index.html

<!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>

home.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>

HomeController.java（一个简单的Controller，如果未注释模板代码，它将仅加载home.html页面）：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

java java onsen-ui spring spring spring-boot

Spring Boot无法加载Onsen UI JS和CSS

问题描述

解决方法

相关问答