Question

这是我正在使用的文件结构

NA

这是我的玉文件

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

我尝试了多种源代码，但它似乎并没有加载JavaScript文件。每次我在控制台中收到错误日志，说错误404：找不到rootPage.js

我正在使用express with node，而在我的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')

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

Answer 1

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

通常，使用服务器逻辑呈现的jade文件位于/ views文件夹中，不直接提供，但可供服务器端路由处理程序或控制器逻辑调用res.render用。

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

/ **在前两个评论后编辑** /

很抱歉没有提供更多示例等，我在手机上。

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

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

应用 - 错误 - 楷模 - 控制器 - 路线 - 意见上市 - css - js - img 的package.json server.js

有时会有一个lib文件夹，它是应用程序的同行，你可以放置实用程序。 'views'是所有玉石模板的所在地。

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

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

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

MEAN.js人采取不同的方法，将应用程序的每个逻辑组件（例如用户管理等）组成一个模块，然后将每个模块组织为看起来像./<module name>/server和{{1}的文件夹根据它的服务器代码或客户端代码，每个模型，控制器等的结构。

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

Answer 2

尝试

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

Javascript文件未加载到Jade文件中

2 个答案: