堆棧內存溢出
  簡體   English   中英

如何使用 spring MVC 在 JSP 中包含 js 和 CSS

[英]How to include js and CSS in JSP with spring MVC

 原文  2014-10-09 10:53:31  4   9    java/ spring/ jsp/ spring-mvc

問題描述

我想在我的 jsp 中包含 js 和 css 文件，但我不能這樣做。 我是 spring MVC 概念的新手。 很長一段時間以來，我一直在研究同一個主題。 我的索引頁面是這樣的

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/LoginPageScrip.js">

</script>

<style type="text/css">
body {
    background-image: url("LoginPageBackgroundImage.jpg");
}
</style>
</head>
<body >
    <h6>Please login in google Chrome</h6>
    <h1 align="center">Welcome to my Twitter Clone</h1>
    <div class="m" style="margin-left: 401px;   margin-top: 70px;">
        <form method="post" action="LoginForExistingUser" onsubmit="return Validate(this);">
        <fieldset>
                <legend align="center">Login</legend>
                    <div class="a">
                        <div class="l">User Name</div>
                        <div class="r">
                            <INPUT type="text" name="userName">
                        </div>
                    </div>

                    <div class="a">
                        <div class="l">Password</div>
                        <div class="r">
                            <INPUT type="password" name="password">
                        </div>
                    </div>
                    <div class="a">
                        <div class="r">
                            <INPUT class="button" type="submit" name="submit"
                                value="Login">
                        </div>
                    </div>
                    <i align="center" style="margin-left: 183px;">New User?  <a href="signup.html"><u>Signup</u></a></i>
            </fieldset>
    </form>
    </div>
</body> 
</html>

而我的spring-dispatcher-servlet.xml是這樣的。

<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    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">

        <context:component-scan base-package="com.csc.student" />
        <mvc:annotation-driven/>
        <!--<bean id="HandlerMapping" class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping" />-->   
        <!-- <bean name="/welcome.html" class ="csc.csc.helloController.HelloController" /> -->
    <bean id="viewResolver" class = "org.springframework.web.servlet.view.InternalResourceViewResolver" >
        <property name="prefix">
            <value>/WEB-INF/</value>
        </property>
        <property name ="suffix">
            <value>.jsp</value>
        </property>
    </bean>
</beans>

我的controller是這樣的。

package com.csc.student;

    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.servlet.ModelAndView;

    @Controller
    public class StudentInfoController {

        @RequestMapping(value = "/indexPage.html", method = RequestMethod.GET)
        public ModelAndView getAdmissionFrom() {
            ModelAndView model = new ModelAndView("indexPage");
            return model;
        }
    }

有人可以幫助我嗎？ 我非常努力，但我沒有得到任何解決方案。 我將我的 js 和 css 文件保存在 WEB-INF 文件夾中。

9 個解決方案

解決方案1
 23 已采納  2014-10-09 13:40:11

首先，您需要在 dispatcher-servlet 文件中聲明您的資源，如下所示：

<mvc:resources mapping="/resources/**" location="/resources/folder/" />

任何帶有 url 映射 /resources/** 的請求將直接查找 /resources/folder/。

現在在jsp文件中你需要像這樣包含你的css文件：

<link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">

同樣，您可以包含 js 文件。

希望這能解決您的問題。

解決方案2
 20  2014-10-09 12:56:59

將style.css直接放入webapp/css文件夾中，而不是放入WEB-INF文件夾中。

然后將以下代碼添加到您的spring-dispatcher-servlet.xml

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

然后將以下代碼添加到您的jsp頁面中

<link rel="stylesheet" type="text/css" href="css/style.css"/>

我希望它會起作用。

解決方案3
 5  2016-07-07 10:33:41

在您只使用 spring 而不是 spring mvc 的情況下，請采用以下方法。

將以下內容放在 servlet 調度程序中

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

正如您會注意到樣式表位置的 /css，如果您沒有 spring mvc 所需的文件夾結構，則不必位於 /resources 文件夾中，就像 spring 應用程序一樣。同樣適用於 javascript 文件，字體，如果你需要它們等等。

然后，您可以像這樣根據需要訪問資源

<link rel="stylesheet" href="css/vendor/swiper.min.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />

我相信有人會發現這很有用，因為大多數示例都使用 spring mvc

解決方案4
 3  2014-10-09 10:59:53

您不能直接訪問WEB-INF夾下的任何內容。 當瀏覽器請求你的 CSS 文件時，他們看不到里面的 WEB-INF 文件夾。

嘗試將您的文件css/css文件夾放在WebContent下。

並在調度程序 servlet 中添加以下內容以授予訪問權限，

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

與您的 js 文件類似。 這里有一個很好的例子

解決方案5
 2  2016-08-23 10:29:12

將您的 css/js 文件放在src/main/webapp/resources文件夾中。 不要將它們放在WEB-INF或src/main/resources 。

然后將此行添加到 spring-dispatcher-servlet.xml

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

在jsp頁面中包含css/js文件

<link href="<c:url value="/resources/style.css" />" rel="stylesheet">

不要忘記在你的jsp中聲明taglib

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

解決方案6
 0  2015-09-09 13:09:01

您需要在調度程序 serverlet 文件中聲明資源。下面是兩個聲明

<mvc:annotation-driven />
<mvc:resources location="/resources/" mapping="/resources/**" />

解決方案7
 0  2020-04-03 13:33:29

您應該將包含 css 和 js 文件的文件夾放入“webapp/resources”。 如果你把它們放在“src/main/java”中，你必須改變它。 它對我有用。

解決方案8
 0  2020-04-22 11:00:27

如果您使用基於 Java 的注釋，您可以這樣做：

 @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("/static/");
    }

其中靜態文件夾

src  
│
└───main
    └───java
    └───resources
    └───webapp
        └───static
            └───css
            └───....

解決方案9
 0  2022-07-30 04:08:01

任何想要在 src/main/resources 文件夾中存儲 js 和 css 文件的人的解決方案：項目結構圖像

首先，在 spring-mvc-config.xml 文件中聲明您的資源，如下所示：

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

然后只需使用它來訪問資源文件：

<link rel="stylesheet" href="<c:url value="/css/style.css"/>">
<script src="<c:url value="/js/script.js"/>"></script>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JSP頁面中的Spring MVC + Security CSS和JS Spring MVC在JSP頁面中導入CSS和JS 在Spring MVC項目的“ jsp”中如何使用“ css”？ 在Mavens中的JSP中訪問CSS JS資源（不使用Spring MVC） 如何在Spring WebMVC框架的JSP文件中包含外部JS文件？ 如何渲染不同CSS和圖像的JSP文件Spring MVC 如何在Spring MVC App中將CSS文件與JSP視圖連接正確？ 如何在我的JSP中包含CSS？ Spring Boot MVC將JSP文件包含在另一個JSP文件中 如何將CSS和JS添加到Spring MVC項目
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM