Spring Boot Web MVC

Spring boot makes easy for us developers to get up and running with a spring mvc project. You add the following dependencies and you are ready to go.

<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
</dependency>
<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
</dependency>
<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

We are using thymeleaf for our views.

Create a controller.

Pay attention to the @Controller annotation which turns this class, UserController, into a spring controller component.

@Controller
public class UserController {
}

Create a request handler within @Controller.

In this case we are using a Get request handler. Use the Model class to pass data to you view.

@GetMapping("/home")
public String home(Model model){
		log.debug("home(..)");
		
		model.addAttribute("message", "Welcome to my page");
		
		log.debug("model={}",ObjectUtils.toJson(model));
		
		return "home";
}

Create a view.

Views are generally located in the templates folder under resources folder. Here we are creating a view for our home page.

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Spring Boot Thymeleaf Hello World Example</title>

<link rel="stylesheet" th:href="@{/css/main.css}" />

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">



</head>

<body>

	<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
		<a class="navbar-brand" href="#">Folau Kaveinga</a>
	</nav>

	<div role="main" class="container">

		<div class="starter-template">
			<h1>Spring Boot Web Thymeleaf Example</h1>
			<h2>
				<span th:text="'Hello, ' + ${message}"></span>
			</h2>
		</div>

	</div>
	<!-- /.container -->
</body>

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Popper JS -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</html>

Static files

Static files such as css and js files can be served from the static folder under the resources folder.

For demo purposes, let create a main css file to style our home page.

body {
  padding-top: 5rem;
}
.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

h1{
	color:#0000FF;
}

h2{
	color:#FF0000;
}

If you start your server and go to /home, your should see the home page being displayed.

Source code on Github




Subscribe To Our Newsletter
You will receive our latest post and tutorial.
Thank you for subscribing!

required
required


Leave a Reply

Your email address will not be published.