Angular 6 + NodeJS + MongoDB

Question

您好，在这里搜索后，我找不到任何东西。 2 个类似的问题尚未得到解答。 我是新来的，所以如果你能帮助我完成最终项目或引导我解决问题，我会更高兴的。

运行 ngForm 后，我无法发布和接收以下错误：

zone.js:2969 POST http://localhost:4200/signup 404 (Not Found)
core.js:1624 ERROR 

我的表单位于其他组件中，我的路由看起来像这样：

  {
path: 'signup',
component: SignUpComponent,
data: { title: 'signup' },
children: [ 
  {path: '', component: RegistrationComponent},
  {path: 'userSettings', component: UserSettingsComponent}, 
  {path: 'userSettings/finish', component: FinishComponent},
]},

Registration.Component.html

<div class="panel panel-primary">
<div class="panel-heading">
  {{ test }}
</div>
<div class="panel-body">
    <form [formGroup]="angForm" novalidate>

        <div class="form-group">
            <label class="col-md-4">inputfirstname</label>
            <input type="text" class="form-control" formControlName="inputfirstname" #inputfirstname />
        </div>
        <div *ngIf="angForm.controls['inputfirstname'].invalid && (angForm.controls['inputfirstname'].dirty || angForm.controls['inputfirstname'].touched)" class="alert alert-danger">
            <div *ngIf="angForm.controls['name'].errors.required">
                Name is required.
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4">lastname</label>
            <input type="text" class="form-control" formControlName="inputlastname" #inputlastname/>
        </div>
        <div *ngIf="angForm.controls['inputlastname'].invalid && (angForm.controls['inputlastname'].dirty || angForm.controls['inputlastname'].touched)" class="alert alert-danger">
             <div *ngIf="angForm.controls['inputlastname'].errors.required">
                 LastName is required.
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4">inputEmail</label>
            <input type="text" class="form-control" formControlName="inputEmail" #inputEmail/>
        </div>
        <div *ngIf="angForm.controls['inputEmail'].invalid && (angForm.controls['inputEmail'].dirty || angForm.controls['inputEmail'].touched)" class="alert alert-danger">
            <div *ngIf="angForm.controls['inputEmail'].errors.required">
                inputEmail is required.
            </div>
        </div>

    <div class="form-group">
        <label class="col-md-4">inputPassword</label>
        <input type="text" class="form-control" formControlName="inputPassword" #inputPassword/>
    </div>
    <div *ngIf="angForm.controls['inputPassword'].invalid && (angForm.controls['inputPassword'].dirty || angForm.controls['inputPassword'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['inputPassword'].errors.required">
            inputPassword is required.
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4">confirmPassword</label>
        <input type="text" class="form-control" formControlName="confirmPassword" #confirmPassword/>
    </div>
    <div *ngIf="angForm.controls['confirmPassword'].invalid && (angForm.controls['confirmPassword'].dirty || angForm.controls['confirmPassword'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['confirmPassword'].errors.required">
            confirmPassword is required.
        </div>
    </div>
      <div class="form-group">
        <button (click)="addUser(inputfirstname.value, inputlastname.value,inputEmail.value,inputPassword.value,confirmPassword.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
      </div>
  </form>
</div>

Registration.component.js

import { Component, OnInit, NgModule } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
//import users class
import {UserService} from './../../user.service'

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})

export class RegistrationComponent implements OnInit {
  angForm: FormGroup;

  constructor(private userservice: UserService, private fb: FormBuilder) { 
    this.createForm();
  }

  //user form
  createForm() {
    this.angForm = this.fb.group({
      inputfirstname: ['', Validators.required ],
      inputlastname: ['', Validators.required ],
      inputEmail: ['', Validators.required ],
      inputPassword: ['', Validators.required ],
      confirmPassword: ['', Validators.required ]
   });
  }

  addUser(inputfirstname, inputlastname, inputEmail, inputPassword, confirmPassword ) {
    this.userservice.addUser(inputfirstname, inputlastname, inputEmail, inputPassword, confirmPassword);
  }
  ngOnInit() {
        // //Create a new user object
        // this.user = new user({
        //   firstname:"",lastname:"",email:"", password: { pwd: "" , confirm_pwd: ""}, terms:false})


  }

}

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';

@Injectable()
export class UserService {

  constructor(private http: HttpClient) { }

  addUser(inputfirstname, inputlastname, inputEmail, inputPassword, confirmPassword) {
    const uri = 'http://localhost:4200/signup';
    const obj = {

    inputfirstname: inputfirstname,
    inputlastname: inputlastname,
    inputEmail: inputEmail, 
    inputPassword: inputPassword,
    confirmPassword: confirmPassword
    };
    this.http.post(uri, obj)
        .subscribe(res => console.log('Done'));
  }
}

服务器端的 singup.js

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

var registrationSchema = require('../models/Registration.js');


/* GET users listing. */
// router.get('/', function(req, res, next) {
//   console.log(registrat);
// });

// Defined store route
router.route('/next').post (function(req,res){
  var registerData = new registrationSchema(req.body);
  registerData.save().then(item=>{
    res.status(200).json({'registerData': 'data added successfully'});
  })
  .catch(err => {
    res.status(400).send("unable to save to database");
    });
  })

  // Defined get data(index or listing) route
router.route('/').get(function (req, res) {
  console.log(req.body);
  registrationSchema.find(function (err, data){
   if(err){
     console.log(err);
   }
   else {
     res.json(data);
     }
   });
});

//registration
router.route('/signup').post (async function (req, res) {

  //to add validation?

  //create new user
  var newUser = new registrationSchema(req.body);
  console.log('req.body');
  var isCreated = await registrationSchema.inputData(newUser).then(result =>{
    if (result)
    {
      console.log(isCreated);
      res.status(200).send({success:true,message:"User Created!"})
    }
    else
      console.log(err);
  }) 
})

//login
router.route('/login'), async function (req, res){

}


module.exports = router;

我想听听你的想法。已经在根目录和更改路径中测试了表单。我收到同样的错误。 最后一次尝试是使用不同的方式创建一个表单。又一无所获。

感谢您的宝贵时间， 最好的问候！

Answer 1

addUser(inputfirstname, inputlastname, inputEmail, inputPassword, confirmPassword) {
const uri = 'http://localhost:4200/signup';

uri 属于服务器！我混淆了这个想法。需要是服务器 ip + 端口 + 来自服务器的 callout 路由器。

并且提交是错误的。不得不重新研究 http 文档。