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

Posted 2023-03-07

【中文标题】发布表单数据的平均堆栈问题

【英文标题】：MEAN stack issue with posting form data

【发布时间】：2020-08-05 21:56:11

【问题描述】：

晚上好，

我正在尝试使用 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 传递。

是否有人能够解释实现这一目标的最佳方式并描述此场景中数据库、服务器和客户端框架之间的关系。

谢谢

【参考方案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 只是退出函数。

【讨论】：

谢谢丹。现在的问题是，虽然 post 请求发送了正确的表单数据，但 post 请求只是保持未决状态并且无法解决。我可以看到在数据库中创建了一个对象，但它只是一个空白文档。

不客气。我向主路由添加了重定向，并解释了如何发送带有一些数据的服务器响应。您可以在服务器中放置一些逻辑以根据成功/失败发回不同的响应，但这应该可以帮助您入门。