Nodejs加载javascript和图像问题

时间:2017-07-18 08:47:00

标签: node.js image load ejs

我开始回到Nodejs并面临一些初始问题。

我正在尝试获取静态页面,java脚本和图像从不同的文件夹加载。使用基本的Nodejs,ejs。带有index.js的根文件夹被加载并显示我放在那里的文本。但是图像和java脚本没有被加载。

看起来我错过了一些非常基本的东西。这是我的index.js文件: 在具有此index.js的基本文件夹内,有一个views文件夹,该文件夹又包含一个pages文件夹。

var cool = require('cool-ascii-faces');
var express = require('express');
var app = express();

app.set('port', (process.env.PORT || 5000));

app.use(express.static(__dirname + '/public'));

// views is directory for all template files
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.get('/', function(request, response) {
  response.render('pages/ind');
});

app.get('/cool', function(request, response){
    response.send(cool());
});


app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});

template structure

ind.ejs

<!DOCTYPE html>

<!DOCTYPE html>
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US">  <!--<![endif]-->
<head>

<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


<!-- Title -->
<title>WOTR - Coming Soon</title>


<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" >

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/ionicons.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/flexslider.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="css/owl.theme.css" />
<link rel="stylesheet" type="text/css" href="css/vegas.min.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/sidebar.css" />

<!-- Fonts -->	
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,400,300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700,900' rel='stylesheet' type='text/css'>


<!-- JS -->
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/snap.svg-min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://webnextbd.net/demo/js/respond.min.js"></script>
<![endif]-->

<!--[if lt IE 11]>
<link rel="stylesheet" type="text/css" href="http://webnextbd.net/demo/css/ie.css">
<![endif]-->

</head>
<body class="image-background">

<!-- Preloader -->
<div id="preloader">
<div id="loading-animation">&nbsp;</div>
</div>
<!-- /Preloader -->

<!-- Overlay -->
<div id="section-home" class="home-section-wrap center">
<div class="section-overlay"></div>
</div>
<!-- /Overlay -->

<!-- container -->
<div class="containers"><!-- menu -->
<!--
<nav id="menu" class="menu">
<button class="menu__handle"><span>Menu</span></button>
<div class="menu__inner">
<ul>
<li><a href="index.html"><i class="fa fa-fw fa-home"></i><span>Home</span></a></li>
-->
<!--
<li><a href="about.html"><i class="fa fa-fw fa-info"></i><span>About</span></a></li>
<li><a href="team.html"><i class="fa fa-fw fa-users"></i><span>Team</span></a></li>
<li><a href="services.html"><i class="fa fa-fw fa-gear"></i><span>Services</span></a></li>
<li><a href="portfolio.html"><i class="fa fa-fw fa-camera"></i><span>Portfolio</span></a></li>
<li><a href="contact.html"><i class="fa fa-fw fa-envelope"></i><span>Contact</span></a></li>
</ul>
-->
</div>
<!--
<div class="morph-shape" data-morph-open="M300-10c0,0,295,164,295,410c0,232-295,410-295,410" data-morph-close="M300-10C300-10,5,154,5,400c0,232,295,410,295,410">
<svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">
<path fill="none" d="M300-10c0,0,0,164,0,410c0,232,0,410,0,410"/>
</svg>
</div>
-->
</nav><!-- /menu -->

<!-- main -->
<div class="main">
<!-- header -->
<header class="header-site">
<div class="logo-site animated bounceInDown" data-animation-delay="700">
<img class="img-responsive" src="wotrlogo.png" data-at2x="wotrlogo.png" alt="Logo" />
</div>
</header>
<!-- /header -->

<!-- section -->                 
<section class="section fullscreen site-main">
<div class="container-section">
<div class="container-table">
<div class="content-table">
<!-- bt-carousel -->
<div class="bt-carousel">

<!-- home section -->
<div class="item-slide show">
<!-- container -->
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">

<!-- content slide -->
<div class="content-slide">
<!-- Clock Countdown -->
<div id="clock-countdown" class="animated bounceInDown" data-animation-delay="700"></div>
<h3 class="color-white top-margin animated bounceInDown" data-animation-delay="700" >Our website is under construction. Check us out in a feww days.</h3>

<!-- Subscribe Form -->
<div class="form animated bounceInUp" data-animation-delay="700">
<!-- container form -->
<div class="container-form">
<!--
 section page 
<div class="section-page" id="signup">
<form class="subscription-form mailchimp" method="post" id="mc-form">
<input type="email" id="email" class="border-radius-22 bottom-margin" name="email" placeholder="You Email Address" />
<button type="submit" id="subscribebtn" class="border-button no-bottom-margin">Subscribe</button>
</form>
<p class="message-error"></p>
<p class="message-success"></p>
-->
</div><!-- /section page -->
</div><!-- /container form -->
</div><!-- /Subscribe Form -->

<!-- socials icons -->
<!--
<nav class="socials-icons animated bounceInUp" data-animation-delay="700">
<ul>
<li><a href="#"><i class="ion-social-facebook"></i></a></li>
<li><a href="#"><i class="ion-social-twitter"></i></a></li>
<li><a href="#"><i class="ion-social-googleplus"></i></a></li>
<li><a href="#"><i class="ion-social-linkedin"></i></a></li>
<li><a href="#"><i class="ion-social-pinterest"></i></a></li>
<li><a href="#"><i class="ion-social-dribbble-outline"></i></a></li>
</ul> 
</nav> /socials icons 
-->

<!-- copyright -->
<footer class="copy-right animated bounceInUp" data-animation-delay="700">
<div class="copyright">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    © 2017 <a href="http://world.now ">World Now</a> - All Rights Reserved
</div>
</footer><!-- /copyright -->

</div><!-- /content slide -->
</div>
</div><!-- /row -->
</div><!-- /container -->
</div>
<!-- /home section -->

</div><!-- /bt-carousel -->
</div>
</div>
</div>
    
</section><!-- /section -->  
</div><!-- /main -->
</div><!-- /container -->        

<!-- JS -->
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/retina.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/jquery.parallaxify.min.js"></script>
<script type="text/javascript" src="js/jquery.particleground.min.js"></script>
<script type="text/javascript" src="js/vegas.min.js"></script>
<script type="text/javascript" src="js/trianglify.min.js"></script>
<script type="text/javascript" src="js/jquery.mb.YTPlayer.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.appear.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/sidebar.js"></script>
<script type="text/javascript" src="js/main.js"></script>

</body>
</html>

知道我缺少什么吗?

谢谢,

1 个答案:

答案 0 :(得分:0)

您是否尝试过提供视图文件夹以及公用文件夹?

app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/views'));