diff --git a/pom.xml b/pom.xml index f608f5cded..06ec82e5f0 100644 --- a/pom.xml +++ b/pom.xml @@ -422,6 +422,7 @@ spring-boot-persistence spring-boot-security spring-boot-mvc + spring-boot-vue spring-boot-logging-log4j2 spring-cloud-data-flow spring-cloud @@ -1223,4 +1224,5 @@ 3.8 - \ No newline at end of file + + diff --git a/spring-boot-vue/.gitignore b/spring-boot-vue/.gitignore new file mode 100644 index 0000000000..82eca336e3 --- /dev/null +++ b/spring-boot-vue/.gitignore @@ -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/ \ No newline at end of file diff --git a/spring-boot-vue/pom.xml b/spring-boot-vue/pom.xml new file mode 100644 index 0000000000..151fd293bb --- /dev/null +++ b/spring-boot-vue/pom.xml @@ -0,0 +1,56 @@ + + + 4.0.0 + + com.baeldung + spring-boot-vue + 0.0.1-SNAPSHOT + jar + + spring-boot-vue + Demo project for Spring Boot Vue project + + + org.springframework.boot + spring-boot-starter-parent + 2.0.2.RELEASE + + + + + UTF-8 + UTF-8 + 1.8 + + + + + org.springframework.boot + spring-boot-starter-web + + + + org.springframework.boot + spring-boot-starter-test + test + + + + + org.springframework.boot + spring-boot-starter-thymeleaf + + + + + + + org.springframework.boot + spring-boot-maven-plugin + + + + + + diff --git a/spring-boot-vue/src/main/java/com/baeldung/springbootmvc/SpringBootMvcApplication.java b/spring-boot-vue/src/main/java/com/baeldung/springbootmvc/SpringBootMvcApplication.java new file mode 100644 index 0000000000..c4213af0a3 --- /dev/null +++ b/spring-boot-vue/src/main/java/com/baeldung/springbootmvc/SpringBootMvcApplication.java @@ -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); + } +} diff --git a/spring-boot-vue/src/main/java/com/baeldung/springbootmvc/controllers/MainController.java b/spring-boot-vue/src/main/java/com/baeldung/springbootmvc/controllers/MainController.java new file mode 100644 index 0000000000..37b74876cf --- /dev/null +++ b/spring-boot-vue/src/main/java/com/baeldung/springbootmvc/controllers/MainController.java @@ -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"; + } +} diff --git a/spring-boot-vue/src/main/resources/application.properties b/spring-boot-vue/src/main/resources/application.properties new file mode 100644 index 0000000000..e69de29bb2 diff --git a/spring-boot-vue/src/main/resources/static/favicon.ico b/spring-boot-vue/src/main/resources/static/favicon.ico new file mode 100644 index 0000000000..64105ac11c Binary files /dev/null and b/spring-boot-vue/src/main/resources/static/favicon.ico differ diff --git a/spring-boot-vue/src/main/resources/templates/index.html b/spring-boot-vue/src/main/resources/templates/index.html new file mode 100644 index 0000000000..9fa374282a --- /dev/null +++ b/spring-boot-vue/src/main/resources/templates/index.html @@ -0,0 +1,98 @@ + + + + + + + + + + + + + +
+

This is an example Vue.js application developed with Spring Boot

+

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

+ +
+
+ Name of Event: + +
+
+ +
    +
  • + + +
    • +
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/spring-boot-vue/src/test/java/com/baeldung/springbootmvc/SpringBootMvcApplicationTests.java b/spring-boot-vue/src/test/java/com/baeldung/springbootmvc/SpringBootMvcApplicationTests.java new file mode 100644 index 0000000000..6364351eb3 --- /dev/null +++ b/spring-boot-vue/src/test/java/com/baeldung/springbootmvc/SpringBootMvcApplicationTests.java @@ -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 SpringBootMvcApplicationTests { + + @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"))); + } + +}