【问题标题】:Posting data from AngularJS with Express, Node and Rest使用 Express、Node 和 Rest 从 AngularJS 发布数据
【发布时间】:2015-11-25 23:34:35
【问题描述】:

我对 javascript 堆栈很陌生,并且一直在尝试将表单从 angular 发布到 mongo。我可以取回列表,但无法发布。

下面的代码列表没问题,但是当我发布时,它会发布一条空白记录(而且,即使我没有在页面上执行任何操作,它也会每隔几分钟发布一次)

我可以看到它能够调用服务器端方法,但是数据没有被传递给持久性。

我知道我在做一些愚蠢的事情,但只是不确定它是什么。我已经在谷歌上搜索过,但没有看到我可以采取的解决方案。任何帮助将不胜感激。

============jade================
    div(ng-app="sell" ng-controller="sellCtlr")
        .container-fluid
        form#listingForm.form-horizontal
                      .form-group
                       .row
                           .col-xs-8
                               label.control-label(for="title") title 
                               input#title.form-control(type="text", name="title", ng-model="listing.title")
                   .form-group
                       .row
                           .col-xs-8
                               label.control-label(for="subTitle") sub-title
                               input#subTitle.form-control(type="text", name="subTitle",, ng-model="listing.subTitle")

  .........
  .........
                        .form-group
                       .col-xs-6
                           button.btn.btn-primary(type="submit" ng-click="createListing()") Submit
============app.js================
/* server side controllers **/
var listController = require('./server/controllers/list-controller');

/* routes */
var sell = require('./client/routes/sell');

/* rest api */
app.get('/api/listings', listController.list);
app.post('/api/listings', listController.create);

/* sell route */
app.use('/sell', sell);

============sell.js (sell route)================
var express = require('express');
var router = express.Router();

/* GET sell page. */
router.get('/', function(req, res, next) {
    res.render('sell', { title: 'Express' });
});

/* POST sell page. */
router.post('/api/listings', function(req, res, next) {
    res.render('sell', { title: 'Express' });
});

module.exports = router;

============sellCtlr.js (client side)================    

var app = angular.module('sell', ['ngResource']);

app.controller('sellCtlr', ['$scope', '$resource',
    function($scope, $resource){

    var Listing = $resource('/api/listings');
    $scope.listing = new Listing();

    $scope.createListing = function(){

        Listing.save($scope.listing, function(){
            //data saved. do something here.
        });//saves an entry. Assuming $scope.listing is the Listing object
        };
    }]);

============list-controller.js (server side)================

var Listing = require('../models/listing');

// save listing
module.exports.create = function (req, res) {
  var listing = new Listing(req.body);
  listing.save(function (err, result){
      res.json(result);
  });
}
//retrieve all listings
module.exports.list = function(req, res){
Listing.find({}, function(err, results) {
    res.json(results);
});
}


============listing.js (model, server side)================

var mongoose = require('mongoose');

module.exports = mongoose.model('Listing', {
  title: String,
  subTitle: String

});

非常感谢大家

编辑 2 -- 完整的 app.js 文件

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

/*%%%%% server side controllers %%%%%%**/
var listController = require('./server/controllers/list-controller');
/*%%%%% server side controllers %%%%%%**/


/*%%%%% mongoose config %%%%%%**/
var secrets = require('./config/secrets');
var mongoose = require('mongoose');
//Connect to the MongoDB
mongoose.connect(secrets.db);
/*%%%%% mongoose config %%%%%%**/

/*%%%%% routes %%%%%%**/
var index = require('./client/routes/index');
var listing = require('./client/routes/listing');
var users = require('./client/routes/users');
var sell = require('./client/routes/sell');
/*%%%%% routes %%%%%%**/

/*%%%%% express setup %%%%%%**/
var app = express();
/*%%%%% express setup %%%%%%**/

/*%%%%% view engine setup %%%%%%**/
app.set('views', path.join(__dirname, 'client/views'));
app.set('view engine', 'jade');
/*%%%%% view engine setup %%%%%%**/

/*%%%%% client side directories %%%%%%**/
app.use(express.static('client'));
app.use(express.static('client/views'));

app.use('/js', express.static(__dirname + '/client/js'));
app.use('/js', express.static(__dirname + '/client/views/js'));

app.use('/css', express.static(__dirname + '/client/views/css'));

/*%%%%% rest api's %%%%%%**/
app.get('/api/listings', listController.list);
app.post('/api/listings', listController.create);
/*%%%%% rest api's %%%%%%**/



// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


app.use('/', index);
app.use('/users', users);
app.use('/sell', sell);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

【问题讨论】:

    标签: javascript angularjs node.js express restful-architecture


    【解决方案1】:

    您没有正确注册模型,您需要使用mongoose.Schema。我很惊讶您没有收到错误消息。

    var mongoose = require('mongoose');
    
    module.exports = mongoose.model('Listing', new mongoose.Schema({
      title: String,
      subTitle: String
    }));
    

    编辑1:

    将您的 save() 调用更改为以下内容:

    $scope.createListing = function(){
      $scope.listing.$save();
    };
    

    EDIT3

    注册中间件的顺序很重要。您正在注册您的路线,在您的 bodyparser 之前,这是不正确的。您的正文解析器和其他中间件必须在路由/API 之前注册。

    见下文:

    /*%%%%% express setup %%%%%%**/
    var app = express();
    /*%%%%% express setup %%%%%%**/
    
    /*%%%%% view engine setup %%%%%%**/
    app.set('views', path.join(__dirname, 'client/views'));
    app.set('view engine', 'jade');
    /*%%%%% view engine setup %%%%%%**/
    
    // uncomment after placing your favicon in /public
    //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));
    
    
    // ***Register the API AFTER the body and cookie parser**
    
    /*%%%%% client side directories %%%%%%**/
    app.use(express.static('client'));
    app.use(express.static('client/views'));
    
    app.use('/js', express.static(__dirname + '/client/js'));
    app.use('/js', express.static(__dirname + '/client/views/js'));
    
    app.use('/css', express.static(__dirname + '/client/views/css'));
    
    /*%%%%% rest api's %%%%%%**/
    app.get('/api/listings', listController.list);
    app.post('/api/listings', listController.create);
    /*%%%%% rest api's %%%%%%**/
    
    app.use('/', index);
    app.use('/users', users);
    app.use('/sell', sell);
    

    【讨论】:

    • 首先,感谢@Yuri Zarubin 提供的帮助。我尝试了您的更正,但结果仍然相同。 (创建-> _id:ObjectId(“55e5bd389855141c195033d7”),_v:0)。如果我在 list-controller.js 中的服务器端填充一些数据,它会持续存在。我不确定为什么客户端资源上的帖子没有将数据发送到服务器控制器。
    • 没有错误。只需推送一个带有对象 ID 且没有数据(标题和副标题)的空白记录。在 list-controller.js 上做了一个 console.log 并给了我(服务器端 list-controller *** create *** called.... Listing object: { _id: 55e5bdb09855141c195033d8 } title: undefined subtitle: undefined)跨度>
    • 但是对资源的获取请求会返回来自 db 的数据以及我的原始代码。
    • 看起来您的问题是发送到服务器的值不正确。我已经编辑了我的答案,试试看。尝试console.log(req.body) 并发布结果。
    • 也试过了,结果一样。 (服务器端列表控制器 *** 创建 *** 调用....请求正文:未定义列表对象:{ _id:55e5c4af57e379b81a571f15 } 标题:未定义字幕:未定义)。只是补充一点,客户端 $scope.listing 包含表单中的标题和副标题数据。
    猜你喜欢
    • 2017-08-22
    • 1970-01-01
    • 1970-01-01
    • 2013-12-16
    • 2016-09-01
    • 2018-03-06
    • 2020-10-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多