Question

我刚刚开始进行后端开发，所以请多多包涵。我在这里有一个javascript prgram，它从本地主机获取文本数据。我用节点构建了一个http服务器。只是一个普通的http服务器，并将其设置到包含我的html文件和文本文档的根文件夹中。

http-server "C:\users\mycomputer\Desktop\JSTEST"

在命令提示符下输入

。（我使用Windows 10）

当我进入端口8080时，它说未找到404，并且未显示我的应用程序，更不用说获取客户端请求的信息了。

我最初试图设置一个express.js服务器，因为我认为这样会更容易，但也没有用。我还尝试在命令提示符下设置httpserver的不同路径。

<!DOCTYPE html>
<html>
<body>

<h2>Using the XMLHttpRequest Object</h2>

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>

<script>

window.onunload = function() { debugger; }

function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "xmlhttp_info.txt", true);
  xhttp.send();
}

</script>

</body>
</html>

如果出现页面，并且在按下程序中的按钮后，文本更改为HELLO（写在txt文件中），结果会很好。

Answer 1

根据此[Github Issue（https://github.com/http-party/http-server/issues/525，这是一个已知的http-server问题，会影响0.10.x及更高版本。

因此，通过以下方式卸载当前的http-server，

npm uninstall http-server -g

然后重新安装0.9.0版本，

npm install -g http-server@0.9.0

但是，如果要使用express来提供文件夹，则可以使用static方法。

const express = require('express');

var app = express(); // better instead
app.use(express.static(__dirname));

app.listen(8080, ()=>{console.log('Server Started')});

给出.js文件夹中的JSTEST文件，然后按node <filename>.js运行它

注意：打开127.0.0.1:8080时不会显示目录列表。但是，如果您打开xmlhttp_info.txt

，它将为127.0.0.1:8080/xmlhttp_info.txt文件提供服务

Answer 2

您必须使用express创建一个get端点。

const express = require("express");
const app = express();
const path = require("path");
const PORT = 8080;

app.get("/",(req,res)=>{
 res.sendFile(path.join(__dirname,"folderName","index.html")); //folderName is optional
//res.send("Hello World")//sends just text
})


app.listen(PORT, () => {
  console.log("listening");
});

使用path.join（）而不是对要显示的文件的路径进行硬编码。不同的操作系统具有不同的文件系统，因此当您在不同的操作系统上使用您的应用时，您不会出错。路径是内置模块，不需要安装。

问题的第二部分。假设您要显示index.html。在文件中

<body>

<h2 id="content">Using the XMLHttpRequest Object</h2>
<div id="demo">
<button type="button" id="change">Change Content</button>
</div>

<script type="text/javascript">
const $content=document.getElementById("content");
const $button=document.getElementById("change");
$button.addEventListener("click",()=>{
$content.innerHTML="hello World"
//$content.textContent="hello World" 
})
</script>

Javascript文件未在端口8080上加载

2 个答案: