- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
如何同时呈现页面并将我的自定义数据传输到浏览器。据我了解,它需要发送两层:第一层是模板,第二层是 JSON 数据。我想通过主干处理这些数据。
我从教程中了解到 express
和 bb app
交互如下:
res.render
向浏览器发送页面document.ready
触发jQuery.get到app.get('/post')
app.get('/post', post.allPosts)
发送数据到页面这是三个步骤,如何一步完成?
var visitCard = {
name: 'John Smit',
phone: '+78503569987'
};
exports.index = function(req, res, next){
res.render('index');
res.send({data: visitCard});
};
我应该如何在页面上捕获这个变量 - document.card
?
最佳答案
我创建了自己的小中间件函数,它向 res
对象添加了一个名为 renderWithData
的辅助方法。
app.use(function (req, res, next) {
res.renderWithData = function (view, model, data) {
res.render(view, model, function (err, viewString) {
data.view = viewString;
res.json(data);
});
};
next();
});
它包含 View 名称、 View 模型以及您要发送到浏览器的自定义数据。它调用 res.render
但传入一个回调函数。这指示 express 将编译后的 View 标记作为字符串传递给回调,而不是立即将其传递到响应中。获得 View 字符串后,我将其作为 data.view
添加到数据对象中。然后我使用 res.json
将数据对象发送到浏览器并完成编译 View :)
上面的一个警告是,请求需要使用 javascript 进行,因此它不能是整页请求。您需要一个初始请求来拉下包含将发出 ajax 请求的 javascript 的主页。
这对于当用户通过 AJAX 导航到新页面时尝试更改浏览器 URL 和标题的情况非常有用。您可以将新页面的部分 View 连同页面标题的一些数据一起发送回浏览器。然后,您的客户端脚本可以将部分 View 放在页面上它所属的位置,更新页面标题栏,并在需要时更新 URL。
如果您想将一个完整的 HTML 文档连同一些初始 JavaScript 数据一起发送到浏览器,那么您需要将该 JavaScript 代码编译到 View 本身中。这样做绝对有可能,但我从来没有找到不涉及一些字符串魔法的方法。
例如:
// controller.js
var someData = { message: 'hi' };
res.render('someView', { data: JSON.stringify(someData) });
// someView.jade
script.
var someData = !{data};
注意:使用 !{data}
代替 #{data}
因为jade默认会转义 HTML,这会将所有引号转换为 "
占位符。
一开始看起来很奇怪,但它确实有效。基本上,您在服务器上获取一个 JS 对象,将其转换为字符串,将该字符串呈现到编译后的 View 中,然后将其发送到浏览器。当文档最终到达浏览器时,它应该如下所示:
// someSite.com/someView
<script type="text/javascript">
var someData = { "message": "hi" };
</script>
希望这是有道理的。如果我要重新创建我原来的辅助方法来减轻第二种情况的痛苦,那么它看起来像这样:
app.use(function (req, res, next) {
res.renderWithData = function (view, model, data) {
model.data = JSON.stringify(data);
res.render(view, model);
};
next();
});
所有这一切都是获取您的自定义数据对象,为您将其字符串化,将其添加到 View 的模型中,然后正常渲染 View 。现在你可以调用 res.renderWithData('someView', {}, { message: 'hi' });
;您只需确保在 View 中的某个位置抓取该数据字符串并将其呈现为变量赋值语句。
html
head
title Some Page
script.
var data = !{data};
不会撒谎,这整件事感觉有点恶心,但如果它为您节省了一次额外的服务器之旅,而这就是您所追求的,那么这就是您需要做的事情。也许有人可以想出一些更聪明的方法,但我只是不明白如何才能让数据已经出现在第一次呈现的完整 HTML 文档中。
这是一个工作示例:https://c9.io/chevex/test
您需要拥有一个(免费)Cloud9 帐户才能运行该项目。登录,打开 app.js,然后点击顶部的绿色运行按钮。
关于javascript - Express - 在单个请求中向浏览器发送页面和自定义数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21172889/
我的 Web 应用程序在后端使用 Node.js 和 Express。当违反内容安全策略 (CSP) 时,报告 URI 报告空对象。我的后台代码如下: app.use(bodyParser.urlen
在服务器端提供静态服务的方式在 Express 中似乎非常简单: To serve static files such as images, CSS files, and JavaScript fil
var express = require('express'); var app = express(); 这就是我们创建快速应用程序的方式。但是这个'express()'是什么?它是方法还是构造函
我在尝试安装时收到以下错误 express : npm ERR! code ERR_OSSL_PEM_NO_START_LINE npm ERR! errno ERR_OSSL_PEM_NO_STAR
如 express 所述routing guide和 this answer ,我们可以创建“迷你应用程序”并从主应用程序使用它。但是我看到一段代码,它在模块中使用 app 而不是 router ap
我正在写一个 NestJS应用。现在我想安装 Express中间件 express-openapi-validator . 但是,我无法让它工作。有一个 description for how to
我看过很多类似的帖子,似乎我声明的 var1 似乎需要在其他地方传递,但我似乎无法弄清楚。 public Expression> CreateEqualNameExpression(string ma
Express(或 Connect 的)bodyParser 中间件被标记为已弃用,建议用户改用: app.use(connect.urlencoded()) app.use(connect.json
我只是想知道这种看似尴尬的配置的原因是什么(来自 Getting Started w/ Apollo Server ), const server = new ApolloServer({ //
我正在尝试在表单组中写入表单控件特定的验证错误消息。我在网上找到了几个教程和示例 ( such as this one ),概述了一个看似简单的 *ngIf div,如果在控件上检测到错误,则显示错误
我有一个简单的 Express 应用程序,托管在 AWS 上,使用无服务器框架。 我正在使用 serverless-http 包装 express 应用程序以部署到 AWS lambda 函数,并使用
我最近在 mozilla 教程的帮助下安装了 node 和 express。我正在安装应用程序生成器的下一步,但是当我运行时 npm install express-generator -g 在我的终
我遇到过两种不同的方式来定义 express、use() 中间件,我想知道它们之间是否有任何区别,或者它是否只是语法糖? 一个 const app = express(); app.use(cors(
我试图让我的 Jade 模板编写一个相对于当前 URL 的超链接 ( )。 例如,我的 View 是从 http://localhost/cats 调用的它看起来像这样: extends layou
检查 Express 文档我在下面看到了这种解决方案: app.all('/*', function(req, res) { console.log('Intercepting request
我似乎无法弄清楚如何包含多个模型。 我有三个模型。Tabs, Servers, and PointsTabs hasMany ServerServers belongsTo Tabs and hasM
我已使用Web PI安装IIS Express。在托盘中,没有IIS Express图标。如何在不使用命令行的情况下启动IIS Express?我希望IIS永久运行,因此没有命令行。 最佳答案 参见R
我不想在我的网站上使用 Jade 或 EJS。如何在不默认使用 Jade 模板的情况下创建快速站点?谢谢 最佳答案 如果您想要的是直接为静态 html 文件提供缓存资源的可能性,同时仍然能够点击“/”
Express是否支持HTTP动词“PATCH”,例如: app.patch("/api/resource", function(req, res){ ... }); 我检查了文档,对我来说似乎还不清
我正在快速服务器中运行 vue SPA。问题是当使用历史模式并刷新页面时,我得到一个 404 not found 异常。我尝试使用 connect-history-api-fallback 但不起作用
我是一名优秀的程序员,十分优秀!