需要在mongodb中保存html的文本框数据,并使用angularjs,expressjs,nodejs在浏览器中显示保存的数据

时间:2017-08-04 01:16:53

标签: javascript angularjs node.js express mongoose

客户端: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;

1 个答案:

答案 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);