如何在Node.js和Jade中使用客户端Jquery？

Question

I am trying to put jquery code on the home page of my node.js app. This is what I have so far:

  script(type='text/javascript' src='public/javascripts/jquery-min.js')
  script.
    $( document ).ready(function() {
      alert('hello');

    });

which generates this html

<script type="text/javascript" src="public/javascripts/jquery-min.js"></script>


<script>$( document ).ready(function() {
  alert('hello'); 

}); 

</script>

yet I get no alert when my app starts. Additionally, when I try and visit that resource directly at http://localhost:3000/public/javascripts/jquery-min.js I get an error: Cannot GET /public/javascripts/jquery-min.js

Is this expected? Is there something I have to do so that the jquery code is accessible from my app?

Answer 1

My guess is that you haven't told your Express server where to look for static files. Add the following line to your Express configuration:

// Assuming you have a line such as var app = exports.app = express();
app.use(express.static(path.join(__dirname, 'public')));

...and anything you put in the public directory will be accessible through Express.

Answer 2

After you told Express where to look for static files like this:

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

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

It will look for files in the public folder, so if you want to reference any files you don't have to put "/public" in front of it. So this WON'T work:

script(type='text/javascript' src='public/javascripts/jquery-min.js')

But this will:

script(type='text/javascript' src='javascripts/jquery-min.js')

For GETing the files directly it works the same, you have to omit "/public" and use it like this:

http://localhost:3000/javascripts/jquery-min.js

Answer 3

well I am not sure why the resource isn't available. But by using script(type='text/javascript' src='http://code.jquery.com/jquery.min.js') It started working