Main Class-
#SpringBootApplication
#EnableAutoConfiguration
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
Controller Class
#Controller
public class GreetingController {
#GetMapping("/{message}")
public String greeting(#PathVariable(name="message", required=false) String message, Model model) {
model.addAttribute("message", message);
return "greeting";
}
}
Html File
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/script.js"></script>
</head>
<body>
<p th:text="'Hello, ' + ${message} + '!'" />
</body>
</html>
Script File
console.log("hi");
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Get your greeting here</p>
</body>
</html>
Find Screenshot of Directory Structure here
Moreover, this project reference is from https://spring.io/guides/gs/serving-web-content/ with below modification
In GreetingController instead of query param accepting parameter
through path param
Added a script file to /resources/static folder
In greeting.html added one line to include script file
Use this
<script type="text/javascript" src="/script.js"></script>
Instead of
<link href="/script.js" rel="stylesheet">
You better post full home.html file and full Controller class.
OR
Try #PathVariable instead of #PathParam . As #PathParam can use with REST only, where #PathVariable used in Spring so it works in MVC and REST.
Related
My controller:
#Controller
public class IndexController {
#RequestMapping(value = "/index")
public String index(Model model) {
model.addAttribute("message", "Hello World!");
return "index";
}
}
My page:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset = "ISO-8859-1" />
<link href = "css/styles.css" rel = "stylesheet"/>
<title>Spring Boot Application</title>
</head>
<body>
<h4>Spring boot.</h4>
<p th:utext="${message}"></p>
</body>
</html>
Upon loading and rendering, this HTML appears; how do I get the message to appear?
<!DOCTYPE html>
<html>
<head>
<meta charset = "ISO-8859-1" />
<link href = "css/styles.css" rel = "stylesheet"/>
<title>Spring Boot Application</title>
</head>
<body>
<h4>Spring boot.</h4>
<p></p>
</body>
</html>
Ensure you have imported the thymeleaf dependency into your project.
Use th:text="${message}"
Method in IndexController is never being called, because this:
#RequestMapping(value = "/index")
Should be this:
#RequestMapping(value = "/")
My project structure:
resoureces
static
css
js
templates
a.html
b.html
My application.yml:
resources:
static-locations: classpath:/
And my html code:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta content="webkit" name="renderer">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="shortcut icon" href="static/img/favicon.ico" />
<script src="static/js/jquery-3.2.1.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-confirm.min.js"></script>
<link href="static/css/reset.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/pretty.css" rel="stylesheet">
<link href="static/css/iconfont.css" rel="stylesheet">
<link href="static/css/common.css" rel="stylesheet">
<link href="static/css/jquery-confirm.min.css" rel="stylesheet">
</head>
<body>
<p>test</p>
</body>
My controller:
#Controller
public class IndexController {
#GetMapping("/index")
public String toIndex(){
return "index";
}
#GetMapping("/index/test")
public String test(){
return "index";
}
}
/index css and js success
but /index/test idea show no mapping for it
What is the correct configuration?
HTML How to link CSS and JS?
The issue is that you're using relative paths, such as static/css/reset.css.
Your browser will handle these by using the current path, and append the relative one.
Assuming that you're running your application on port 8080, when you call http://localhost:8080/index, the resources will be fetched from http://localhost:8080/static/css/reset.css. However, when you're calling /index/test, the relative path would refer to http://localhost:8080/index/static/css/reset.css.
That means that due to you using relative paths, it will fetch the resources from a different location if your path is different.
One possible solution is to use a <base /> tag within the <head> section of your HTML, such as:
<base href="/" />
By setting the <base /> tag, you're telling your browser where to relatively fetch resources from.
More detailed information can be found within this question.
Also, be aware that by default, Spring boot will serve resources within src/main/resources/static on the context path itself, so might have to drop the static/ part from the URLs, such as:
<link href="css/reset.css" rel="stylesheet">
I am using thymeleaf with springboot, all the links which I mention with a local url are not working. I even checked the network tab on the browser and all css and js resources load correctly but somehow have no effect.Here is some of the code:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common-header">
<title>Fullstack app skeleton</title>
<!-- Bootstrap core CSS -->
<link th:href="#{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
rel="stylesheet"></link>
<!-- Custom styles for this template -->
<link type="text/css" th:href="#{/css/styles.css}" rel="stylesheet">
</link>
</head>
<div th:fragment="before-body-scripts">
<script th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}">
</script>
<script th:src="#{/js/fullstackapp.js}"></script>
</div>
</html>
Also, I have checked pom.xml and all dependencies have been loaded correctly. In above code in when I mention the absolute url (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css) then all the bootstrap features work, but when I use the reference to the local jar it doesn't. Can someone suggest a possible reason???
I am using one .java file to mapping Bootstrap and Jquery
#Configuration
public class MvcConfig implements WebMvcConfigurer {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/bootstrap/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/bootstrap/4.0.0/");
registry.addResourceHandler("/resources/jquery/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/jquery/3.0.0/");
}
}
Here is my html code:
<link th:href="#{/resources/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<script th:src="#{/resources/jquery/jquery.min.js}"></script>
<script th:src="#{/resources/bootstrap/js/bootstrap.js}"></script>
Hope to that help you
my data, which I try to pass from my controller to the view is apparently ignored. The console doesn't output any errors. Can somebody point me to the apparently obvious mistake I did?
Controller
#RequestMapping("/notes")
public String index(ModelMap model) {
String test = "Hello Felix";
model.addAttribute("hello", test);
return "notes";
}
View
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Notes</title>
</head>
<body>
<h1>${hello}</h1>
</body>
</html>
HTML Source
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Notes</title>
</head>
<body>
<h1></h1>
</body>
</html>
You need to return the model, something like the following should work:
Map model = ...
model.put(name, value);
return new ModelAndView(view, model);
I am facing an issue with the flash attributes which I have not able to retrieve it in the GET phase of POST/redirect/GET scenario. This is only happening when I use the ResourceBundleViewResolver.
view resolver
<bean class="org.springframework.web.servlet.view.ResourceBundleViewResolver">
<property name="basename" value="spring-views" /> </bean>
view properties
form.(class)=org.springframework.web.servlet.view.JstlView
form.url=/WEB-INF/pages/form.jsp
home.(class)=org.springframework.web.servlet.view.JstlView
home.url=/WEB-INF/pages/home.jsp
home_redirect.(class)=org.springframework.web.servlet.view.RedirectView
home_redirect.url=home
form.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="register" method="post">
Name: <input type="text" name="name"/> <br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
home.jsp
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<body>
<h2> ${status} </h2>
</body>
</html>
so in this page, home.jsp, the status should contain the value set as the flash attribute.
controller
#Controller
public class WebController {
#RequestMapping(value="/form", method=RequestMethod.GET)
public String showFormPage(){
return "form";
}
#RequestMapping(value="/register", method=RequestMethod.POST)
public ModelAndView login(#RequestParam("name") String name, RedirectAttributes flashMap){
System.out.println("name = " + name);
flashMap.addFlashAttribute("status", "Registered successfully");
//return new RedirectView("home"); -- with this returned its working
return new ModelAndView("home_redirect"); //-- with this returned its not working
//return "redirect:home"; // -- not working
}
#RequestMapping(value="/home")
public String showHomePage(){
return "home";
}
}
on the whole this is the observation made:
if used resource bundle view resolver
return view names as string - not working
return ModelAndView - not working
return RedirectAndView - working
if used internal view resolver
return view names as string - working
2 return modelandview - cannot be used to redirect
return RedirectAndView - working