mindol1004/spring-boot-rest
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

BAEL-20889 move spring-boot-vue

Browse Source
This commit is contained in:
mikr
2020-01-26 17:18:35 +01:00
parent 046abde989
commit ce99dda31b
13 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
spring-boot-modules/spring-boot-vue/.gitignore vendored Normal file
View File

@@ -0,0 +1,25 @@
/target/
!.mvn/wrapper/maven-wrapper.jar
### STS ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr
### NetBeans ###
/nbproject/private/
/build/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/

6
spring-boot-modules/spring-boot-vue/README.md Normal file
View File

@@ -0,0 +1,6 @@
## Spring Boot Vue
This module contains articles about Spring Boot with Vue.js
### Relevant Articles:
- [Vue.js Frontend with a Spring Boot Backend](https://www.baeldung.com/spring-boot-vue-js)

51
spring-boot-modules/spring-boot-vue/pom.xml Normal file
View File

@@ -0,0 +1,51 @@
<?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>
<artifactId>spring-boot-vue</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>spring-boot-vue</name>
<packaging>jar</packaging>
<description>Demo project for Spring Boot Vue project</description>
<parent>
<groupId>com.baeldung</groupId>
<artifactId>parent-boot-2</artifactId>
<version>0.0.1-SNAPSHOT</version>
<relativePath>../../parent-boot-2</relativePath>
</parent>
<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>
<!-- needed to render html templates in /resources/templates -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>
</project>

13
spring-boot-modules/spring-boot-vue/src/main/java/com/baeldung/springbootmvc/SpringBootMvcApplication.java Normal file
View File

@@ -0,0 +1,13 @@
package com.baeldung.springbootmvc;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
@SpringBootApplication
public class SpringBootMvcApplication {
public static void main(String[] args) {
SpringApplication.run(SpringBootMvcApplication.class, args);
}
}

18
spring-boot-modules/spring-boot-vue/src/main/java/com/baeldung/springbootmvc/controllers/MainController.java Normal file
View File

@@ -0,0 +1,18 @@
package com.baeldung.springbootmvc.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class MainController {
@RequestMapping(value = "/", method = RequestMethod.GET)
public String index(Model model) {
// this attribute will be available in the view index.html as a thymeleaf variable
model.addAttribute("eventName", "FIFA 2018");
// this just means render index.html from static/ area
return "index";
}
}

0
spring-boot-modules/spring-boot-vue/src/main/resources/application.properties Normal file
View File

13
spring-boot-modules/spring-boot-vue/src/main/resources/logback.xml Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
<encoder>
<pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n
</pattern>
</encoder>
</appender>
<root level="INFO">
<appender-ref ref="STDOUT" />
</root>
</configuration>

BIN
spring-boot-modules/spring-boot-vue/src/main/resources/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

98
spring-boot-modules/spring-boot-vue/src/main/resources/templates/index.html Normal file
View File

@@ -0,0 +1,98 @@
<!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>

35
spring-boot-modules/spring-boot-vue/src/test/java/com/baeldung/springbootmvc/SpringBootMvcApplicationIntegrationTest.java Normal file
View File

@@ -0,0 +1,35 @@
package com.baeldung.springbootmvc;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.result.MockMvcResultMatchers;
import static org.hamcrest.CoreMatchers.containsString;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
@RunWith(SpringRunner.class)
@SpringBootTest
@AutoConfigureMockMvc
public class SpringBootMvcApplicationIntegrationTest {
@Autowired
private MockMvc mockMvc;
/**
* If this test passes, we got a page with the thymeleaf provided variable
* value for eventName
*/
@Test
public void shouldLoadCorrectIndexPage() throws Exception {
mockMvc.perform(get("/")).andExpect(status().isOk()).
andExpect(MockMvcResultMatchers.content()
.string(containsString("FIFA 2018")));
}
}

17
spring-boot-modules/spring-boot-vue/src/test/java/org/baeldung/SpringContextTest.java Normal file
View File

@@ -0,0 +1,17 @@
package org.baeldung;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;
import com.baeldung.springbootmvc.SpringBootMvcApplication;
@RunWith(SpringRunner.class)
@SpringBootTest(classes = SpringBootMvcApplication.class)
public class SpringContextTest {
@Test
public void whenSpringContextIsBootstrapped_thenNoExceptions() {
}
}