发布表单数据时出现MEAN堆栈问题

Question

全部晚上，

我正在尝试使用mongodb，node，express，mongoose和angularJS构建一个简单的注册页面。

我正在努力理解所有组件之间的关系以及如何将它们连接在一起。

这是我的表格...

<div class="main">
    <p class="sign" align="center">Register</p>
    <form class="form1">
        <input class="un " type="email" align="center" placeholder="Email" name="username" required>
        <input class="pass" type="password" align="center" placeholder="Password" name="password" required>
        <button type="submit" class="btn btn-danger" align="center" ng-click="submit()">Register</button>
</div>

该视图的我的控制器...

angular.module('registerCtrl', [])

.controller('registerController', function ($scope, $http, dataService) {

    $scope.submit= function(){
        console.log('clicked submit');
        $http.post('/RegisterUser').then(function(response){
            console.log(response.data);
            console.log(response.status)
        })
    }
});

用于服务器和数据库逻辑的server.js ...

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
const router = express.Router();


mongoose.connect("mongodb://localhost:27017/userDB", { useNewUrlParser: true });

const userSchema = new mongoose.Schema({
    email: String,
    password: String
});

const User = new mongoose.model("User", userSchema);

app.use(bodyParser.urlencoded({
    extended: true
}))
app.use(express.static('node_modules'));
app.use(express.static('public'));


const port = 3000;
app.listen(port);
console.log('Server is running on port 3000');

//POSTS

app.post("/RegisterUser", function (req, res) {
    const newUser = new User({
        email: req.body.username,
        password: req.body.password
    });

    newUser.save();


})

查看路线...

angular.module('app.routes', [])

  .config(function ($routeProvider) {
    $routeProvider
      .when("/", {
        templateUrl: "views/Login.html"
      })
      .when("/Register", {
        templateUrl: "views/Register.html",
        controller: "registerController"
      })
      .when("/Home", {
        templateUrl: "views/Home.html",
        controller: "homeController"
      })
      .when("/CocktailDetails", {
        templateUrl: "views/CocktailDetails.html",
        controller: "cocktailDetailsController"
      })
      .when("/Favourites", {
        templateUrl: "views/Favourites.html",
        controller: "favouritesController"
      })
      .otherwise({
        redirectTo: "/"
      })

  })

基本上，我想要实现的只是将输入的电子邮件和密码发布到数据库，然后，如果POST成功，则将视图路径转移到我的主视图。

我应该将数据从表单传递到控制器中而不是服务器端的发布请求中吗？目前，帖子数据以null的形式传递。

在这种情况下，有人能够解释实现此目标的最佳方法并描述数据库，服务器和客户端框架之间的关系。

谢谢

Answer 1

客户

似乎您的表单缺少ng-models，并且您也没有发布其数据。将ng-model添加到输入中：

<input type="email" ng-model="form.username">
<input type="password" ng-model="form.password">

也可以在控制器中创建它们的绑定。然后在发布时将表单数据传递到服务器：

.controller('registerController', function ($scope, $http, $location, dataService) {
    // injecting $location now ^
    $scope.form = {  // <-- An object whose properties are bound to the form inputs
      username: '',
      password: ''
    }
    $scope.submit = function(){
        console.log('clicked submit');
        $http.post('/RegisterUser', $scope.form) // <-- posting `$scope.form` data now
        .then(function(response){
            console.log(response.data);
            console.log(response.status);
            $location.path('/Home'); // <-- redirecting to Home route
        })
    }
});

服务器

由于之前没有发布过数据，因此req.body在服务器上为空。服务器也没有发送回响应。如果要发回用户对象，可以将其添加到newUser.save()之后的服务器路由中：

return res.status(200).send(newUser);

send是发送响应的内容，return只是退出函数。