我應該如何在Node.js + Jade + angularJS + mongoose中顯示來自后端的數據

Question

我將使用以下方法制作Web應用程序（SPA）：

• 后端：Node.js（快速）
• 前端：Jade + AngularJS
• 數據庫：貓鼬

我將以這種方式將數據（作為表單）發送到后端ExpressJS AngularJS POST （檢查答案）。這將是簡單的CRUD。

但是我想知道如何顯示來自后端的數據？ 例如：

我將運行應用程序

var Partner = require('../model/partners');
router.get('/', function (req, res) {
    Partner.find({}, function (err, partnerList) {
        if (err) throw err;

        res.render('campaign', {
            partnerList: partnerList
        });
    });
});

以及我應該如何顯示數據（ partnerList ）。 也許以這種方式？

- each item in partnerList
  = item.name

或者，也許還有另一種更好的角度顯示方式來顯示數據？ 我問是因為稍后我想從partnerList （CRUD操作）中刪除或更新items 。 這可能是一個問題，因為我將必須將item._id作為參數發送給角度函數？

例如，如果我將添加按鈕以刪除記錄：

- each item in partnerList
  = item.name
  button(type='remove' ng-click="sub('#{item._id}')")

script.
  app.controller('view1Ctrl', function($scope, $http) {
    $scope.sub = function(id) {
        $http.post('/',id).
        success(function(data) {
            console.log("posted successfully");
        }).error(function(data) {
            console.error("error in posting");
        })
    }
});

可能無法正常工作

Answer 1

我認為首選的方法是從express設置第二條路線以專門呈現JSON，然后使用angular的$http方法獲取該數據並在控制器中使用它。 如果要使用一條路由進行操作，則可以將JSON數據作為字符串傳遞給服務器端的視圖，但可能會有些不便。

// app.js
...
partnerList: JSON.stringify(partnerList);
...

// index.jade
div(ng-repeat="item in partnerList")
  p {{ item.name }}
  button(type='remove', ng-click="sub(item._id)")
...
script.
  app.controller('view1Ctrl', function($scope, $http) {
    $scope.partnerList = JSON.parse(#{partnerList});
    ...

編輯要使用JSON字符串示例，您將必須使用Unbuffered Code語法進行呈現。 但是我不確定您將如何在script.執行此操作script. 塊。 要改為單獨提供JSON服務，請將服務器路由更改為此：

var Partner = require('../model/partners');

router.get('/', function (req, res) {
    res.render('campaign');
});

router.get("/partner-list", function(req, res) {
    Partner.find({}, function (err, partnerList) {
        if (err) throw err;

        res.json({ partnerList: partnerList });
    });
});

然后，您的角度代碼將使用$http.get()查詢該/partner-list路徑。

script.
    app.controller('view1Ctrl', function($scope, $http) {
        $http.get("/partner-list").then(function(result) {
            $scope.partnerList = result.data.partnerList;
        });
        ...
    });

Answer 2

如前所述，從我的角度來看，我更希望從后端向客戶端發送所需的最少數據，但這取決於您的基礎架構和並發用戶。

范例1 ：

• 您的Web應用程序具有並發用戶+ 5K，在這種情況下，最好處理前端的所有大量工作，否則您將需要在后端硬件上花費很多錢。

實際案例：

• 用戶在博客頁面中發布新評論。 您可以在后端清理文本字符串，然后將其放在首選的數據存儲中...但是，只需使用簡單的json進行響應即可，例如{"status": "ok"} 。 如果前者解決了此問題，請使用客戶端在POST階段發送給后端的文本字符串修改DOM，但不要再次發送帶有此字符（例如500個字符）的所有HTML。
• 如果服務器以{"status":"error"}響應，請修改DOM，以使用戶知道有關其注釋的問題（更多指定的json消息{"status":"error", "data":"you comment is bigger than 500 chars"} ）

問題：

• 您需要額外的前端代碼來在客戶端處理這些情況。 因此，該“也許”將在第一次訪問您的頁面時對用戶生效。

優點：

• 減少硬件成本
• 總體上減少了服務器響應時間。
• 隨時都有更多的用戶交互式網站僅對DOM的某些部分建模。
• ...

范例2：

• 您有一個簡單的頁面，該頁面的並發用戶較少。 然后您選擇。 讓您后端處理所有事務？ 還是繼續使用json響應？

---

我總是使用第一個例子。 希望這對您的問題有所幫助。