Проблемы с роутером Vue с загрузкой Spring + Thymeleaf - PullRequest
Новая
       49

Проблемы с роутером Vue с загрузкой Spring + Thymeleaf

0 голосов
/ 09 июля 2020

Я пытаюсь использовать маршрутизатор Vue без узла на go вместе с моим приложением весенней загрузки и Thymeleaf. По какой-то причине все, что я получаю, - это пустой комментарий. Кто-нибудь знает, что потенциально может происходить?

My Controller: 

package com.salay.christophersalayportfolio.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class AdminController {

    @GetMapping("/")
    public String dashboard(){
        return "index";
    }

}

My 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.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.salay</groupId>
    <artifactId>christopher-salay-portfolio</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>christopher-salay-portfolio</name>
    <description>Back-end application for my portfolio</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-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
            <version>2.3.1.RELEASE</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>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.19</version>
        </dependency>
        <dependency>
            <groupId>com.salay</groupId>
            <artifactId>christopher-salay-portfolio</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>com.salay</groupId>
            <artifactId>christopher-salay-portfolio</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.3.1.RELEASE</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

мой индекс. html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" th:href="@{/style/main.css}">
    </head>
    <body>
        <div class="container-fluid">
            <div id="app">
                <div class="row">
                    <div class="col-2">
                        <aside th:replace="fragments/general :: navigation"></aside>
                    </div>
                    <div class="col">
                        <header th:insert="fragments/general :: header"></header>
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
        <footer th:replace="fragments/general :: footer"></footer>
    </body>
</html>

Мой генерал. html содержащий фрагменты: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Footer</title>
</head>
<body>
    <aside th:fragment="navigation">
        <ul class="nav flex-column nav-pills">
            <li v-for="nav in navigation">
                <a class="nav-link" v-bind:href="nav.path" data-toggle="pill">{{nav.item}}</a>
            </li>
        </ul>
    </aside>
    <header th:fragment="header">
        <div class="row">
            <div class="col">
                <h1 class="display-1 site-title">{{ title }}</h1>
            </div>
        </div>
    </header>

    <footer th:fragment="footer">
        <script th:replace="fragments/home :: home"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script th:src="@{/js/main.js}"></script>
    </footer>
</body>
</html>

Мой дом. html фрагмент (используется для управлять моим домашним компонентом) 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Components</title>
</head>
<body>
    <script type="text/x-template" id="home" th:fragment="home">
        <div class="row">
            <div class="col">
                <div class="jumbotron">
                    <h1 class="display-4">{{ title }}</h1>
                    <hr>
                    <p class="lead">{{ appDescription }}</p>
                </div>
            </div>
        </div>
    </script>
</body>
</html>

и моим основным. js



let homeComponent = Vue.component('Home', {
    template: '#home',
    data(){
        return {
            title: 'Home',
            appDescription: 'Here you can add contents for the front end portfolio website.'
        }
    }
});

const routes = [
    {path:'/', name:'Home', component: homeComponent }
]

const router = new VueRouter({
    router: routes
})

new Vue({
    el:'#app',
    router: router,
    data() {
        return {
                title: "Christopher s' portfolio admin",
                navigation: [
                    {
                    "item": "Home",
                    "path": "/"
                    }
                ]
        }
    }
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...