MEAN Stack，MongoDB記錄創建不起作用

Question

我正在開發MEAN堆棧應用程序。 我試圖從表單中簡單地在MongoDB中創建一條記錄。 我已經在調試器中驗證了視圖和控制器之間的數據綁定是否有效。 在服務器端控制器代碼中，在嘗試保存記錄之前檢查req.body會返回“未定義”（請參見下面的代碼）。 在Angular控制器中，我檢查了當執行announcement。$ save函數時在回調中的“結果”值，它顯示了要填充的標題和詳細信息值。 但是，數據沒有持久化到數據庫，並且出現以下錯誤：

{ [ValidationError: Announcement validation failed]
  message: 'Announcement validation failed',
  name: 'ValidationError',
  errors:
   { details:
      { [ValidatorError: Path `details` is required.]
        properties: [Object],
        message: 'Path `details` is required.',
        name: 'ValidatorError',
        kind: 'required',
        path: 'details',
        value: undefined },
     heading:
      { [ValidatorError: Path `heading` is required.]
        properties: [Object],
        message: 'Path `heading` is required.',
        name: 'ValidatorError',
        kind: 'required',
        path: 'heading',
        value: undefined } } }

我想念什么？ 這是我的代碼：

我的html文件中的表格：

  <form ng-submit="AnnouncementsVm.createAnnouncement()">
    <fieldset class="form-group">
      <label for="heading">Heading:</label>
      <textarea class="form-control" id="heading" rows="1"
        ng-model="AnnouncementsVm.announcementHeading"></textarea>
    </fieldset>
    <fieldset class="form-group">
      <label for="details">Details:</label>
      <textarea class="form-control" id="details" rows="3"
        ng-model="AnnouncementsVm.announcementDetails"></textarea>
    </fieldset>

    <p><input type="submit" value="Submit →"><p>
  </form>

此頁面局部的角度路線定義為：

  $routeProvider.
    when('/announcements', {
      templateUrl: '/views/partials/announcements.html',
      controller: 'Announcements.Controller',
      controllerAs: 'AnnouncementsVm'
    });

這是我的控制器代碼：

angular.module('app').
  controller('Announcements.Controller', AnnouncementsCtrl);

function AnnouncementsCtrl($log, $resource) {
  $log.debug('Executing AnnouncementsCtrl');
  var vm = this;
  var Announcement = $resource('/api/announcements');

  Announcement.query( function(results) {
    vm.announcements = results;
  });

  vm.announcements = [];

  vm.createAnnouncement = function() {
    var announcement = new Announcement({
      heading: vm.announcementHeading,
      details: vm.announcementDetails
    });
    announcement.$save( function(result) {
      vm.announcements.push(result);
      vm.announcementHeading = '';
      vm.announcementDetails = '';
    });
  };
}

REST API路由定義為：

app.post('/api/announcements', announcementsController.create);

服務器端控制器（announcements-controller.js）：

'use strict';

var Announcement = require('../models/Announcement.js');

module.exports.create = function(req, res) {
  var announcement = new Announcement(req.body);
  console.log(req.body); // returns "undefined"
  announcement.save( function(err, result) {
    if (err) console.log(err);
    console.log('Save Announcement Result: ' + result);
    res.json(result);
  });
};

module.exports.list = function(req, res) {
  Announcement.find({}, function (err, results) {
    if (err) throw err;
    res.json(results);
  });
};

最后，我正在使用此Mongoose模型（Announcements.js）

'use strict';

var mongoose = require('mongoose');

var AnnouncementSchema = new mongoose.Schema({
  heading: {type: String, required: true},
  details: {type: String, required: true},
  image: {type: String, required: false}
});

module.exports = mongoose.model('Announcement', AnnouncementSchema);

Answer 1

如何在Angular中配置路線？ 您是否將控制器作為“ AnnouncementsVm”傳遞？

您是否嘗試從控制器訪問ng-models notificationHeading和announcementDetails的值？

試穿

vm.createAnnouncement = function() {
 $log.log(vm.announcementHeading);
 $log.log(vm.announcementDetails);

});

};

並檢查您是否獲得正確的值

Answer 2

問題解決了。 我沒有為該路線集成車身解析器，因此該請求未正確填充。 這是更新的ExpressJS路線：

'use strict';

var bodyParser = require('body-parser');
var path = require('path');
var announcementsController = require('../controllers/announcements-controller.js');

module.exports = function(app) {

  // create application/json parser
  var jsonParser = bodyParser.json();

  // create application/x-www-form-urlencoded parser
  var urlencodedParser = bodyParser.urlencoded({ extended: false });

  app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '../../client/views/index.html'));
  });

  // REST API
  app.get('/api/announcements', announcementsController.list);
  app.post('/api/announcements', jsonParser, announcementsController.create);
};