Javascript文件未加载到Jade文件中

Question

Here's the file structure i am using

-----+root
----------+app
--------------+common
--------------+config
--------------+controllers
--------------------------+rootPage.js
----------+public
--------------+rootPage.jade
----------+server.js

Here's my jade file

doctype
html(lang = 'en')
    head
        title PlanUrNight
        meta(charset = 'utf-8')
        link(rel = 'stylesheet' href = '//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css')
        link(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js' rel = 'stylesheet')
        link(rel = 'stylesheet' href = './css/rootPage.css')
    body
        nav.navbar.navbar-inverse(role= 'navigation')
            .navbar-header
                button.navbar-toggle.collapsed( type='button', data-toggle='collapse', data-target='#navbar-inverse', aria-expanded='false', aria-controls='navbar')
                    span.sr-only Toggle navigation
                    span.icon-bar
                    span.icon-bar
                    span.icon-bar
                a.navbar-brand(href='#') PlanUrNight
            .collapse.navbar-collapse#navbar-inverse
                ul.nav.navbar-nav
                    li: a( href="#") Home
                .collapse.navbar-collapse.navbar-right
                    .facebook-login-wrapper
                        a.btn.btn-primary(href='/auth/facebook') Facebook
                            span.fa.fa-facebook 
        .container-fluid
            .row
                .col-md-8.col-md-offset-2.main-container
                    .images-container
                        img.drink(src='img/drinking.png')
                        img.dance(src='img/couple_dancing.png')
                        img.club(src='img/club_ball.png')
            .row
                .col-md-2.col-md-offset-6.search-container
                    span.glyphicon.glyphicon-search
            .input-group
                    input.form-control(type='text', placeholder='Search')

    script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript')
    script( src='./controllers/rootPage.js' type='text/javascript')

I have tried multiple variations of the source, but it just doesn't seem to be loading the JavaScript file. Each time I get an error log in my console, saying Error 404: rootPage.js not found

I am using express with node, and in my server.js file I have the following line for serving static files

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

So what am I doing wrong here? Does the usage of the app.use line above change the root of my directory in some way so that I need to change the file path to access my JS files? Or is there a different way to load JS files in Jade?

Answer 1

Your file organization is a bit wonky. Based on the one middleware you showed us, all files in the /public folder will be served as-is, but no static files elsewhere will be.

Generally, jade files that you're rendering with server logic are in a /views folder which is not served directly, but instead available to server side route handlers or controller logic to call res.render with.

So if you have clientside JS files you want to serve as static content you need them either under the /public folder or create more static middleware calls to point to whatever folder they are in.

/** Edit after first two comments **/

Sorry for not providing more examples, etc before, I was on my phone.

Wonky is perhaps a harsh term and I'm sorry. What I meant was it doesn't really match the standard layouts I've seen. There's a few ways to do it, but most small(ish) Express projects at least start out with the template generated by the express command line tool.

In that case, all the stuff in your ./root/app directory would be server-side code that doesn't get directly served to the client ever. Most of the sites I've seen (exception being the default template from the MEAN.js project) follow a pattern something like this:

app - errors - models - controllers - routes - views public - css - js - img package.json server.js

Sometimes there's a lib folder that's a peer of app where you put utility stuff. 'views' is where all the jade templates live.

Everything in the public folder is exposed via a single middleware like you did:

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

Everything else will not get served as static files. If you have a clientside JS structure that uses an MVC pattern, you'd then have model, view, and controller folders under ./public/js

The MEAN.js folks take a different approach, making each logical component of the app (eg user management, etc) into a module and then organizing each module as folders that look like ./<module name>/server and ./<module name>/client with structure for models, controllers, etc, under each of those depending on if it's server code or client code.

You're correct on how to add more more static middleware.

Answer 2

尝试

  script( src='./app/controllers/rootPage.js' type='text/javascript')