896a2d071a
* commit first as binodpanta * revert test change * A short example of real-time event streaming using Spring WebFlux * Code for http://jira.baeldung.com/browse/BAEL-1527 * remove unrelated files * Apply feedback changes to rename test and remove link from readme file, ongoing work * Update formatting fixes to code and add pom changes, that partially fix test runnning issues in IDE but not in cmdline * Apply Eclipse formatter to test code and apply suggested pom fixes * BAEL-1527 Formatting fix in pom.xml * Use string.format to cleanup logging code * BAEL-1527 Changed logging pattern * Start the spring-boot-vue module, WIP * some small updates with comments * Add index html template page * merge pom.xml fixes * Add integration test with MockMvc to verify index.html content is rendered correctly * fix up pom merge issues * merge issues fix for pom * pom end of file newline
98 lines
4.1 KiB
HTML
98 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- Include Bootstrap -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
|
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
|
<!-- Optional theme -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
|
|
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<h3 class="display-3">This is an example Vue.js application developed with Spring Boot</h3>
|
|
<p class="lead">This file is rendered by a Spring built-in default controller for index.html (/) using
|
|
Spring's built-in
|
|
Thymeleaf templating engine.
|
|
Although we don't need it per se, we customized the information passed to this
|
|
view from thymeleaf by adding a controller method for "/" route to demonstrate how to pass information from
|
|
Thymeleaf to this page.
|
|
The combination of template engine and frontend framework like Vue can make this a powerful approach to build
|
|
more complex applications while leveraging the benefits of a framework like Vue.js.
|
|
You can use thymeleaf features too but this project focuses mainly on using Vue.js on the
|
|
frontend as the framework and makes minimal use of Thymeleaf.
|
|
Also we don't use any routing and multiple components in this example, so what you see is technically a
|
|
Single Page Application (SPA) without any routes configured.
|
|
</p>
|
|
|
|
<div id="contents-main">
|
|
<div class="lead">
|
|
<strong>Name of Event:</strong>
|
|
<span th:text="${eventName}"></span>
|
|
</div>
|
|
<div id="contents">
|
|
<!-- Since we create a Vue component pointing to id=contents,
|
|
Vue will generate a unordered list of items such
|
|
as this inside this div.
|
|
v-for will cause a loop to run over all players
|
|
as per the players array found in app.data
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
-->
|
|
<ul>
|
|
<li style="list-style-type:none" v-for="player in players">
|
|
<player-card
|
|
v-bind:player="player" v-bind:key="player.id">
|
|
</player-card>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- include Vue.js -->
|
|
<!-- we include babel js so that we can write ES6 code in the browser
|
|
for a more production like setup it is recommended to setup a build process
|
|
to transpile and minify the code (such as using webpack)
|
|
-->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
|
|
<script type="text/babel">
|
|
// player-card is now a Vue component that generates a 'card' showing a player
|
|
// It can be used
|
|
// declaratively like <player-card v-bind:player="someplayer">
|
|
Vue.component('player-card', {
|
|
props: ['player'],
|
|
template: `<div class="card">
|
|
<div class="card-body">
|
|
<h6 class="card-title">
|
|
{{ player.name }}
|
|
</h6>
|
|
<p class="card-text">
|
|
<div>
|
|
{{ player.description }}
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</div>`
|
|
});
|
|
|
|
var app = new Vue({
|
|
el: '#contents',
|
|
data: {
|
|
players: [
|
|
{id: "1", name: "Lionel Messi", description: "Argentina's superstar"},
|
|
{id: "2", name: "Christiano Ronaldo", description: "Portugal top-ranked player"}
|
|
]
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |