Express - 在没有视图引擎的情况下将 JavaScript 数据传递给客户端

Question

我有一个通过快速服务器提供服务的应用程序。我正在用 vanilla JavaScript 构建我的所有模板，没有任何模板文件或视图引擎。我想传递将在客户端的 JavaScript 上下文中用于正常导航请求的数据。这样做的最佳做法是什么？

我根本没有使用 AJAX 或单页应用程序。我所有的模板都在服务器上完全呈现。这是服务器的基本版本：

const express = require('express')
const app = express()

const meta = `<meta name="viewport" content="width=device-width, initial-scale=1">`
const account = `<button id="sign-out" class="js-authorized">Sign Out</button>`
const template = (title, content) => `<html>
<head>
  <title>${title}</title>

  ${meta}
</head>
<body>
  <div class='account'>
    ${account}
  </div>

  <div class='content'>
    <h1>${title}</h1>

    ${content} 
  </div>
</body>`

app.get('/', (request, response) => {
  const document = template('Index', 'Welcome')

  // How can I send this to the client?
  const data = {
    mainSeed: Math().random(),
    secondarySeeds: [Math().random(), Math().random(), Math().random()]
  }
  // This wouldn't work:
  // return response.send(data, document)

  return response.send(document)
})

我想确保页面上的任何 JavaScript 都可以访问数据，但我不想在服务器上使用除 JavaScript 模板文字之外的任何模板逻辑。通过基本 Express 向客户端发送数据的最佳做法是什么？

Answer 1

我想传递将在客户端 JavaScript 上下文中用于正常导航请求的数据。这样做的最佳做法是什么？

通过使用视图引擎呈现您的数据或限制/强制您的 ajax 请求请求application/json，以便您可以使用 JSON 进行响应。

您想要做的基本上就是 React、Vue 和 Angular 已经为您做的事情。如果您真的不想使用普通 HTML，请使用 React 或众多 SPA 框架/库之一。

你试图完成的事情不会奏效。 res.send 只接受 一个 参数：res.send([body])。你不能像你试图做的那样用它发送任何其他东西。 hack 解决方法（未经测试）是这样的：

const template = (title, content, data) => `<html>
<head>
  <title>${title}</title>

  ${meta}
</head>
<body>
  <div class='account'>
    ${account}
  </div>

  <div class='content'>
    <h1>${title}</h1>

    ${content} 
  </div>
</body>
<script>
  window.data = ${data}
<script>
`

const document = template('Index', 'Welcome', {data: {} })

在这一点上，这与使用视图引擎有何不同？它完成了同样的事情。如果您要使用视图引擎，则可以使用res.render：

app.get('/', (request, response) => {
  const data = {
    mainSeed: Math().random(),
    secondarySeeds: [Math().random(), Math().random(), Math().random()]
  }

  response.render('Index', { data, content: 'Welcome' })
})