모두 저녁,
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)
})
}
});
서버 및 DB 논리 용 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로 전달됩니다.
이를 달성하는 가장 좋은 방법을 설명하고이 시나리오에서 데이터베이스, 서버 및 클라이언트 측 프레임 워크 간의 관계를 설명 할 수있는 사람이 있습니까?
감사
양식이 누락 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입니다. 함수를 종료합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다