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.