html和node.js之间的通信（基本）

Question

I'm completely new to web application programming and stuck on creating the backend to my html-file. 我是Web应用程序编程的新手，并坚持为我的html文件创建后端。 So far I have created a nice user interface in html and javascript, and I have read tutorials on node.js. 到目前为止，我已经使用html和javascript创建了一个不错的用户界面，并且阅读了有关node.js的教程。 However, all the tutorials focus on the server-side programming. 但是，所有教程都侧重于服务器端编程。 I don't understand how to connect my html-file with the node.js application. 我不明白如何将我的html文件与node.js应用程序连接。 So, please help me to get started by explaining a simple example: 因此，请通过解释一个简单的示例来帮助我入门：

Let's assume we have a website that contains two fields and text that can be dragged from one field into another. 假设我们有一个网站，其中包含两个字段和可以从一个字段拖到另一个字段的文本。

<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>

Also, there needs to be a node.js file called "writeFile.js" that performs some node.js-magic. 另外，还需要一个名为“ writeFile.js”的node.js文件，该文件执行一些node.js的魔术作用。

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;
});

How do I get those two pieces of code (the html file and the node.js file) connected? 如何连接这两段代码（html文件和node.js文件）？

The background of my problem is as follows: I'm creating an organisation tool for my boss in html and javascript. 问题的背景如下：我正在用html和javascript为老板创建一个组织工具。 It's a calender where employees are assigned to different tasks for each day. 这是一个日历，每天将员工分配给不同的任务。 The employees are represented as rectangles on a table and those rectangles can be dragged between the cells of that table. 员工在表上表示为矩形，可以在该表的单元格之间拖动这些矩形。 When the browser is opened it needs to read the information for each employee stored in a text-file or database. 打开浏览器后，它需要读取存储在文本文件或数据库中的每个员工的信息。 And each change to the calender needs to be saved into the text-file or database. 压延机的每次更改都需要保存到文本文件或数据库中。

I hope I'm on the right track with node.js and wait for your help. 我希望我在使用node.js时走上正确的道路，并等待您的帮助。

Answer 1

On the serverside you need to create an API, preferably RESTful. 在服务器端，您需要创建一个API，最好是RESTful。 Then you do a POST or PUT request to the API to store your changes (via AJAX). 然后，您对API进行POST或PUT请求以存储您的更改（通过AJAX）。 And use GET requests (again AJAX) to fetch the stored data from the API. 并使用GET请求（再次为AJAX）从API中获取存储的数据。

Take a look at swagger.io (or other similar tools) to get started. 查看swagger.io（或其他类似工具）开始。 Their editor has an option to "generate" a barebone API in NodeJS from the specs you provide. 他们的编辑器可以根据您提供的规范“生成” NodeJS中的准系统API。

Answer 2

You should create a node js server that will serve your page and handle your app logic. 您应该创建一个节点js服务器，该服务器将为您的页面提供服务并处理您的应用逻辑。

I would recommend you tu use ExpressJS as it is really easy to implement and learn. 我建议您使用ExpressJS，因为它确实易于实现和学习。

Your server could look like so : 您的服务器可能看起来像这样：

A root view that serves your static page 用于您的静态页面的根视图
A post route that handles your "node magic" 处理您的“节点魔术”的发布路线

Use AJAX to make the call to your post view. 使用AJAX调用您的帖子视图。 Get the request body through a bodyparser package Handle the success response client side. 通过bodyparser包获取请求正文处理成功响应客户端。

Here's a quick example of how your server code should look like : 这是一个简单的示例，说明服务器代码的外观：

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 个解决方案

解决方案1
1 2017-10-24 11:10:26

解决方案2
1 2017-10-24 11:34:09

html和node.js之间的通信（基本）

问题描述

2 个解决方案

解决方案1 1 2017-10-24 11:10:26

解决方案2 1 2017-10-24 11:34:09

解决方案1
1 2017-10-24 11:10:26

解决方案2
1 2017-10-24 11:34:09