如何让 node.js 呈现的 html 页面回调到 node.js 文件？ [复制]答案

【问题标题】：How can I let an html page rendered by node.js call back to the node.js file? [duplicate]如何让 node.js 呈现的 html 页面回调到 node.js 文件？ [复制]
【发布时间】：2021-04-06 06:54:20
【问题描述】：

我正在尝试使用 node.js 和 HTML 创建一个注册表系统，问题是我的 html 页面是由 node.js 呈现的，当我想将它回调到 node.js 文件时，它看起来像找不到js文件。

这是我的js代码：

const http = require('http');
const fs = require('fs');

http.createServer(function (req, res) {
    res.writeHead(200, { 'content-type': 'text/html' });
    const html = fs.readFileSync('Index.html');
    res.end(html);
}).listen(3000, () => {
    console.log('running on 3000');
}); 

function insertdatabase() {

    var email = document.getElementById("email").value;
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;


    const { Connection, Request } = require("tedious");

    // Create connection to database
    const config = {
        authentication: {
            options: {
                userName: "******", // update me
                password: "**********" // update me
            },
            type: "default"
        },
        server: "*********************", // update me
        options: {
            database: "************", //update me
            encrypt: true
        }
    };

    const connection = new Connection(config);

    // Attempt to connect and execute queries if connection goes through
    connection.on("connect", err => {
        if (err) {
            console.error(err.message);
        } else {
            queryDatabase();
        }
    });

    function queryDatabase() {
        console.log("Reading rows from the Table...");

        // Read all rows from table
        const request = new Request(
            `INSERT INTO [dbo].[dbo] (email, username, password)
  VALUES ('${email}', '${username}', '${password}');
SELECT * FROM [dbo].[dbo] `,
            (err, rowCount) => {
                if (err) {
                    console.error(err.message);
                } else {
                    console.log(`${rowCount} row(s) returned`);
                }
            }
        );

        request.on("row", columns => {
            columns.forEach(column => {
                console.log("%s\t%s", column.metadata.colName, column.value);
            });
        });

        connection.execSql(request);
    }
}

这是我的html代码：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: url() no-repeat;
            background-size: cover;
            font-family: sans-serif;
            background-image: url(image/hbg.gif)
        }

        .topnav {
            overflow: hidden;
            background-color: whitesmoke;
        }

            .topnav a {
                float: left;
                color: black;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

                .topnav a:hover {
                    background-color: white;
                    color: black;
                }

                .topnav a.active {
                    background-color: black;
                    color: white;
                }

        .register-box {
            width: 380px;
            height: 480px;
            position: relative;
            margin: 6% auto;
            background-color: whitesmoke;
            padding: 5px;
        }

        .userinput-box {
            width: 100%;
            padding: 10px 0;
            margin: 5px 0;
            border-left: 0;
            border-top: 0;
            border-right: 0;
            border-bottom: 1px;
            outline: none;
            background: transparent;
        }

        .userinput-group {
            top: 180px;
            position: absolute;
            width: 280px;
        }

        .button {
            background-color: #cbcbcb;
        }
    </style>
    <script src="server.js"></script>
</head>
<body>
    <div class="topnav">
        <a class="active" href="../Subpages/account.html">Log in</a>
        <a href="https://exampletonyhuang.azurewebsites.net/">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="../Subpages/shoppingcart.html">Shopping Cart</a>
        <a href="../Subpages/billinginfo.html">Billing info</a>
    </div>
    <div class="register-box">

        <br /><br /><center><h1><b>Register Account</b></h1></center>

        <form class="userinput-box">
            <center>
                <h3>Email: <input type="text" name="email" id="email" required></h3>
                <br /><h3>Username: <input type="text" name="username" id="username" required></h3>
                <br /><h3>Password: <input type="password" name="password" id="password" required></h3>
            </center>
        </form>
        <center>
            <input type="submit" class="button" onclick="insertdatabase()">
            <br />
                
        </center>
    </div>
</body>
</html>

我的猜测是可能js渲染的html页面找不到其他文件？这个猜测是基于我将css文件添加到项目时，也找不到。有没有办法解决这个问题，还是我必须尝试其他方法？

【问题讨论】：

标签： javascript html node.js azure-sql-database

【解决方案1】：

Here 是您尝试做的一个示例，但将函数放在客户端文件中并使用 id 来监听按钮。你真的应该避免只将服务器端脚本的导入放在客户端文件中，因为它将是公开的，这可能会导致巨大的安全问题。

如果您想使用server.js 文件中的函数，可以使用this。这是在您的快速申请中使用表单提交的一种方式。

此外，不要将提交按钮放在表单之外。

【讨论】：