快递&玉 - 不能GET /模板

时间:2016-08-12 08:00:18

标签: node.js express pug

我是Express的新手,我正在尝试转换此项目

https://github.com/shawn-simon-developer/NodeAngularProxy https://github.com/shawn-simon-developer/NodeAngularProxy 在一个我可以使用玉的地方。 我已经通过npm安装了Jade。我的文件夹结构如下所示:

myProject
--app
----css (inside e.g. bootstrap)
----index.jade
----js
------controllers
------services
----libs
----templates
------main.jade
--index.js
--node_modules
----(tons of modules in here e.g.)
----jade
----sass
----express
--package.json

index.js看起来像这样:

/**
 * Module dependencies.
 */
var express = require('express');
var jade = require('jade');
var httpProxy = require('http-proxy');
var bodyParser = require('body-parser');

var apiForwardingUrl = 'http://api.open-notify.org/astros.json?';

// Solution for forwarding from http to https taken from:
// http://stackoverflow.com/questions/15801014/how-to-use-node-http-proxy-for-http-to-https-routing
var proxyOptions = {
    changeOrigin: true
};

httpProxy.prototype.onError = function (err) {
    console.log(err);
};

var apiProxy = httpProxy.createProxyServer(proxyOptions);

console.log('Forwarding API requests to ' + apiForwardingUrl);

// Node express server setup.
var server = express();
server.set('port', 3000);
server.use(express.static(__dirname + '/app'));

server.all("/space/*", function(req, res) {
    apiProxy.web(req, res, {target: apiForwardingUrl});
});

server.use(bodyParser.json());
server.use(bodyParser.urlencoded({
    extended: true
}));

// Start Server.
server.listen(server.get('port'), function() {
    console.log('Express server listening on port ' + server.get('port'));
});


server.set('view engine', 'jade'); // register the template engine

server.get('/templates/:name', function (req, res)
 { var name = req.params.name;
   res.render('templates/' + name);
});

然后像这样的index.jade

html
  head
    title Angular App
    // Angular Modules
    script(type='text/javascript', src='libs/angular/angular.js')
    script(type='text/javascript', src='libs/angular-route/angular-route.js')
    script(type='text/javascript', src='libs/jquery/jquery.js')
    // CSS Modules
    link(rel='stylesheet', type='text/css', href='css/bootstrap/bootstrap.min.css')
  body(ng-app='app')
    .container(ng-view='')
  // JS Modules
  script(type='text/javascript', src='js/app.js')
  script(type='text/javascript', src='js/controllers/MainCtrl.js')
  script(type='text/javascript', src='js/services/apiService.js')

最后是main.jade

{{ctrl.test}}

p {{ctrl.wikiData | json}}

h1 test

就是这样。我可以在项目的根目录中使用node index.js启动服务器。然而,当我去localhost:3000时,我得到许多其他人似乎也有的Cannot GET /问题。但是,由于我是Node和Express的新手,因此我无法概括其他问题的答案并解决我自己的问题。 任何人都可以帮我解决这里出了什么问题吗? 谢谢!

编辑1: 我添加了

server.set('views', __dirname + '/app/templates');
server.get('/', function (req, res) { res.render('index', {}); }); 
server.get('/', function (req, res) {
     res.send('hello');
});

到index.js的末尾,并将index.jade文件移到templates文件夹中。现在我得到的是这样的控制台日志:

angular.js:10506 GET http://localhost:3000/templates/main 404 (Not Found)

这是更进一步但不是解决方案

2 个答案:

答案 0 :(得分:0)

你不应该指向localhost。而是指向localhost:3000

http://localhoat:3000

回答主要问题

我找不到索引路由器!!你能不能像这样添加索引路由器。

server.get('/', function (req, res) {
     res.send('hello');
});

回答第二次编辑

从参数中移除模板到res.render函数。

server.get('/templates/:name', function (req, res){
    var name = req.params.name;
    res.render( name);
});

答案 1 :(得分:0)

尝试将文件结构更改为

/public [rename app to www, static, pub]
    /css
    /js
    /libs
/node_modules
/templates [jade is server-side, so don't share it for browsers]
    /layout
        index.jade
    index.jade
    main.jade
index.js
package.json

代码如下

var express = require('express');
var jade = require('jade');
var server = express();
...
server.use(express.static(__dirname + '/public'));
server.set('view engine', 'jade'); 
server.set('views', __dirname + '/templates'); 
...
server.get('/', function (req, res) { 
    res.render('index', {}); 
});

server.get('/:page', function (req, res) { 
    res.render(req.params.name, {caption: 'Example', text: 'Hello world'}); 
});

在模板中使用layout,例如

// templates/layout/index.jade
html
  head
    title Angular App
    script(...)
    link(...)
  body(ng-app='app')
    .container(ng-view='')
    block content

// templates/index.jade`
extends ./layout/index.jade
block content
  IndexPage

// templates/layout/main.jade`
extends ./layout/index.jade 
block content
  h1 {{caption}}
  {{text}}

P.S。 Jade是服务器端呈现引擎,angular是客户端。通常其中一个就足够了。

相关问题