Node.js 请求主体是Angular 2表单提交上的空对象+；体分析器

我的应用程序中有一个被动的（模型驱动的）表单，我很难将表单数据传递到mongoose。当我通过HTTPPOST方法提交数据时，我不断收到一个错误，因为后端接收到一个空对象

我知道后端可以工作，因为当我向Postman提交帖子请求时，我得到的结果状态是“201已创建”。过去几天我一直在阅读论坛和各种博客，但我仍然感到困惑

问题

var mongoose = require('mongoose');
var Job = mongoose.model('Job');
module.exports.addNewJob = function(req, res){
  console.log(req.body);//added to see req payload from client
  Job
        .create({
            _id: req.body.jobid,
            desc: req.body.name,
            type: req.body.jobType,
            location: req.body.location
        },function(err, job){
            if(err){
                console.log("Error creating job");
                res
                    .status(400)
                    .json(err);
            }else{
                console.log("Job Created", job);
                res
                    .status(201)
                    .json(job);
            }
        });
}

var mongoose = require('mongoose');
var jobSchema = new mongoose.Schema({
    _id: {
        type: String
    },
    desc: {
        type: String
    },
    type: {
        type: String,
        default: "TM"
    },
    location: String
});
mongoose.model('Job', jobSchema);

var mongoose = require ('mongoose');
var dburl = 'mongodb://localhost:27017/dbname';

mongoose.connect(dburl);

mongoose.connection.on('connected', function(){
    console.log('Mongoose connected to ' + dburl);
});

mongoose.connection.on('disconnected', function(){
    console.log('Mongoose disconnedted');
});

mongoose.connection.on('error', function(err){
    console.log('Mongoose connection error: ' + err);
});

require('./jobs.model.js');

var express = require('express');
var router = express.Router();

var ctrlJobs = require('../controllers/jobs.controllers.js');

router
    .route('/jobs')
    .get(ctrlJobs.jobsGetAll)
    .post(ctrlJobs.addNewJob);

module.exports = router;

require('./api/data/db.js');
var express = require('express');
var app = express ();
var path = require('path');
var bodyParser = require('body-parser');

var routes = require('./api/routes');

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({extended: false}));

app.use('/api', routes);//Goes to index.js

我需要更改什么才能使表单数据到达后端 合适吗

Angular2表格数据提交是否有最佳实践

注释 看起来可能缺少了一些东西，比如URL，您会注意到表单中还有一些附加字段。为了简洁起见，我故意不包括所有这些内容，并混淆了到后端的实际链接

猫鼬 jobs.controllers.js

var mongoose = require('mongoose');
var Job = mongoose.model('Job');
module.exports.addNewJob = function(req, res){
  console.log(req.body);//added to see req payload from client
  Job
        .create({
            _id: req.body.jobid,
            desc: req.body.name,
            type: req.body.jobType,
            location: req.body.location
        },function(err, job){
            if(err){
                console.log("Error creating job");
                res
                    .status(400)
                    .json(err);
            }else{
                console.log("Job Created", job);
                res
                    .status(201)
                    .json(job);
            }
        });
}

var mongoose = require('mongoose');
var jobSchema = new mongoose.Schema({
    _id: {
        type: String
    },
    desc: {
        type: String
    },
    type: {
        type: String,
        default: "TM"
    },
    location: String
});
mongoose.model('Job', jobSchema);

var mongoose = require ('mongoose');
var dburl = 'mongodb://localhost:27017/dbname';

mongoose.connect(dburl);

mongoose.connection.on('connected', function(){
    console.log('Mongoose connected to ' + dburl);
});

mongoose.connection.on('disconnected', function(){
    console.log('Mongoose disconnedted');
});

mongoose.connection.on('error', function(err){
    console.log('Mongoose connection error: ' + err);
});

require('./jobs.model.js');

var express = require('express');
var router = express.Router();

var ctrlJobs = require('../controllers/jobs.controllers.js');

router
    .route('/jobs')
    .get(ctrlJobs.jobsGetAll)
    .post(ctrlJobs.addNewJob);

module.exports = router;

require('./api/data/db.js');
var express = require('express');
var app = express ();
var path = require('path');
var bodyParser = require('body-parser');

var routes = require('./api/routes');

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({extended: false}));

app.use('/api', routes);//Goes to index.js

jobs.model.js

var mongoose = require('mongoose');
var Job = mongoose.model('Job');
module.exports.addNewJob = function(req, res){
  console.log(req.body);//added to see req payload from client
  Job
        .create({
            _id: req.body.jobid,
            desc: req.body.name,
            type: req.body.jobType,
            location: req.body.location
        },function(err, job){
            if(err){
                console.log("Error creating job");
                res
                    .status(400)
                    .json(err);
            }else{
                console.log("Job Created", job);
                res
                    .status(201)
                    .json(job);
            }
        });
}

var mongoose = require('mongoose');
var jobSchema = new mongoose.Schema({
    _id: {
        type: String
    },
    desc: {
        type: String
    },
    type: {
        type: String,
        default: "TM"
    },
    location: String
});
mongoose.model('Job', jobSchema);

var mongoose = require ('mongoose');
var dburl = 'mongodb://localhost:27017/dbname';

mongoose.connect(dburl);

mongoose.connection.on('connected', function(){
    console.log('Mongoose connected to ' + dburl);
});

mongoose.connection.on('disconnected', function(){
    console.log('Mongoose disconnedted');
});

mongoose.connection.on('error', function(err){
    console.log('Mongoose connection error: ' + err);
});

require('./jobs.model.js');

var express = require('express');
var router = express.Router();

var ctrlJobs = require('../controllers/jobs.controllers.js');

router
    .route('/jobs')
    .get(ctrlJobs.jobsGetAll)
    .post(ctrlJobs.addNewJob);

module.exports = router;

require('./api/data/db.js');
var express = require('express');
var app = express ();
var path = require('path');
var bodyParser = require('body-parser');

var routes = require('./api/routes');

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({extended: false}));

app.use('/api', routes);//Goes to index.js

db.js

var mongoose = require('mongoose');
var Job = mongoose.model('Job');
module.exports.addNewJob = function(req, res){
  console.log(req.body);//added to see req payload from client
  Job
        .create({
            _id: req.body.jobid,
            desc: req.body.name,
            type: req.body.jobType,
            location: req.body.location
        },function(err, job){
            if(err){
                console.log("Error creating job");
                res
                    .status(400)
                    .json(err);
            }else{
                console.log("Job Created", job);
                res
                    .status(201)
                    .json(job);
            }
        });
}

var mongoose = require('mongoose');
var jobSchema = new mongoose.Schema({
    _id: {
        type: String
    },
    desc: {
        type: String
    },
    type: {
        type: String,
        default: "TM"
    },
    location: String
});
mongoose.model('Job', jobSchema);

var mongoose = require ('mongoose');
var dburl = 'mongodb://localhost:27017/dbname';

mongoose.connect(dburl);

mongoose.connection.on('connected', function(){
    console.log('Mongoose connected to ' + dburl);
});

mongoose.connection.on('disconnected', function(){
    console.log('Mongoose disconnedted');
});

mongoose.connection.on('error', function(err){
    console.log('Mongoose connection error: ' + err);
});

require('./jobs.model.js');

var express = require('express');
var router = express.Router();

var ctrlJobs = require('../controllers/jobs.controllers.js');

router
    .route('/jobs')
    .get(ctrlJobs.jobsGetAll)
    .post(ctrlJobs.addNewJob);

module.exports = router;

require('./api/data/db.js');
var express = require('express');
var app = express ();
var path = require('path');
var bodyParser = require('body-parser');

var routes = require('./api/routes');

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({extended: false}));

app.use('/api', routes);//Goes to index.js

index.js

var mongoose = require('mongoose');
var Job = mongoose.model('Job');
module.exports.addNewJob = function(req, res){
  console.log(req.body);//added to see req payload from client
  Job
        .create({
            _id: req.body.jobid,
            desc: req.body.name,
            type: req.body.jobType,
            location: req.body.location
        },function(err, job){
            if(err){
                console.log("Error creating job");
                res
                    .status(400)
                    .json(err);
            }else{
                console.log("Job Created", job);
                res
                    .status(201)
                    .json(job);
            }
        });
}

var mongoose = require('mongoose');
var jobSchema = new mongoose.Schema({
    _id: {
        type: String
    },
    desc: {
        type: String
    },
    type: {
        type: String,
        default: "TM"
    },
    location: String
});
mongoose.model('Job', jobSchema);

var mongoose = require ('mongoose');
var dburl = 'mongodb://localhost:27017/dbname';

mongoose.connect(dburl);

mongoose.connection.on('connected', function(){
    console.log('Mongoose connected to ' + dburl);
});

mongoose.connection.on('disconnected', function(){
    console.log('Mongoose disconnedted');
});

mongoose.connection.on('error', function(err){
    console.log('Mongoose connection error: ' + err);
});

require('./jobs.model.js');

var express = require('express');
var router = express.Router();

var ctrlJobs = require('../controllers/jobs.controllers.js');

router
    .route('/jobs')
    .get(ctrlJobs.jobsGetAll)
    .post(ctrlJobs.addNewJob);

module.exports = router;

require('./api/data/db.js');
var express = require('express');
var app = express ();
var path = require('path');
var bodyParser = require('body-parser');

var routes = require('./api/routes');

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({extended: false}));

app.use('/api', routes);//Goes to index.js

app.js

var mongoose = require('mongoose');
var Job = mongoose.model('Job');
module.exports.addNewJob = function(req, res){
  console.log(req.body);//added to see req payload from client
  Job
        .create({
            _id: req.body.jobid,
            desc: req.body.name,
            type: req.body.jobType,
            location: req.body.location
        },function(err, job){
            if(err){
                console.log("Error creating job");
                res
                    .status(400)
                    .json(err);
            }else{
                console.log("Job Created", job);
                res
                    .status(201)
                    .json(job);
            }
        });
}

var mongoose = require('mongoose');
var jobSchema = new mongoose.Schema({
    _id: {
        type: String
    },
    desc: {
        type: String
    },
    type: {
        type: String,
        default: "TM"
    },
    location: String
});
mongoose.model('Job', jobSchema);

var mongoose = require ('mongoose');
var dburl = 'mongodb://localhost:27017/dbname';

mongoose.connect(dburl);

mongoose.connection.on('connected', function(){
    console.log('Mongoose connected to ' + dburl);
});

mongoose.connection.on('disconnected', function(){
    console.log('Mongoose disconnedted');
});

mongoose.connection.on('error', function(err){
    console.log('Mongoose connection error: ' + err);
});

require('./jobs.model.js');

var express = require('express');
var router = express.Router();

var ctrlJobs = require('../controllers/jobs.controllers.js');

router
    .route('/jobs')
    .get(ctrlJobs.jobsGetAll)
    .post(ctrlJobs.addNewJob);

module.exports = router;

require('./api/data/db.js');
var express = require('express');
var app = express ();
var path = require('path');
var bodyParser = require('body-parser');

var routes = require('./api/routes');

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({extended: false}));

app.use('/api', routes);//Goes to index.js

前端-角度2决赛 工作。服务

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';


@Injectable()
export class JobsService{
    private _url = "http://123.456.789.100/api/jobs"; //removed actual address for post
    constructor(private _http: Http){}

    addNewJob(form: Object){
        let headers = new Headers({'Content-Type':'application/json'});
        let options = new RequestOptions({headers: headers});
        return this._http
                .post(this._url, JSON.stringify(form), options)
                .map(this.extractData)
                .catch(this.handleError);
    }

    private extractData(res: Response){
        let body = res.json();
        return body.data || { };
    }

    private handleError (error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

工作表单.组件

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';

import { JobsService } from './jobs.service';

@Component({
    templateUrl: './job-form.component.html',
    providers: [JobsService]
})

export class JobFormComponent implements OnInit {

    id: string;
    job: any;
    jobForm: FormGroup;
    title: string;

    constructor(
        private _fb: FormBuilder,
        private _router: Router,
        private _route: ActivatedRoute,
        private _jobsService: JobsService
        ){

        }


    ngOnInit(): void {
        this.jobForm = this._fb.group({
                jobid: ['', Validators.required],
                name: ['', Validators.required],
                jobType: ['', Validators.required],
                location: ['', Validators.required]
            });

        this.id = this._route.snapshot.params['id'];

        this.title = this.id ? "Edit Job" : "Create New Job";

    }

    save(form: any){
        console.log(this.jobForm.value);

        this._jobsService.addNewJob(form).subscribe((dataResponse) => {
            console.log("Submitting" + dataResponse);
        });
    }
    reset(){
        this.jobForm.reset();
    }
}

作业表单.component.html

<form [formGroup]="jobForm" novalidate (ngSubmit)="save(jobForm.value)">
                <div class="row">
                    <div class="col-xs-2">
                        <label>Job Number</label>
                        <input [ngModel]="job?.jobid ? job.jobid : ''" class="form-control" type="text" formControlName="jobid">
                    </div>
                    <div class="col-xs-8">
                        <label>Title</label>
                        <input [ngModel]="job?.name ? job.name : ''" class="form-control" type="text" formControlName="name">
                    </div>
                    <div class="col-xs-2">
                        <label>Type</label><br />
                        <select [ngModel]="job?.jobType ? job.jobType : ''"class="form-control" formControlName="jobType">
                            <option value="TM">T&M</option>
                            <option value="LS">Lump Sum</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2">
                        <label>Status</label><br />
                        <select class="form-control" formControlName="status" [ngModel]="job?.status ? job.status : ''">
                            <option value="Pending">Pending</option>
                            <option value="Active">Active</option>
                            <option value="On Hold">On Hold</option>
                            <option value="Complete">Complete</option>
                            <option value="Closed">Closed</option>
                        </select>
                    </div>
                    <div class="col-xs-5">
                        <label>Location</label>
                        <input [ngModel]="job?.location ? job.location : ''" class="form-control" type="text" formControlName="location">
                    </div>
                </div>
               <br />
                <div class="row">
                    <div class="col-xs-1">
                        <button type="btn btn-primary" class="btn btn-primary" [disabled]="!jobForm.valid">Submit</button>
                    </div>
                    <div class="col-xs-1">
                        <button class="btn btn-default" (click)="reset()">Reset</button>
                    </div>
                </div>
            </form>

当我将标题设置为application/x-www-form-urlencoded时，req.body显示

{ '{"jobid":"8746541","name":"asdfasdfasdfasdf","jobType":"LS","location":"asdfa"}':''}

提交

---

邮递员解决方案

---

添加了行

app.use（bodyParser.json（））到app.js。本质上，这告诉应用程序它应该本机理解JSON。现在，在应用程序中提交表单将导致新记录添加到mongodb。
解决方案

添加了行
app.use（bodyParser.json（））到app.js。本质上，这告诉应用程序它应该本机理解JSON。现在，在应用程序中提交表单会将一条新记录添加到mongodb。
在您要设置头的jobs.service文件中

'Content-Type':'application/json'

在index.js文件中，您正在处理正文请求

app.use(bodyParser.urlencoded({extended: false}));

因此，有两种解决方案可以做到

1.）工作或服务的变更

'Content-Type': 'application/x-www-form-urlencoded'

2.）或index.js中的更改

app.use(bodyParser.json());

在文件jobs.service中，您将头设置为

'Content-Type':'application/json'

在index.js文件中，您正在处理正文请求

app.use(bodyParser.urlencoded({extended: false}));

因此，有两种解决方案可以做到

1.）工作或服务的变更

'Content-Type': 'application/x-www-form-urlencoded'

2.）或index.js中的更改

app.use(bodyParser.json());

在app.js中添加以下中间件

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

有关更多信息，请访问此网站：
 在app.js中添加以下中间件

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

有关更多信息，请访问此网站：
 1.在前端级别：-
使用被动驱动窗体时
传递前端类文件绑定
对象作为getRawValue（）

1.1前端到后端的集成

例如，我们公司提供的服务
方法调用时，我们必须传递
保存时使用的绑定对象包括
标题，就好像它是post方法一样

通过要求bodyparser添加中间件。用作bodyparser.json


在postman中导航到特定路线，首先检查新数据并发布


现在绑定前端对象


我们传递给PostRESTAPI方法的是来自前端的对象


幸福结局1.在前端级别：-
使用被动驱动窗体时
传递前端类文件绑定
对象作为getRawValue（）

1.1前端到后端的集成

例如，我们公司提供的服务
方法调用时，我们必须传递
保存时使用的绑定对象包括
标题，就好像它是post方法一样

通过要求bodyparser添加中间件。用作bodyparser.json


在postman中导航到特定路线，首先检查新数据并发布


现在绑定前端对象


我们传递给PostRESTAPI方法的是来自前端的对象


大团圆结局