Question

我对Web应用程序编程完全陌生，并坚持创建html文件的后端。到目前为止，我已经在html和javascript中创建了一个很好的用户界面，我已经阅读了node.js上的教程。但是，所有教程都侧重于服务器端编程。我不明白如何将我的html文件与node.js应用程序连接。所以，请帮助我开始解释一个简单的例子：

假设我们的网站包含两个字段和文本，可以从一个字段拖到另一个字段。

<head>
    <style>
        #div1,
        #div2 {
            width: 100px;
            height: 35px;
            margin: 10px;
            padding: 10px;
            border: 1px solid red;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }

        function appendDragText() {
            // read myFile. HOW DO I DO THIS???
            textFromFile = "My draggable text is in field 2";
            if (textFromFile == "My draggable text is in field 1") {
                document.getElementById("div1").appendChild(document.getElementById("dragText"));
            } else {
                document.getElementById("div2").appendChild(document.getElementById("dragText"));
            }
        }
    </script>
</head>

<body>
    <div draggable="true" ondragstart="drag(event)" id="dragText">Draggable</div>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <script>appendDragText()</script>
</body>

此外，还需要一个名为“writeFile.js”的node.js文件，该文件执行一些node.js-magic。

var fs = require('fs');
var fieldNumber = 2; // HOW CAN I LOOK INTO THE BROWSER TO KNOW WHERE MY TEXT IS?
var textForFile = "My draggable text is in field " + fieldNumber
fs.writeFile('mynewfile.txt', textForFile, function (err) {
  if (err) throw err;
});

如何连接这两段代码（html文件和node.js文件）？

我的问题背景如下：我正在用html和javascript为我的老板创建一个组织工具。这是一个日历，员工每天被分配到不同的任务。员工在表格上表示为矩形，并且可以在该表格的单元格之间拖动这些矩形。当浏览器打开时，它需要读取存储在文本文件或数据库中的每个员工的信息。每个对日历的更改都需要保存到文本文件或数据库中。

我希望我与node.js走在正确的轨道上并等待你的帮助。

Answer 1

在服务器端，您需要创建一个API，最好是RESTful。然后，您对API执行POST或PUT请求以存储您的更改（通过AJAX）。并使用GET请求（再次使用AJAX）从API中获取存储的数据。

看一下swagger.io（或其他类似工具）即可开始使用。他们的编辑可以选择＆＃34;生成＆＃34; NodeJS中的准系统API来自您提供的规范。

Answer 2

您应该创建一个节点js服务器，它将为您的页面提供服务并处理您的应用程序逻辑。

我建议你使用ExpressJS，因为它很容易实现和学习。

您的服务器可能如此：

提供静态页面的根视图
处理您的＆＃34;节点魔术＆＃34;

使用AJAX调用您的帖子视图。通过bodyparser package获取请求正文处理成功响应客户端。

以下是您的服务器代码应如何显示的简单示例：

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const app = express();

/* Middlewares */
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));

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

app.post('/write-file', function (req, res) {
    const body = req.body; // your request body

    // your "magical" code

});

/* 3, 2, 1, Launch ! */
app.listen(process.env.PORT || 3000, function() {
});

html和node.js之间的通信（基础知识）

2 个答案: