html和node.js之间的通信（基本）
[英]communication between html and node.js (basics)
问题描述
我是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的魔术作用。
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 个解决方案
解决方案1
1 2017-10-24 11:10:26
在服务器端，您需要创建一个API，最好是RESTful。 然后，您对API进行POST或PUT请求以存储您的更改（通过AJAX）。 并使用GET请求（再次为AJAX）从API中获取存储的数据。
查看swagger.io（或其他类似工具）开始。 他们的编辑器可以根据您提供的规范“生成” NodeJS中的准系统API。
解决方案2
1 2017-10-24 11:34:09
您应该创建一个节点js服务器，该服务器将为您的页面提供服务并处理您的应用逻辑。
我建议您使用ExpressJS，因为它确实易于实现和学习。
您的服务器可能看起来像这样：
- 用于您的静态页面的根视图
- 处理您的“节点魔术”的发布路线
使用AJAX调用您的帖子视图。 通过bodyparser包获取请求正文处理成功响应客户端。
这是一个简单的示例，说明服务器代码的外观：
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() {
});
内联 JavaScript 和 Node.js 之间的通信
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.