【发布时间】：2017-11-24 08:00:17
【问题描述】：
当我们从主页导航时，Java Script 和 CSS 没有加载。
web.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"
id="WebApp_ID" version="3.0">
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet-mapping>
<servlet-name>solutionpages</servlet-name>
<url-pattern>/solution/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>solutionpages</servlet-name>
<jsp-file>/solution.html</jsp-file>
</servlet>
</web-app>
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>
<body ng-app="puzzle">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PUZZLERAYSE</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<!-- /.row -->
<!-- Project One -->
<div ng-controller="PuzzleList">
<div ng-repeat="puzzle in puzzlesList">
<div class="row">
<div class="col-md-7">
<h4>
<a href="{{puzzle.puzzleURL}}">{{puzzle.heading}}</a>
</h4>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-7">{{puzzle.question}}</div>
<div class="col-md-5">
<!-- <h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laudantium veniam exercitationem expedita laborum at voluptate.
Labore, voluptates totam at aut nemo deserunt rem magni pariatur
quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span
class="glyphicon glyphicon-chevron-right"></span></a> -->
</div>
</div>
<hr>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Puzzlerayse 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/angular.min.js"></script>
<script>
angular.module('puzzle', [])
.controller('PuzzleList', function($scope, $http) {
$http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
then(function(response) {
$scope.puzzlesList = response.data;
});
});
</script>
</body>
</html>
solution.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>
<body ng-app="puzzle">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PUZZLERAYSE_SOLUTION</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<!-- /.row -->
<!-- Project One -->
<div ng-controller="PuzzleList">
<div ng-repeat="puzzle in puzzlesList">
<div class="row">
<div class="col-md-7">
<h4>
<a href="{{puzzle.puzzleURL}}">{{puzzle.heading}}</a>
</h4>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-7">{{puzzle.question}}</div>
<div class="col-md-5">
<!-- <h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laudantium veniam exercitationem expedita laborum at voluptate.
Labore, voluptates totam at aut nemo deserunt rem magni pariatur
quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span
class="glyphicon glyphicon-chevron-right"></span></a> -->
</div>
</div>
<hr>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Puzzlerayse 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/angular.min.js"></script>
<script>
angular.module('puzzle', [])
.controller('PuzzleList', function($scope, $http) {
$http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
then(function(response) {
$scope.puzzlesList = response.data;
});
});
</script>
</body>
</html>
我正在使用带有角度 js 的引导程序，但是当我使用以下 URL 登陆主页时，它工作正常。
http://localhost:8081/puzzleworld/
但是当我从主页导航并使用如下 URL 时
http://localhost:8081/puzzleworld/solution/xyz
没有加载 CSS 和 Java 脚本。请帮助我。
注意：- 没有定义 Java Servlet，只有 html 文件存在。
使用 Chrome 调试器出现以下错误
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8081/puzzleworld/solution/css/bootstrap.css"
【问题讨论】：
-
您是否尝试使用 / 引用您的文件？像 /css/bootstrap 和 /js/...js
-
@user5014677 是的，我试过了，但没有运气
标签： javascript css angularjs twitter-bootstrap servlets