html和node.js之间的通信(基础知识)

时间:2017-10-24 11:02:56

标签: javascript html node.js connection communication

我对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走在正确的轨道上并等待你的帮助。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

您应该创建一个节点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() {
});