客户端:html代码
<body ng-controller="myAppController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<h1>person details</h1>
</div>
</div>
</nav>
<div>
<form name="myform" ng-submit = "save()">
<label>Enter your details</label><br>
<input type ="text" name ="name" placeholder="enter name..">
<input type ="text" name="surname" placeholder ="enter surname..."><br>
<input type ="number" name="age" placeholder ="enter age.."><br>
<input type="submit" value="submit"><br>
</form>
</div>
<div class="container-fluid text-center ">
<div class="col-sm-8 text-left" ng-repeat ="person in people">
<ul>
<li>
{{person.name}} {{person.surname}} {{person.age}}
</li>
</ul>
</div>
</div>
客户端:角度代码
var myApp = angular.module('myApp',[]);
myApp.controller('myAppController',['$scope', '$http',function($scope, $http, myAppService){
$scope.people = [];
$scope.init = function(){
$http.get('http://localhost:3000/person/name').then(function(result){
$scope.people = result.data;
});
}
$scope.init();
$scope.save = function () {
$http.post('http://localhost:3000/add').then (function() {
var formData ={name: this.name,
surname: this.surname,
age: this.age};
this.name = '';
this.surname = '';
this.age = '';
var jdata = 'mydata='+JSON.stringify(formData);
})
}
$scope.save();
}]);
Sever side expressjs代码,我想问题就在这里,在角度js代码中,我能够保存在factoryjs中创建的第一个文档并在浏览器中显示,但是我输入到文本框的内容不会被保存,出现以下错误:angular.js:11821 POST http://localhost:3000/add 500(内部服务器错误)
var express = require('express');
//var cors = require('cors-anywhere');
var app = express();
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var ObjId = Schema.ObjId;
var Factory = require('./model/factory.js');
mongoose.connect('mongodb://localhost/helloworld');
var db = mongoose.connection;
//adding control to make sure mongodb works fine
db.on('error', function(){
console.log("connection error");
});
db.once('open', function(){
console.log("Mongo Working")
});
var factory = new Factory(Schema, mongoose);
factory.createSchema();
factory.insertPeople();
app.get('/ping',function(req,res){
res.send('hello world this is from server!');
});
app.get('/:id', function(req, res){
res.send('hello world this is from server '+req.params.id);
});
app.post('/add', function (req, res){
console.log(req.body);
console.log(req.body.mydata);
var jsonData = JSON.parse(req.body.mydata);
console.log(jsonData.name);
console.log(jsonData.surname);
console.log(jsonData.age);
db.helloworld.save({name: jsonData.name, surname: jsonData.surname, age: jsonData.age}, function(err, saved) {
if( err || !saved ) res.end( "User not saved");
else res.end( "User saved");
});
});
app.get('/person/name', function(req, res){
var resp = factory.getPerson({name:'mani'}, res);
});
app.use(express.static(__dirname + '/public'));
app.use(function(req, res, next){
res.header('Access-Control-Allow-Origin',"*");
res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
app.get('/', function(req, res){
res.render('index');
})
app.listen(3000);
console.log('listening to port 3000....');
Mongoose模型 - factory.js插入第一个创建的并保存它
var Factory = function(Schema, mongoose){
this.Schema = Schema;
this.mongoose = mongoose;
this.createSchema = function(){
PersonSchema = new this.Schema({
name: String,
surname: String,
age: Number
});
this.Person = mongoose.model('Person', PersonSchema);
}
this.insertPeople = function(){
var mani = new this.Person({
name: 'mani',
surname: 'm*****',
age: 25
});
mani.save();
}
this.getPerson = function(query, res){
this.Person.find(query, function(err, output){
res.json(output);
})
}
}
module.exports = Factory;
答案 0 :(得分:0)
您的HTML
<body ng-controller="myAppController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<h1>person details</h1>
</div>
</div>
</nav>
<div>
<form name="myform" ng-submit = "save(per)">
<label>Enter your details</label><br>
<input type ="text" name ="name" ng-model="per.name" placeholder="enter name..">
<input type ="text" name="surname" ng-model="per.surname" placeholder ="enter surname..."><br>
<input type ="number" name="age" ng-model="per.age" placeholder ="enter age.."><br>
<input type="submit" value="submit"><br>
</form>
</div>
<div class="container-fluid text-center ">
<div class="col-sm-8 text-left" ng-repeat ="person in people">
<ul>
<li>
{{person.name}} {{person.surname}} {{person.age}}
</li>
</ul>
</div>
</div>
你的角色代码
var myApp = angular.module('myApp',[]);
myApp.controller('myAppController',['$scope', '$http',function($scope, $http, myAppService){
$http.get('http://localhost:3000/person/name').then(function(result){
$scope.people = result.data;
});
$scope.save = function (person) {
$http.post('http://localhost:3000/add',person)
.then(function (res) {
console.log(res.data);
},function (err) {
console.log(err);
})
}
}]);
您的服务器端Express代码
var express = require('express');
//var cors = require('cors-anywhere');
var app = express();
var mongoose = require('mongoose');
var Person = require('./model/person.js');
mongoose.connect('mongodb://localhost/helloworld');
app.post('/add', function (req, res){
if (req.body) {
var person = new Person(req.body);
person.save(function (err,doc) {
if (err) {
res.send(err);
}
else{
res.send("Save Data")
}
})
}
});
app.get('/person/name', function(req, res){
Person.find(function (err,doc) {
if (err) {
res.send(err);
}
else{
res.send(doc)
}
})
});
app.use(express.static(__dirname + '/public'));
app.use(function(req, res, next){
res.header('Access-Control-Allow-Origin',"*");
res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
app.get('/', function(req, res){
res.render('index');
})
app.listen(3000);
console.log('listening to port 3000....');
您的人员模型不是工厂
var mongoose = require('mongoose');
Schema = mongoose.Schema;
var personSchema = new Schema({
name:String,
surname: String,
age: String,
createdAt:{ type: Date, default: Date.now }
});
module.exports = mongoose.model('Person',personSchema);