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

我在 node 中使用 express，在我的 server.js 文件中，我有以下行用于提供静态文件

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

那么我在这里做错了什么？上面 app.use 行的使用是否会以某种方式更改我的目录的根目录，以便我需要更改文件路径才能访问我的 JS 文件？ 或者有什么不同的方法可以在 Jade 中加载 JS 文件？

Answer 1

您的文件组织有点不稳定。根据您向我们展示的一个中间件，/public 文件夹中的所有文件都将按原样提供，但其他地方不会有静态文件。

通常，您使用服务器逻辑渲染的翡翠文件位于 /views 文件夹中，该文件夹不直接提供服务，而是可供服务器端路由处理程序或控制器逻辑调用 res.render和。

因此，如果您有想要作为静态内容的客户端 JS 文件，则需要在 /public 文件夹下使用它们，或者创建更多静态中间件调用以指向它们所在的任何文件夹。

/** 在前两个 cmets 之后编辑 **/

很抱歉之前没有提供更多示例等，我正在使用手机。

Wonky 可能是一个苛刻的术语，我很抱歉。我的意思是它与我见过的标准布局并不匹配。有几种方法可以做到这一点，但大多数小型（ish）Express 项目至少从 express 命令行工具生成的模板开始。

在这种情况下，./root/app 目录中的所有内容都将是永远不会直接提供给客户端的服务器端代码。我见过的大多数网站（MEAN.js 项目中的默认模板除外）都遵循这样的模式：

应用程序 - 错误 - 楷模 - 控制器 - 路线 - 意见 上市 -CSS - js - 图像 包.json 服务器.js

有时会有一个与应用程序对等的 lib 文件夹，您可以在其中放置实用程序的东西。 'views' 是所有翡翠模板所在的位置。

公用文件夹中的所有内容都像您一样通过单个中间件公开：

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

其他所有内容都不会作为静态文件提供。如果您有一个使用 MVC 模式的客户端 JS 结构，那么您将在 ./public/js 下拥有模型、视图和控制器文件夹

MEAN.js 采用了不同的方法，将应用程序的每个逻辑组件（例如用户管理等）放入一个模块中，然后将每个模块组织为类似于 ./<module name>/server 和 ./<module name>/client 的文件夹，其结构为模型，控制器等，取决于它是服务器代码还是客户端代码。

您对如何添加更多静态中间件是正确的。

Answer 2

试试

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