Javascript文件未加載到Jade文件中

Question

這是我正在使用的文件結構

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

這是我的玉檔案

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')

我已經嘗試了源代碼的多種變體，但似乎並未加載JavaScript文件。 每次我在控制台中收到錯誤日志時，都說錯誤404：找不到rootPage.js

我正在使用帶有節點的express，並且在我的server.js文件中，以下行用於提供靜態文件

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

那我在做什么錯呢？ 上面的app.use行的用法是否會以某種方式更改目錄的根目錄，以便我需要更改文件路徑才能訪問我的JS文件？ 還是有其他方法可以在Jade中加載JS文件？

Answer 1

您的文件組織有點笨拙。 根據您顯示給我們的一種中間件，/ public文件夾中的所有文件將按原樣提供，但其他位置將沒有靜態文件。

通常，使用服務器邏輯渲染的Jade文件位於/ views文件夾中，該文件夾不會直接提供，而是可用於服務器端路由處理程序或控制器邏輯來調用res.render。

因此，如果您有要用作靜態內容的客戶端JS文件，則需要它們在/ public文件夾下，或者需要創建更多靜態中間件調用以指向它們所在的任何文件夾。

/ **在前兩個評論后編輯** /

抱歉，我以前在手機上沒有提供更多示例，等等。

Wonky可能是一個苛刻的用語，對不起。 我的意思是，它實際上與我見過的標准布局不匹配。 有幾種方法可以執行此操作，但是大多數小型（ish）Express項目至少要從Express命令行工具生成的模板開始。

在這種情況下，。/ ./root/app目錄中的所有內容都是服務器端代碼，永遠不會直接提供給客戶端。 我見過的大多數網站（例外是MEAN.js項目的默認模板）都遵循以下模式：

應用-錯誤-模型-控制器-路線-公開視圖-CSS-js-img package.json server.js

有時會有一個lib文件夾，它是應用程序的對等物，您可以在其中放置實用程序內容。 所有翡翠模板都位於“視圖”中。

公用文件夾中的所有內容都通過單個中間件公開，就像您所做的那樣：

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

其他所有內容都不會作為靜態文件提供。 如果您具有使用MVC模式的客戶端JS結構，則可以在./public/js下擁有model，view和controller文件夾。

MEAN.js人員采用不同的方法，將應用程序的每個邏輯組件（例如，用戶管理等）放入一個模塊中，然后將每個模塊組織為類似於./<module name>/server和./<module name>/client文件夾./<module name>/client ，在每個模型下都有模型，控制器等的結構，具體取決於服務器代碼還是客戶端代碼。

您如何添加更多靜態中間件是正確的。

Answer 2

嘗試

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