1
Je suis de retour sur Nodejs et face à des problèmes de démarrage.Nodejs chargement de javascript et d'images problème
J'essaie d'obtenir une page statique, avec le script java et les images chargées depuis différents dossiers. En utilisant des Nodejs de base, ejs. Le dossier racine avec index.js est chargé et affiche le texte que j'ai placé là. Mais les images et le script java ne sont pas chargés.
Il me semble qu'il me manque quelque chose de très basique. Voici mon fichier index.js: À l'intérieur du dossier de base qui a cet index.js, il y a un dossier de vues qui à son tour contient un dossier de 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'));
});
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 --> \t
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,400,300,700&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"> </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">
© 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>Toute idée de ce que je suis absent?
Merci,
Montrez-nous votre modèle/html et structure des fichiers –
Et aussi nous montrer une de vos pages EJS – Aron
de ponury, Aron .... ajouté à la fois. – user1303002