使用 express 服务器打开新的 html 页面答案

【问题标题】：Open new html page with express server使用 express 服务器打开新的 html 页面
【发布时间】：2016-08-14 19:55:32
【问题描述】：

我有一个带有 2 个按钮的登录页面。我希望当我单击注册按钮时，会打开一个新的 html 页面（register.html）。所有文件都位于同一个文件夹中。

到目前为止我尝试了什么：我的 index.html 文件（主页）：

<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="CSS.css">
        <script src="JS.js"></script>
        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    </head>
    <body>

        <div id="login"> 
            User Name:<br>
            <input type="text" id="username"><br>
            Password:<br>
            <input type="password" id="password"><br><br>
        <input type="button" onclick="loginUser()" value="Login"></button>
        <input type="button" onclick="RegisterUser()" value="Register"></button>
    </div>


</body>
</html>

server.js：

var express = require('express');
var lastResult = '';
var app = express();
var path = require('path');

var bodyParser = require('body-parser');
app.use(bodyParser());

app.use(express.static(path.join(__dirname + '/')));

app.get('/register',function(req,res){
  res.sendFile('/register.html');
});

app.listen(3000);

Javascript 文件：

function RegisterUser() {
    $.get("/register", function(res){

    });
}

还有我想在点击后打开的注册、html文件。我试图在调用服务器上获取函数的 JS 文件上创建一个“RegisterUser()”函数。我是所有 node.js 的新手，快速服务器世界。如果这不是正确的方法，请纠正我。

谢谢！

【问题讨论】：

开放是什么意思？喜欢你想去一个新的页面吗？无论哪种方式，您为什么不使用锚标签而不是按钮？将<input type="button">.... 替换为<a href="/register">Register</a>，然后适当地设置锚标记的样式，使其与您的其他按钮匹配。

标签： javascript html node.js express

【解决方案1】：

我希望当我点击注册按钮时，会打开一个新的 html 页面（register.html）

您正在发出 Ajax 请求，然后对服务器发送的数据不做任何事情。

如果您想打开一个新页面……只需使用一个链接。

<a href="/register">Login</a>

【讨论】：

这行不通。它只是将我转移到“file:///C:/register”（位于其他文件夹中的文件），即使我将它移动到 C，它也不会打开它。
@Ohad121 — 这是因为您直接从磁盘而不是从 Express 网络服务器加载了 index.html。
你能解释一下如何在本地运行它吗？
嗯。 node server.js
谢谢它的工作。但是我如何通过单击按钮来做到这一点？

【解决方案2】：

如果您只是想将用户重定向到另一个页面而不使用 <a> 元素，您可以使用 javascript！

有两种方法可以做到这一点，一种模拟用户点击<a>标签然后创建新链接，另一种模拟http重定向。

模拟用户点击的好处是用户可以使用浏览器的后退和前进按钮在页面之间导航。

这是模拟点击的方法：

window.location.href = 'your link'

如果你想模拟一个http重定向：

window.location.replace('your link')

如果您想从本地服务器（文件夹）中获取文件，那么只需调用该文件，它看起来像这样：

window.location.replace('register.html`)

注意，这仅适用于不需要 jQuery 的前端脚本。如果您希望它在后端工作，那么您将需要另一个名为 socket.io 的 node.js 插件。使用套接字，您可以允许客户端调用服务器来执行功能。你可以在这里阅读更多信息：socket.io

我认为使用托管服务器的 server.js 文件同时在前端为客户端执行功能不是一个好主意。我通常有两个文件，index.js 这是我的服务器文件，是 node.js 读取的文件，然后我有 client.js 这是发送到客户端的文件。它只是有助于让事情变得更简单。

【讨论】：

我想构建一个 Web 应用程序。我不应该以某种方式用服务器打开新页面？谢谢
@Ohad121 我认为您可以使用服务器脚本打开一个新网页。如果您使用socket.io，您可以要求服务器将用户重定向到新页面。如果没有socket.io，客户端和服务器之间的通信会更加困难。如果你想看一下，我已经链接了。
@Ohad121 另外，您的代码不起作用的原因是您的 javascript 文件未与服务器文件通信。为此，请查看 socket.io。在那里，您可以从客户端发出请求，告诉服务器执行某个任务。然后你可以告诉服务器是否发回响应。

【解决方案3】：

您可以更改注册按钮的onClick 属性以将浏览器定向到注册页面，然后您的js 服务器将发送html 文件。

<input type="button" onclick="window.open('http://localhost:3000/register')" value="Login"></button>

上面将在新标签中打开它，从当前标签重定向使用：

<input type="button" onClick="location.href='http://localhost:3000/register'" value="Login"></button>

如果您没有在本地运行应用程序，请将 localhost 替换为您的 IP，希望这会有所帮助！

【讨论】：

那行不通。绝对 URL 必须以方案开头（而且首先没有理由使用绝对 URL）。