I have a spring web application that loads the templates correctly, but does not load static assets like CSS and images. I have added my static resources within the src/main/resources/static directory, added thymeleaf annotations, added configurations and checked them against similar questions here on StackOverflow, but none of my CSS/image files are getting loaded:
Console Error
Refused to apply style from 'http://localhost:8080/login' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Directory Structure
TemplateConfig.java
package com.valencra.recipes.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.thymeleaf.extras.springsecurity4.dialect.SpringSecurityDialect;
import org.thymeleaf.spring4.SpringTemplateEngine;
import org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring4.view.ThymeleafViewResolver;
#Configuration
public class TemplateConfig {
#Bean
public SpringResourceTemplateResolver templateResolver() {
final SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
templateResolver.setPrefix("classpath:/templates/");
templateResolver.setSuffix(".html");
templateResolver.setTemplateMode("LEGACYHTML5");
return templateResolver;
}
#Bean
public SpringTemplateEngine templateEngine() {
final SpringTemplateEngine springTemplateEngine = new SpringTemplateEngine();
springTemplateEngine.addTemplateResolver(templateResolver());
springTemplateEngine.addDialect(new SpringSecurityDialect());
return springTemplateEngine;
}
#Bean
public ThymeleafViewResolver viewResolver() {
final ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
viewResolver.setTemplateEngine(templateEngine());
viewResolver.setOrder(1);
return viewResolver;
}
}
layout.html
<!DOCTYPE html>
<html lang="en">
<head th:fragment="head">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My Recipes</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" th:href="#{/css/unsemantic-grid-responsive.css}">
<link rel="stylesheet" th:href="#{/css/styles.css}">
</head>
<body>
<nav th:fragment="nav">
<a th:href="#{|/profile|}" th:text="${currentUser.name}">
Chandra S.
</a>
•
<form th:action="#{/logout}" method="post" style="display: inline">
logout
</form>
</nav>
<div th:fragment="home">
<div class="grid-100">
<a th:href="#{|/|}">
<h1>
<img th:src="#{/images/chefbot.svg}" height="60px">
<br>
My Recipes
</h1>
</a>
</div>
</div>
<div th:fragment="favorite">
<form th:action="#{|/recipes/${recipe.id}/favorite|}" method="post" style="display:inline">
<button type="submit">
<img th:src="${recipe.isFavorite(currentUser)} ? #{/images/favorited.svg} : #{/images/favorite.svg}" style="height: 15px;">
</button>
</form>
</div>
</body>
</html>
login.html
<!doctype html>
<html lang="en">
<head th:replace="layout :: head"></head>
<body>
<nav>
<a th:href="#{/signup}">
sign-up
</a>
</nav>
<div class="grid-container">
<div th:replace="layout :: home"></div>
<div class="grid-100">
<div class="recipes">
<form th:action="#{|/login|}" method="post" th:object="${user}">
<div class="prefix-20 grid-60 suffix-20">
<p>
<input placeholder="Username" th:field="*{username}"> </input>
</p>
</div> <div class="clear"></div>
<div class="prefix-20 grid-60 suffix-20">
<p>
<input placeholder="Password" type="password" th:field="*{password}"> </input>
</p>
</div> <div class="clear"></div>
<div class="prefix-20 grid-60 suffix-20">
<p>
<button>Login</button>
</p>
</div> <div class="clear"></div>
</form>
</div> <!-- recipes -->
</div> <!-- grid-100 -->
</div> <!-- grid-container -->
</body>
</html>
It looks like your CSS is served as HTML.
Since you put the Stylesheets in src/main/resources/static Spring should set up most things based on sensible defaults, including setting the correct content-type header.
I assume you are using Spring Security, since you showed a login form.
It could be that your resources are protected by Spring Security. Thus instead of your stylesheet you get a 30x redirect to the login page. This would explain why your browser complains about the text/html content type, which is wrong for css but the correct type for a login page.
Do you configure HttpSecurity somewhere in your project (most likely annotated with #EnableWebSecurity)?
If so, you need to allow anonymous access to your resources:
#Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/css/**", "/images/**").permitAll()
// rest of your code
If you switch to the network tab in your browser console, you should be able to inspect the redirect to the login page.
What helped in my case was answer from #phisch and the following code
#Configuration
#EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler(
"/webjars/**",
"/img/**",
"/css/**",
"/js/**")
.addResourceLocations(
"classpath:/META-INF/resources/webjars/",
"classpath:/static/img/",
"classpath:/static/css/",
"classpath:/static/js/");
}
}
Related
Hi I'm building a skeleton of a car renting webapp and I'm trying to create a view that shows some details like location name, car name etc.
View code- car-list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vehicle List</title>
<h2 th:text="${location1}">Locations</h2>
<table class="table table-stripped">
<thead>
<td th:text="${vehicle1Name}">Vehicle Name</td>
</tr>
</thead>
<td th:text="${vehicle2Name}">Vehicle Name</td>
</tr>
</table>
</head>
<body>
</body>
</html>
And heres my controller
package com.project.CS4125.controller;
import com.project.CS4125.model.*;
import com.project.CS4125.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.List;
#Controller
#RequestMapping("/car-list")
public class VehicleController {
#GetMapping("/car-list")
public String carList(Model model){
Vehicle VWGolf = new BasicCar();
Vehicle Duster = new SUVDecorator(new BasicCar());
Location limerick= new Location("Limerick");
model.addAttribute("location1", limerick.getLocationName());
model.addAttribute("vehicle1Name", "Volkswagen Golf");
model.addAttribute("vehicle2Name", "Dacia Duster");
return "index";
}
}
My problem is the view comes up completely empty, any help appreciated.
EDIT
Before this page I have a register and login page
index.html (register page
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Register</title>
</head>
<body>
<form action="#" th:action="#{/register}" th:object="${user}"
method="post">
<p>User Name <input type="text" name="name"></p>
<p>Password <input type="password" name="password"></p>
<button type="submit">Register</button>
</form>
<button>Login Here</button>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<form action="#" th:action="#{/login}" th:object="${user}"
method="post">
<p>User Name <input type="text" name="name"></p>
<p>Password <input type="password" name="password"></p>
<button type="submit">Login</button>
</form>
<button>Register Here</button>
</body>
</html>
And heres the controller for these
#Controller
#RequestMapping("/")
public class IndexController {
#Autowired
private UserService userService;
#Autowired
private CustomerFactory userFactory;
#PostMapping("/register")
public String registerUser(#ModelAttribute User user){
User u = userFactory.createUser(user.getName(), user.getPassword());
userService.saveUser(u);
return "login";
}
#GetMapping("/login")
public String login(){
return "login";
}
#PostMapping("/login")
public String loginUser(#ModelAttribute User user){
User authenticatedUser = userService.authenticate(user.getName(), user.getPassword());
System.out.println(authenticatedUser.toString());
return "car-list";
}
}
Even after adding the code from the answer below I'm still getting an empty page, after submitting the login form moving to the car list page its still empty.
I also noticed in the answer the URL is http://localhost:8080/car-list but when I try it its http://localhost:8080/login
I've just tested your code and you have two problems.
The first one is at your:
#Controller
#RequestMapping("/car-list")
public class VehicleController {
#GetMapping("/car-list")
In this GetMapping you're saying that you want to access your template at /car-list/car-list.
The seccond one is with your template name. You're returning "index" when you should return "car-list", at this you're returning the template name.
So, editting your code like this:
#Controller
#RequestMapping("/car-list")
public class VehicleController {
#GetMapping
public String carList(Model model){
model.addAttribute("location1", "Answer");
model.addAttribute("vehicle1Name", "Volkswagen Golf");
model.addAttribute("vehicle2Name", "Dacia Duster");
return "car-list";
}
}
I got:
Template working and returning
laaravel version:8.0
livewire version: 2.x
Hi there
I am new to laravel livewire and facing a strange issue!. in order to execute the action i used wire:click as can be seen in the following code in my admin-login.blade.php
#section('content')
<div class="admin-login display-flex flex-align-items-center flex-justify-content-center">
<button wire:click="toDo">{{$login}}</button>
<div class="admin-form display-flex flex-direction-column flex-justify-content-center" >
#livewire('header',['name'=> 'Admin Login','width'=> '100%','height' => '20%'])
<form class=" display-flex flex-direction-column flex-justify-content-center" >
<section style="margin: 2%;">
<label for="Email">Email :<span style="color: red">*</span></label>
<input type="email" required>
</section>
<section style="margin: 2%;">
<label for="Password">Password :<span style="color: red">*</span></label>
<input type="password" required>
</section>
<button style="width: 40%; height: 5vh; align-self: center;justify-self: flex-end;">Login</button>
</form>
</div>
</div>
#endsection
my app.blade.php file in layouts directory is
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{asset('css/admin/app.css')}}">
#livewireStyles
<title>Admin Dashboard</title>
</head>
<body>
#livewire('nav-bar')
#livewire('side-bar')
#yield('content')
</body>
#livewireScripts
<script>
var isStudentDropDown = false
Livewire.on('showSidebar',()=>{
document.getElementById('sidebar').style.display = "block"
})
Livewire.on('closeSidebar',()=> {
document.getElementById('sidebar').style.display = "none"
})
Livewire.on('showDropdown',data => {
if(document.getElementById(data).style.display === "block"){
document.getElementById(data).style.display = "none"
}else{
document.getElementById(data).style.display = "block"
}
})
</script>
</html>
now my component php file
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class AdminLogin extends Component
{
public $login = "login";
public function render()
{
return view('livewire.admin-login');
}
public function hell(){
$this->login = "signup";
}
public function toDo(){
dd('do some thing');
}
}
i have checked my devtools and got no request being send to the server
Pardon me for any mistake!
Extends layouts from component
ref link https://laravel-livewire.com/docs/2.x/rendering-components#custom-layout
public function render()
{
return view('livewire.admin-login')
->extends('layouts.app')
->section('content');
}
and remove #section from admin-login.blade.php
I have to develop a project for college using Spring. I started watching some tutorials and I can't show an html page. I do the same but it returns only one string.
I'm using visual studio code.
Controller:
package com.example.springteste.controllers;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
#RestController
public class ProductController {
#GetMapping("/formulario")
public String formulario()
{
return "form";
}
}
My view is just inside templates
View:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<section id="sectionProduct">
<div>
<div id="sectionProduct-title">
<h1>
Título
</h1>
</div>
<div id="sectionProduct-form">
<form action="">
<div class="sectionProduct-form-inputLabel">
<input type="text" id="title" name="title">
<label for="title">
Título
</label>
</div>
</form>
</div>
</div>
</section>
</main>
</body>
</html>
I believe something is missing. I am a beginner in java and spring
If you want to return a view name from the controller method handler - you have to use #Controller annotation. Also make sure you put your views into the correct directory, according to your view resolver configuration.
About #RestController - as the name suggests, it shall be used in case of REST style controllers i.e. handler methods shall return the JSON/XML response directly to the client rather using view resolvers.
In your case the handler method will return "form" to the client.
I implemented the Spring Boot Spring Security for handling authentication.
But as soon as I implemented it I keep getting re-directed to the webjars js instead of the welcome page. Here is my code, please suggest what could be the problem.
header.jspf
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fm"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<title>Life Hacking Tech</title>
<link href="webjars/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/holdings.css"/>
</head>
<body>
login.jsp
<%# include file="common/header.jspf" %>
<%# include file="common/navigation.jspf" %>
<%# taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<div class="container">
<form method="POST" action="${contextPath}/login" class="form-signin">
<h2 class="form-heading">Log in</h2>
<div class="form-group ${error != null ? 'has-error' : ''}">
<input name="username" type="text" class="form-control" placeholder="Username" autofocus="autofocus"/>
<input name="password" type="password" class="form-control" placeholder="Password"/>
<span>${message}</span>
<span>${error}</span>
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log In</button>
<h4 class="text-center">Create an account</h4>
</div>
</form>
</div>
<%# include file="common/footer.jspf" %>
LoginController.java
#RequestMapping(value = "/login", method = RequestMethod.GET)
public String login(Model model, String error, String logout) {
if (error != null)
model.addAttribute("error", "Your username and password is invalid.");
if (logout != null)
model.addAttribute("message", "You have been logged out successfully.");
return "loginPost";
}
#RequestMapping(value = {"/", "/welcome"}, method = RequestMethod.GET)
public String showPage(ModelMap model) {
model.addAttribute("uname", getLoggedInUserName());
return "welcome";
}
SecurityConfiguration.java
#Configuration
#EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter{
#Autowired
private UserDetailsService userDetailsService;
#Bean
public BCryptPasswordEncoder bCryptPasswordEncoder() {
return new BCryptPasswordEncoder();
}
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/registration").permitAll().anyRequest().authenticated()
.antMatchers("/css/**", "/login").permitAll()
.antMatchers("/","/*todo*/**").authenticated()
.antMatchers("/*holding*/**").authenticated()
.and().formLogin()./*successHandler(authSuccessHandler()).*/loginPage("/login").permitAll()
.and().logout().permitAll()
.logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
.and().exceptionHandling()
.accessDeniedPage("/access-denied");
}
#Bean
public AuthenticationSuccessHandler authSuccessHandler(){
return new SimpleUrlAuthenticationSuccessHandler();
}
#Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(userDetailsService).passwordEncoder(bCryptPasswordEncoder());
}
}
After a successful login I get re-directed to the scripts in footer.jsp
footer.jspf
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="webjars/bootstrap-datepicker/1.0.1/js/bootstrap-datepicker.js"></script>
<script>
$('#targetDate').datepicker({
})
</script>
<script>
$('.nav li').click(function(e) {
$('.nav li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
});
</script>
</body>
</html>
I encountered the same issue. Adding
.antMatchers("webjars/**").permitAll()
to the SecurityConfiguration did the trick.
I have a problem with the practice code .
It's fail with formLogin?error
How can i add error url parameter with formLogin page.
When only return formLogin, it's success.
my backend code:
#GetMapping(value = "/formlogin")
public String formLogin(HttpServletRequest request, HttpServletResponse response) {
..........
return "formLogin";
}//
#GetMapping(value = "/formLoginPost")
public String formLoginPost(HttpServletRequest request, HttpServletResponse response) {
//return "formLogin?error";
return "redirect:formLogin?error";
}
and with the formLogin page code
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org"
layout:decorate="~{fragments/layout}">
<head>
<title>Login</title>
</head>
<body>
<div layout:fragment="content" th:remove="tag">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>Login page</h1>
<form th:action="#{/login}" method="post">
<div th:if="${param.error}">
<div class="alert alert-danger">
Invalid username or password.
</div>
</div>
.......
</body>
</html>
seanwang. The correct way is using Spring-Security where you can declare successful and fail URLs for authentication form. And then you can make what you need in your controller with the specified URL. The Spring-Security add security filter and validators in your application. And when the user try authenticate, filter will check if the Principal is present in Session. If yes, the user will be redirected to the successful url, if not - to the fail URL.