twitter-bootstrap 将 bootstrap 模板添加到 jsp

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/38859248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:12:30  来源:igfitidea点击:

Adding bootstrap template to jsp

twitter-bootstrapjspspring-mvc

提问by fryzjerro

I want to add a free layout template to my webapp, but something goes wrong.

我想向我的 web 应用程序添加一个免费的布局模板,但是出了点问题。

Project structure

项目结构

Here's head of my index.jsp file:

这是我的 index.jsp 文件的头部:

<head>
  <title>Bicycleshop Bootstarp Website Template | Home :: w3layouts</title>
  <link href="WEB-INF/template/css/bootstrap.css" rel='stylesheet' type='text/css' />
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="/WEB-INF/template/js/jquery-1.11.0.min.js"></script>
  <!-- Custom Theme files -->
  <link href="/WEB-INF/template/css/style.css" rel='stylesheet' type='text/css' />
  <!-- Custom Theme files -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  <!-- Google Fonts -->
  <link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
</head>

I included this line in dispatcher-servlet.xml:

我在 dispatcher-servlet.xml 中包含了这一行:

<mvc:resources mapping="/template/**" location="/WEB-INF/"/>

Template is in directory /WEB-INF/template/

模板在目录 /WEB-INF/template/

回答by fryzjerro

It turned out I have added bad location path. This one is proper for my structure:

原来我添加了错误的位置路径。这个适合我的结构:

<mvc:resources mapping="/template/**" location="/WEB-INF/template/"/>

Now it works just fine.

现在它工作得很好。

回答by Arthur Noseda

Generally, you can't have your static resources inside WEB-INF or a sub-directory of WEB-INF. This directory is not served by the app server. It is kind of protected area. You can serve the data if you add some kind of (code) proxy serving it for you, like when a Servlet defaults display to a JSP stored inside WEB-INF.

通常,您不能将静态资源放在 WEB-INF 或 WEB-INF 的子目录中。应用程序服务器不提供此目录。这是一种保护区。如果您添加某种(代码)代理为您提供服务,您就可以提供数据,例如当 Servlet 默认显示为存储在 WEB-INF 中的 JSP 时。

What you meant by

你的意思

<mvc:resources mapping="/template/**" location="/WEB-INF/"/>:

is all the URLs that match /template/**are to be served from /WEB-INF, thus, the URLs you specified in the JSP, starting by /WEB-INF/templatewill have Spring look inside /WEB-INF/WEB-INF, so remove the /WEB-INFfrom all the URLs inside the JSP.

是所有匹配的 URL/template/**都将从 中提供/WEB-INF,因此,您在 JSP 中指定的 URL/WEB-INF/template将在内部具有 Spring 查找/WEB-INF/WEB-INF,因此/WEB-INF从 JSP 中的所有 URL 中删除。

Then for Spring to proxy your resources, You need to use JSTL or Spring Taglib or pageContextlike so:

然后让 Spring 代理你的资源,你需要使用 JSTL 或 Spring Taglib 或pageContext像这样:

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

Or:

或者:

<link href="${pageContext.request.contextPath}/template/css/style.css" />" rel="stylesheet" type="text/css" />

Edit

编辑

With full source code:

带有完整的源代码:

web.xml

网页.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns="http://java.sun.com/xml/ns/javaee"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">

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

    <servlet-mapping>
        <servlet-name>mvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>

mvc-servlet.xml

MVC-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:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        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">

    <context:component-scan base-package="demo.spring.mvc" />

    <mvc:annotation-driven />

    <mvc:resources mapping="/resources/**" location="/WEB-INF/static/" />

    <mvc:view-resolvers>
        <mvc:jsp prefix="/WEB-INF/views/" suffix=".jsp" />
    </mvc:view-resolvers>

</beans>

Welcome.java

欢迎.java

package demo.spring.mvc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class Welcome {

    @RequestMapping("/welcome")
    public String welcome() {
        return "Welcome";
    }

}

/WEB-INF/views/Welcome.jsp

/WEB-INF/views/Welcome.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link href="<c:url value="/resources/css/default.css" />" rel="stylesheet" />
    </head>
    <body>
        <h1 class="alert">This should appear in red!</h1>
    </body>
</html>

/WEB-INF/static/css/default.css

/WEB-INF/static/css/default.css

.alert {
    color: red;
}

回答by atjoedonahue

Your reference seems incomplete as you have the CSS file (of bootstrap, but not a theme) and are missing the Bootstrap JS file.

您的参考似乎不完整,因为您有 CSS 文件(引导程序,但不是主题)并且缺少 Bootstrap JS 文件。

Also, try loading from a CDN. https://www.bootstrapcdn.com/

另外,尝试从 CDN 加载。 https://www.bootstrapcdn.com/