发布表单数据的平均堆栈问题

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 成功，则将视图路由转移到我的主视图。

我应该将表单中的数据传递到我的控制器中的发布请求中，而不是服务器端吗？目前，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 只是退出函数。