簡體   English   中英

如何使用 JavaScript 正確編碼服務器端和客戶端之間的交換數據?

[英]How to correctly code an interchange data between server-side and client-side using JavaScript?

我在 web 應用程序上工作,需要在 HTML 頁面中合並可編輯表。 發現了很棒的 JS 工具“Tabulator”,但是,我缺乏從服務器到客戶端和返回的數據傳輸的基本基礎知識。 好吧,進入正題。
在服務器端:

  • Node.js 文件,比如說app.js
  • 所需數據存儲在 Mongo DB 中的兩個 collections,User 和 Resource

在客戶端:

  • HTML 文件stat.html到嵌入兩個 Tabulator 的表
  • JS 文件table.js

=== 階段 1. 從服務器向客戶端發送數據 ===

步驟 1. app.js從 Mongo DB 中提取數據並將其發送到table.js

//=== render stat.html page ===//
router.get('/stat', (req,res)=>{
    res.render('stat');
});

//=== pull user data from mongo and send it to table.js ===//
router.get('/stat', (req,res) => {
    User.find({}, (err, users) => {
        if (err) throw err;
        res.send(users);
    });
});

//=== pull resource data from mongoand send it to table.js ===//
router.get('/stat', (req,res) => {
    Resource.find({}, (err, resources) => {
        if (err) throw err;
        res.send(resources);
    });
});

這里我有幾個問題:

  1. 問題 #1。 我做對了嗎?
  2. 問題2。 是否可以在一條路由中呈現頁面並將數據發送到客戶端 JS? 我試過了,但出錯了。
  3. 問題 #3。 mongoose Collection.find中的 output 采用 JSON 格式,這正是 Tabulator 所需要的。 在將其發送到客戶端之前,我是否需要對其進行操作? 例如使用JSON.stringify
  4. 問題 #4。 有什么方法可以檢查數據是否實際發送?
  5. 問題 #5。 我需要為不同的表發送兩個不同的 JSON。 如果它們以一條路線發送,如何在客戶端將它們與另一條分開? 我正在考慮使用不同的路徑,例如/stat/user/stat/resource但是如何觸發它們?

步驟 2. 在客戶端table.js文件接收數據並將其提供給 Tabulator 表。 Tabulator 有自己的選項來請求遠程數據ajaxURL

//setup user table
var table = new Tabulator('#user-table',{
    ajaxURL:"stat/user",
});

//setup resource table
var table = new Tabulator('#resource-table',{
    ajaxURL:"stat/resource",
});

問題:

  1. 問題 #6。 由於頁面上有兩個表格,我需要使用兩個不同的 URL。 這又回到了問題#5。 渲染頁面時如何觸發這些路徑
  2. 問題 7。 假設沒有ajaxURL如何在table.js中讀取數據? 我嘗試獲取 API 但沒有成功。

table.js中獲取請求

fetch('/stat/user', {
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(users)
})
.then(response => response.json())
.then(function(response) {
    if (response.ok) {
        console.log('got data: ', response.users);
    }
    throw new Error('Request failed.');
})
.catch(function(error) {
    console.log(error);
});

第 2 階段旨在將數據從客戶端發送回服務器。 但我認為這已經是壓倒性的,也許最好把這部分放在一邊。
我知道互聯網上有大量的文章,StackOverflow 中關於這個主題的問題,並且閱讀了很多但仍然沒有掌握它,所以請不要建議像 MDN 手冊這樣的東西。
我會非常感謝任何幫助。

自己整理的。 特別感謝@jonrsharpe。
如果有人在這個問題上需要幫助,我很樂意提供幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM