Проблема стека MEAN с данными формы публикации

Question

Evening All,

Я пытаюсь создать простую страницу регистрации с mongodb, node, express, mon goose и 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)
        })
    }
});

сервер. js для сервера и лог логики c ...

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 на моем контроллере, а не на стороне сервера? Поскольку в настоящее время данные поста передаются как нулевые.

Кто-то может объяснить лучший способ достижения этого и описать отношения между базой данных, сервером и клиентской средой в этом сценарии.

Спасибо

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 просто выйдет из функции.