javascript - Node JS 中的简单路由和不显眼的模板引擎

标签 javascript node.js express templating-engine

这是一个多部分问题,我是 Node 的新手,所以请保持温和:)

我有一个非常简单的 Node/express 应用程序设置返回 index.html 而不使用路由...

var app = express();
var port = process.env.PORT || 1337;


app.use('/i', express.static(__dirname + '/i'));
app.use('/Stylesheets', express.static(__dirname + '/Stylesheets'));
app.use(express.static(__dirname));


app.listen(port);
console.log('listening on port ' +  port);

index.html 作为静态文件提供。

我的下一个工作是开始返回一些带有正确路由的页面,我已经知道我需要将我的路由放在 routes.js 文件中,并在我的 server.js 文件中“要求”该文件但我无法集中精力设置路线,我在网上看到的每个示例/演示似乎都以不同的方式进行。任何有关如何执行此操作的明确示例将不胜感激。

问题的下一部分是我想包含动态页面,但不知道如何使用模板引擎。我想使用一些“不显眼”的东西,以便在浏览器中查看时我的原始 HTML 文件仍然有意义。

在前端,我会简单地将 HTML 注入(inject)页面,首先使用选择器,然后使用 .html() 方法更改 html,我可以将 JSON 数据与模板绑定(bind),然后将其注入(inject)右侧通过查找类名等来放置。这将完全不引人注目,并且不需要任何丑陋的 {} 括号、内联 javascript 或指令。伪代码...

var data  = {"name":"John"};
var result = templateEngine.bind("/template.html", data)


$('.person').html(result);

那样的话,我可以保持我的原始 HTML 干净且可见,就像这样...

<div class="person">
    My Name is FirstName
</div>

我能找到的最接近的东西是 PURE - http://beebole.com/pure - 但我不确定如何让它与 NODE 一起工作(或者即使它兼容)。

为了增加复杂性,我使用的任何模板引擎都需要能够使用子模板(部分?),以便我可以包含页眉/页脚等,这在每个页面上都是相同的。我假设这可以通过在需要的地方从每个主模板中引用子模板来递归完成?

如果您仍在阅读本文,那么很明显您会发现我正在为一项新技术而苦苦挣扎,非常感谢任何帮助!

最佳答案

but I can't get my head around setting the routes up and every example/demo I see online seems to do it a different way. Any definitive examples of how to do this would really be appreciated.

不确定您在示例中看到的不同之处,但一般模式是这样的:

app.**[HTTP VERB]**(**[URL]**, function(req, res){
    res.end('<html>hello world</html>');
});

以下代码将接受对您站点的根 URL 的所有 HTTP GET 请求:

app.get('/', function(req, res){
    res.end('<html>hello world</html>');
});

虽然以下代码将接受对您站点中/test 的所有 HTTP GET 请求

app.get('/test', function(req, res){
    res.end('<html>hello world from the test folder</html>');
});

HTTP POST 请求有一个单独的路由是很常见的(例如,当用户将数据提交回服务器时)。在这种情况下,HTTP 谓词是 POST,如下例所示。

app.post('/test', function(req, res){
    res.end('<html>Thanks for submitting your info</html>');
});

在这种情况下,我将嵌入代码来直接处理请求,而不是像您指出的那样引用外部 routes.js 只是为了使这个问题中的示例更清晰。在真实的应用程序中,您将通过引用外部函数来完成此操作,以便您的 app.js 保持精简和干净。

app.get('/test', routes.NameOfFunctionToHandleGetForSlashTest);
app.post('/test', routes.NameOfFunctionToHandlePostForSlashTest);

关于javascript - Node JS 中的简单路由和不显眼的模板引擎,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13570412/

相关文章:

javascript - 按 Enter 时,组合框自动完成功能会自动选择建议列表的顶部项目

javascript - jquery $(this).attr ('href' ) 返回未定义

JavaScript 日期对象

javascript - Node JS 运行两个不同的数据库

Node.js 命令行控制台日志级别

node.js - keycloak-nodejs-connect : Could not obtain grant code: 400:Bad Request

javascript - 首先或之前验证 Controller 逻辑

javascript - 与$ ajax一起使用的Asp.Net显示默认错误页面

javascript - 连接API的WebApp与后端渲染的区别

reactjs - 使用地址栏在单页应用程序中路由用户