我进行了自己的研究,发现spring-boot只能升级到2.1.1版,我进行了属性覆盖以将其设置为3+版,然后我的显示器因百里香而变得奇怪。
https://gyazo.com/1cf33e13ad34eceffe0a118eb051d151 https://gyazo.com/527b0d0e0e434628a8b8a8661619a920
这是我尝试使用的html文件,以及在spring-boot覆盖的版本2.1.6中我遇到的错误消息,我试图用&进行转义&,但此操作不起作用。不知道该怎么办,但希望它能正确显示。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="partials::head('Google API')">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>
<body>
<div th:replace="partials::header"></div>
<div th:replace="partials::navbar"></div>
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"/>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"/></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"/></td>
</tr>
<tr>
<td class="label">City</td>
<!-- Note: Selection of address components in this example is typical.
You may need to adjust it for the locations relevant to your app. See
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
-->
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"/></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"/></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"/></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"/></td>
</tr>
</table>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
</script>
<div th:replace="partials::footer"></div>
<div th:replace="partials::scripts"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_WAS_HERE&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<!--<div th:fragment="head (title)" >-->
<!--<title><span th:text="${title}"></span></title>-->
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>-->
<!--</div>-->
<head th:fragment="head(title)">
<meta charset="UTF-8"/>
<!--<meta name="viewport" content="width=device-width, initial-scale=1"/>-->
<title th:text="${title}"></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css" />
<link rel="stylesheet" href="/static/css/components/slideshow.css" />
<link rel="stylesheet" href="/static/css/components/slidenav.css" />
<style>
.uk-card>p {
word-wrap: break-word;
}
header {
background-color: dodgerblue;
}
body, html {
/*background-image: url("https://www.lucialighting.com/wp-content/uploads/2018/02/contemporary.jpg");*/
background-color: rgb(244,247,249);
background-repeat: no-repeat;
}
.slideshow-img {
!important;
max-width: max-content;
}
.ml-1 {
margin-left: 20px;
}
.mt-1 {
margin-top: 20px;
}
.logo-size {
width: 350px;
height: 75px;
}
.login-logout {
margin-top: 25px;
}
.header-text-color {
color: whitesmoke;
}
.header-text-color-center {
color: #595959;
}
</style>
</head>
<body>
<div th:fragment="header">
<header>
<div class="uk-text-left uk-float-left">
<a class="header-text-color" href="/">How to get Kwikrliquor!</a>
</div>
<label class="header-text-color-center uk-float-">30-Minute Delivery. Free Pickup.</label>
<div class="uk-text-right uk-float-right">
<label class="header-text-color">Invite Friends</label>
</div>
</header>
</div>
<!--<nav class="uk-navbar-container uk-navbar">-->
<!--<div class="uk-navbar-left">-->
<!--<ul class="uk-navbar-nav">-->
<!--<li class="uk-active"><a href="#">Active</a></li>-->
<!--<li>-->
<!--<a href="#">Parent</a>-->
<!--<div class="uk-navbar-dropdown">-->
<!--<ul class="uk-nav uk-navbar-dropdown-nav">-->
<!--<li class="uk-active"><a href="#">Active</a></li>-->
<!--<li><a href="#">Item</a></li>-->
<!--<li class="uk-nav-header">Header</li>-->
<!--<li><a href="#">Item</a></li>-->
<!--<li><a href="#">Item</a></li>-->
<!--<li class="uk-nav-divider"></li>-->
<!--<li><a href="#">Item</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--</li>-->
<!--<li><a href="#">Item</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--<div class="uk-navbar-right">-->
<!--<ul class="uk-navbar-nav">-->
<!--<li>-->
<!--<a href="#">Parent</a>-->
<!--<div class="uk-navbar-dropdown">-->
<!--<ul class="uk-nav uk-navbar-dropdown-nav">-->
<!--<li class="uk-active"><a href="#">Active</a></li>-->
<!--<li><a href="#">Item</a></li>-->
<!--<li class="uk-nav-header">Header</li>-->
<!--<li><a href="#">Item</a></li>-->
<!--<li><a href="#">Item</a></li>-->
<!--<li class="uk-nav-divider"></li>-->
<!--<li><a href="#">Item</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</nav>-->
<nav th:fragment="navbar" class="uk-navbar uk-navbar-container" style="z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up" sec:authorize="!isAuthenticated()">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav uk-nav-parent-icon">
<li><a href="/"><img class="logo-size" src="https://cdn.discordapp.com/attachments/178547154908872704/536720432661921819/kwikr-logo.png" alt="kwikrLogo"/></a></li>
<li><a href="/products"><div>All Products</div></a></li>
<li><a href="/products/beer"><div>Beer</div></a></li>
<li><a href="/products/wine"><div>Wine</div></a></li>
<li><a href="/products/liquor"><div>Liquor</div></a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<form th:action="@{/login}" th:method="GET">
<input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Login"/>
</form>
</li>
<li>
<a href="/shoppingCart"><i class="fas fa-shopping-cart fa-3x" /></a>
</li>
</ul>
</div>
<!--<ul class="uk-navbar-nav uk-nav-parent-icon">-->
<!--<div sec:authorize="isAuthenticated()">-->
<!--<li>-->
<!--<form th:action="@{/logout}" th:method="POST">-->
<!--<input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Logout"/>-->
<!--</form>-->
<!--</li>-->
<!--</div>-->
<!--<div sec:authorize="!isAuthenticated()">-->
<!--<li>-->
<!--<form th:action="@{/login}" th:method="GET">-->
<!--<input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Login"/>-->
<!--</form>-->
<!--</li>-->
<!--</div>-->
<!--</ul>-->
</nav>
<nav th:fragment="navbar" class="uk-navbar uk-navbar-container" style="z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up" sec:authorize="hasRole('ROLE_CUSTOMER')">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav uk-nav-parent-icon">
<li><a href="/"><img class="logo-size" src="https://cdn.discordapp.com/attachments/178547154908872704/536720432661921819/kwikr-logo.png" alt="kwikrLogo"/></a></li>
<li><a href="/products"><div>All Products</div></a></li>
<li><a href="/products/beer"><div>Beer</div></a></li>
<li><a href="/products/wine"><div>Wine</div></a></li>
<li><a href="/products/liquor"><div>Liquor</div></a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-nav-parent-icon">
<li class="uk-inline">
<a href="#"><div class="uk-text-large" sec:authentication="name"></div></a>
<ul class="uk-nav uk-navbar-dropdown-nav" uk-dropdown="mode: click">
<li><a th:href="@{'/profile/edit'}">Edit Profile</a></li>
<li class="uk-nav-divider"></li>
<li>
<form th:action="@{/logout}" th:method="POST">
<input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Logout"/>
</form>
</li>
</ul>
</li>
<li>
<a href="/shoppingCart"><i class="fas fa-shopping-cart fa-3x" /></a>
</li>
</ul>
</div>
</nav>
<nav th:fragment="navbar" class="uk-navbar uk-navbar-container" style="z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up" sec:authorize="hasRole('ROLE_ADMIN')">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav uk-nav-parent-icon">
<li><a href="/"><img class="logo-size" src="https://cdn.discordapp.com/attachments/178547154908872704/536720432661921819/kwikr-logo.png" alt="kwikrLogo"/></a></li>
<li><a href="/products"><div>All Products</div></a></li>
<li><a href="/products/create">Create Product</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-nav-parent-icon">
<li class="uk-inline">
<a href="#"><div class="uk-text-large" sec:authentication="name"></div></a>
<ul class="uk-nav uk-navbar-dropdown-nav" uk-dropdown="mode: click">
<li><a th:href="@{'/profile/edit'}">Edit Profile</a></li>
<li class="uk-nav-divider"></li>
<li>
<form th:action="@{/logout}" th:method="POST">
<input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Logout"/>
</form>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<nav th:fragment="navbar" class="uk-navbar uk-navbar-container" style="z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up" sec:authorize="hasRole('ROLE_DRIVER')">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav uk-nav-parent-icon">
<li><a href="/"><img class="logo-size" src="https://cdn.discordapp.com/attachments/178547154908872704/536720432661921819/kwikr-logo.png" alt="kwikrLogo"/></a></li>
<li><a href="/products"><div>All Products</div></a></li>
<li><a href="/driver_dashboard"><div>Dashboard</div></a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-nav-parent-icon">
<li class="uk-inline">
<a href="#"><div class="uk-text-large" sec:authentication="name"></div></a>
<ul class="uk-nav uk-navbar-dropdown-nav" uk-dropdown="mode: click">
<li><a th:href="@{'/profile/edit'}">Edit Profile</a></li>
<li class="uk-nav-divider"></li>
<li>
<form th:action="@{/logout}" th:method="POST">
<input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Logout"/>
</form>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<footer th:fragment="footer" class="footer fixed-bottom">
<!--<div class="container">-->
<!--<p class="text-muted text-center">Place sticky footer content here.</p>-->
<!--</div>-->
</footer>
<div th:fragment="scripts">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="/static/js/uikit.js"></script>
<script src="/static/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit-icons.min.js"></script>
<script src="/static/js/core/grid.js"></script>
<script src="/static/js/core/grid.min.js"></script>
<script src="/static/js/components/grid.js"></script>
<script src="/static/js/components/grid.min.js"></script>
<script src="/static/js/core/scrollspy.js"></script>
<script src="/static/js/core/scrollspy.min.js"></script>
<script src="/static/js/components/slideshow.js"></script>
<script src="/static/js/components/slideshow.min.js"></script>
<script src="/static/js/components/sticky.js"></script>
<script src="/static/js/components/sticky.min.js"></script>
<script src="/static/js/core/nav.js"></script>
<script src="/static/js/core/nav.min.js"></script>
</div>
</body>
</html>
////////////////////////////////////////////////////////////////
<?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 http://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>1.5.18.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>springblog</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springblog</name>
<description>Demo project for Spring Boot</description>
<properties>
<thymeleaf.version>3.0.4.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
<java.version>1.8</java.version>
<skipTests>true</skipTests>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</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-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity4</artifactId>
<version>3.0.4.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>uikit</artifactId>
<version>2.10.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
请让我知道是否有人知道这个问题,这是当我尝试以低于3版的spring-boot enter code here
org.xml.sax.SAXParseException:对实体“库”的引用必须以“;”结尾定界符。