如何将整个 html 页面调用到请求处理程序 JavaScript 文件？

Question

我有一个 html 页面，该页面带有一个简单的表单，带有一个发布方法和一个文本区域字段。 我想用一个局部变量调用整个 html 页面并使用 http 写入方法将其返回给浏览器。 这是 html 的代码片段。

<!DOCTYPE html>
<html id="upload-htm" lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload file</title>
  </head>

  <body>
    <form action="/upload" method="post">
      <textarea name="inpt-text" id="in-txt" cols="30" rows="10"></textarea>
      <button type="submit">upload file</button>
    </form>
  </body>
  <script src="./requestHandlers.js"></script>

</html>

然后我还有一个 requestHandler.js 文件。 我的请求处理程序应该显示它对浏览器的响应。

function start(res) {
  console.log("Request handler 'start' was called");
  let body = document.getElementById('upload-htm');
  res.writeHead(200, {
    "content-type": "text/plain"
  });
  res.write(body);
  res.end();
}

function upload(res) {
  console.log("Request handler 'upload' was called");
  res.writeHead(200, {
    "content-type": "text/plain"
  });
  res.write(`Hello upload Mr. Paullaster`);
  res.end();
}
export {
  start,
  upload
};

当我运行代码时，我从请求处理程序开始收到以下错误

PS C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive node> node -r esm 
index.js
Response ready
Request for /upload recieved
About to route a request for /upload 
Request handler 'upload' was called  
Request for /start recieved
About to route a request for /start 
Request handler 'start' was called  
ReferenceError: document is not defined
at Object.start (C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive 
node\requestHandlers.js:5:15)
at route (C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive 
node\router.js:4:28)
at Server.onRequest (C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive 
node\server.js:11:8)
at Server.emit (events.js:314:20)
at Server.EventEmitter.emit (domain.js:486:12)
at parserOnIncoming (_http_server.js:781:12)
at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)
PS C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive node>

Answer 1

一个网站通常由两个主要部分组成，服务器端逻辑（后端）和客户端逻辑（前端）。 两种逻辑通常彼此分开执行，因此只能通过网络通道进行通信，而不能通过逻辑进行通信。 这意味着它们不会像传统的程序逻辑那样共享变量或数据。

从您共享的代码中，您似乎正在尝试在服务器端应用程序上执行客户端逻辑。 JavaScript 中的document object 用于访问和操作 HTML 页面中的 DOM。 服务器端应用程序无权访问此document object，因此其访问权限无效。 在服务器端应用程序的上下文中，文档 object 未定义。

您可以通过客户端逻辑调用这些函数来完成这项工作。 尝试注册一个 function 调用以针对单击按钮进行上传和启动功能。 这很可能会奏效。

Answer 2

NodeJS 有一个称为文件系统模块的模块。 文件系统模块有不同的方法可用于服务器 nodejs static 页面。 它有：

           const readStream = createReadStream('./staticfile/index.html');
           res.writeHeader(200, {"content-type"}:"text/html");
           readStream.pipe(res)

这会以数据块的形式发送 html 文件。

参考这里： https://nodejs.org/api/fs.html

如何将整个 html 页面调用到请求处理程序 JavaScript 文件？

问题描述

2 个解决方案

解决方案1
0 2020-07-28 08:46:47

解决方案2
0 2020-07-28 08:53:18

如何将整个 html 页面调用到请求处理程序 JavaScript 文件？

问题描述

2 个解决方案

解决方案1 0 2020-07-28 08:46:47

解决方案2 0 2020-07-28 08:53:18

解决方案1
0 2020-07-28 08:46:47

解决方案2
0 2020-07-28 08:53:18