2013-04-05 19 views
6

Sto usando ExpressJS. I miei script o CSS non verranno caricati.Gli script non vengono chiamati

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
    <meta name="apple-mobile-web-app-capable" content="yes"/> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/> 
<title>Customer Info</title> 

    <link rel="stylesheet" href="/stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/> 

    <script type="text/javascript" src="/javascripts/jquery-1.9.1.js"></script> 
    <script src="/javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script> 

    <script type="text/javascript" src="/javascripts/testing.js"></script> 



    </head> 
    <body> 
     //body contents 
    </body> 
</html> 

So che il problema non è con la posizione. Quando eseguo il rendering di questa vista EJS, nessuno degli script sta caricando. Non riesco a capire perché funzionerebbe per una visione quasi identica, ma non per questa. Qualche idea?

+0

Quali errori stai ottenendo? –

+0

Assicurati che il gestore statico di Express sia elencato ** prima ** dei tuoi percorsi. –

+1

Come si configura 'express.static()'? – robertklep

risposta

4

Fase 1

Nel file node.js localizzare la parte in cui si configura l'espresso.

Sarebbe come.

var express = require('express') 
       , app = express(); 

app.configure(function() { 
    //configure the express codes go here 
} 

in cui controllare la riga di codice in cui si configura la cartella che serve i file statici. come immagini, css e js. Sarei come.

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

qui nel caso di cui sopra public dovrebbe essere esattamente il nome della cartella principale che contiene la cartella stylesheets e javascripts che lei ha citato nel suddetto html.

come

--app.js 
--package.json 
--views/ 
--node_modules/ 
--public/ 
    --stylesheets/ 
     --testing.css 
    --javascripts/ 
     --jquery-1.9.1.js 
     --jquery-ui-1.10.2.custom.js 
     --testing.js 

Fase 2

Se quanto sopra è configurato correttamente allora si può fare in modo

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

in config arriva davanti

app.use(app.router); 

in modo che puoi m assicurati che la tua linea non venga ignorata da un gestore di route 404 scritto nel router.

Fase 3

è possibile ispezionare la pagina visualizzata con Firebug o Chrome inspector e il check-in nella scheda reti qual è stata la risposta che hai ricevuto per i js e file css che hai menzionato. Come da tua domanda, il file 404 non dovrebbe essere trovato e se qualcos'altro dovresti aggiornarlo nella domanda.

Fase 4

Se ancora non posso risolvere il problema allora è necessario aggiornare la questione con i codici Node.JS che si sta utilizzando. In modo che potessimo esaminarlo.

1

credo che sia "/" all'inizio di ogni riga src che non lo sta caricando. per esempio .. usarli in questo modo

<link rel="stylesheet" href="stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/> 

<script type="text/javascript" src="javascripts/jquery-1.9.1.js"></script> 
<script src="javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script> 

<script type="text/javascript" src="javascripts/testing.js"></script> 

bene, questi script e file CSS sono nelle rispettive cartelle e fare riferimento a loro, non resta che iniziare la fonte dal suo nome direttamente, ad esempio src="folder/script.css"

Questo era se le cartelle sono un livello superiore rispetto al file html. per esempio

il file index.html è in cartella1

il file style.css è in cartella1 >> css

il file script.js è in Folder1 >> script

poi per questo livello, il suggerimento di cui sopra funzionerà al 100%. Se altri tipi di livelli ci sono, ad esempio,

index.html è in cartella1 >> >> cartella2 index.html

style.css è in cartella1 >> css

script.js è in cartella1 >> js

allora il vostro src dovrebbe essere simile

<link rel="stylesheet" href="./stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/> 

<script type="text/javascript" src="./javascripts/jquery-1.9.1.js"></script> 
<script src="./javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script> 

<script type="text/javascript" src="./javascripts/testing.js"></script> 

si prega di notare un "" punto in partenza. Significa che il codice farà riferimento al file da una cartella dietro. se il file è di 2 cartelle dietro, poi usarlo due volte, ad esempio ././folder1/css

speranza che aiuta

1

È necessario impostare expressJS da utilizzare per collegamenti statici che collegano i tuoi beni o cartella pubblica che contengono js e css cartelle.

express.static(__dirname + '/assets', { maxAge: 24*60*60*1000 } 

Quindi utilizzare i punti all'inizio dei collegamenti href o semplicemente aggiungere l'URL del server. per esempio. :

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

Problemi correlati