CODEWITHSUNDEEP
javascriptcssjspspring-mvc
Chaitanya
Chaitanya

Reputation: 81

Spring MVC: CSS & JS not getting applied to Jsp page

I am trying to create a Spring MVC Application. My first page is getting displayed but the css & js are not getting applied to it.

Following are my files:

Web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">

<display-name>SpringMVC</display-name>

<servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>

dispatcher-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
  http://www.springframework.org/schema/beans/spring-beans.xsd
  http://www.springframework.org/schema/context
  http://www.springframework.org/schema/context/spring-context.xsd
  http://www.springframework.org/schema/mvc
  http://www.springframework.org/schema/mvc/spring-mvc.xsd
  http://www.springframework.org/schema/aop
  http://www.springframework.org/schema/aop/spring-aop.xsd
  http://www.springframework.org/schema/tx 
  http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">

<context:component-scan base-package="com.spring.web.controller" />
<mvc:resources mapping="css/**" location="/css/" />
<mvc:resources mapping="js/**" location="/views/js/" />
<mvc:resources mapping="images/**" location="/views/images/" />

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/views/" />
    <property name="suffix" value=".jsp" />
</bean>
</beans>

My LoginController.java

@Controller
@RequestMapping(value="/")
public class LoginController {

private final Logger logger = Logger.getLogger(LoginController.class);

@RequestMapping(method=RequestMethod.GET)   
public ModelAndView getModelAndView()
{
    ModelAndView model=new ModelAndView("Login", "WelcomeMessage", "WELCOME TO SPRING MVC");
    return model;
}
}

My Css & Js along with other files are as shown below

CSS & JS Location

My Login.jsp is

<%@ 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">
<link rel="stylesheet" href="css/login.css" />
<script type="text/javascript" src="js/login_sign_script.js"></script>
<title>Welcome</title>

Please help. Thanks in Advance

Upvotes: 0

Views: 221

Answers (1)

flyingfox
flyingfox

Reputation: 13506

Because you have put your resource file into views folder, and views is a subfolder of WEB-INF folder.

WEB-INF resources are accessible to the resource loader of your Web-Application and not directly visible for the public.

You can find detail information about if from What is WEB-INF used for in a Java EE web application?

So there are two ways to do it:

1.If you still want to put it into your WEB-INF/views folder,then you need to change the mvc resource mapping as below:

<mvc:resources mapping="/css/**" location="/WEB-INF/views/css/" />
<mvc:resources mapping="/js/**" location="/WEB-INF/views/js/" />

2.Remove css and js folder from WEB-INF/views and made them located directly at the webapps folder as below:
enter image description here

Then we can update the resource mapping as below:

<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/js/**" location="/js/" />

Or we can remove the mvc resource mapping and add default servlet mapping in web.xml as below,it also works fine:

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
</servlet-mapping>

Edited at 2018-04-11

Below is the screenshot of my test project enter image description here

The source code is at Google Drive

Upvotes: 1

Related Questions