0
votes
<mvc:resources mapping="/resources/**" location="/resources/form-1/assets/bootstrap/,/resources/form-1/assets/,/resources/form-1/assets/font-awesome/,/resources/form-1/assets/img/" />

This is my resources tag in mvc config file. Here is my jsp with tags

<?xml version="1.0" encoding="ISO-8859-1"?>

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%> <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Login Form Template</title>

    <!-- CSS -->
   <spring:url value="/resource/css/bootstrap-min.css" var="1"/>
   <spring:url value="/resources/css/font-awesome.min.css" var="2"/>
   <spring:url value="/resources/css/form-elements.css" var="3"/>
   <spring:url value="/resources/css/style.css" var="4"/>

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
    <link rel="stylesheet" href="${1}">
    <link rel="stylesheet" href="${2}">
    <link rel="stylesheet" href="${3}">
    <link rel="stylesheet" href="${4}">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Favicon and touch icons -->
    <spring:url value="/resources/ico/favicon.png" var="5"/>
    <spring:url value="/resources/ico/apple-touch-icon-114-precomposed.png" var="6"/>
    <spring:url value="/resources/ico/apple-touch-icon-144-precomposed.png" var="7"/>
    <spring:url value="/resources/ico/apple-touch-icon-72-precomposed.png" var="8"/>
    <spring:url value="/resources/ico/apple-touch-icon-57-precomposed.png" var="9"/>

    <link rel="shortcut icon" href="${5}">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="${6}">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${7}">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${8}">
    <link rel="apple-touch-icon-precomposed" href="${9}">

</head>

<body>

    <!-- Top content -->
    <div class="top-content">

        <div class="inner-bg">
            <div class="container">

                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3 form-box">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3>Login to our site</h3>
                                <p>Enter your username and password to log on:</p>
                            </div>
                            <div class="form-top-right">
                                <i class="fa fa-key"></i>
                            </div>
                        </div>

                        <div class="form-bottom">
                          <spring:nestedPath path="signup">
                            <form role="form" action="" method="post" class="login-form">
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">First Name</label>
                                    <spring:bind path="firstName">
                                        <input type="text" name="${status.expression}" value="${status.value}" />
                                    </spring:bind>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Last Name</label>
                                    <spring:bind path="lastName">
                                        <input type="text" name="${status.expression}" value="${status.value}" />
                                    </spring:bind>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Email</label>
                                    <spring:bind path="email">
                                        <input type="text" name="${status.expression}" value="${status.value}" />
                                    </spring:bind>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Phone</label>
                                    <spring:bind path="phoneNo">
                                        <input type="text" name="${status.expression}" value="${status.value}" />
                                    </spring:bind>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Gender</label>
                                <spring:bind path="gender">
                                    <input type="text" name="${status.expression}" value="${status.value}" />
                                </spring:bind>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Nationality</label>
                                    <spring:bind path="nationality">
                                        <input type="text" name="${status.expression}"  value="${status.value}" />
                                    </spring:bind>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Display Pic</label>
                                    <spring:bind path="dp">
                                        <input type="text" name="${status.expression}"  value="${status.value}" />
                                    </spring:bind>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Date of Birth</label>
                                    <spring:bind path="dob">
                                        <input type="text" name="${status.expression}"  value="${status.value}" />
                                    </spring:bind>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Password</label>
                                    <spring:bind path="createPassword">
                                        <input type="password" name="${status.expression}"  value="${status.value}" />
                                    </spring:bind>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Password</label>
                                    <spring:bind path="confirmPassword">
                                        <input type="password" name="${status.expression}"  value="${status.value}" />
                                    </spring:bind>
                                </div>


                                <button type="submit" class="btn">Sign in!</button>
                            </form>
                            </spring:nestedPath>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>


    <!-- Javascript -->
    <spring:url value="/resources/js/jquery-1.11.1.min.js" var="10"/>
    <spring:url value="/resources/js/bootstrap.min.js" var="11"/>
    <spring:url value="/resources/js/jquery.backstretch.min.js" var="12"/>
    <spring:url value="/resources/js/scripts.js" var="13"/>
    <script src="${10}"></script>
    <script src="${11}"></script>
    <script src="${12}"></script>
    <script src="${13}"></script>

    <!--[if lt IE 10]>
        <script src="assets/js/placeholder.js"></script>
    <![endif]-->

</body>


Here is the file structure:file structure

    webapp
       |-resources
           |-form-1
               |-assets
                  |-bootstrap
                       |-css
                          |-bootstrap.min.css
                  |-css
                     |-form-element.css
                     |-style.css
                  |-font-awesome
                      |-css
                         |-font-awesome.min.css
                  |-ico
                      |-favicon.png
                      |-apple-touch-icon-144-precomposed.png
                      |-apple-touch-icon-114-precomposed.png
                      |-apple-touch-icon-57-precomposed.png
                      |-apple-touch-icon-72-precomposed.png
                  |-img
                  |-js
                      |-jquery-1.11.1.min.js
                      |-jquery.backstrech.js
                      |-jquery.backstretch.min.js
                      |-scripts.js

Iam a beginner in spring mvc. working from 2 days to resolve kindly help. thanks in advance

1
Please provide further information regarding web.xml and spring-config.xml files - Cristian Colorado

1 Answers

0
votes

I think the problem is mvc:resources can handle that mapping since all paths have similar content folders, I would suggest you to modify mvc:resources path to the root of all your public resources like:

<mvc:resources mapping="/resources/**" location="/resources/form-1/assets"/>

Then you have to specify the folder for vendor resources like bootstrap or font-awesome as well as your custom files:

 <!-- CSS -->
   <spring:url value="/resource/bootstrap/css/bootstrap-min.css" var="1"/>
   <spring:url value="/resources/font-awesome/css/font-awesome.min.css" var="2"/>
   <spring:url value="/resources/css/form-elements.css" var="3"/>
   <spring:url value="/resources/css/style.css" var="4"/>

Same logic needs to be applied to all your resources references like CSS, JS, Icons, images, etc.