2016-06-09 6 views
1

Ich bin neu in Nodejs und bin fest. Ich habe den Code auf der Serverseite und alle APIs abgeschlossen, jetzt muss ich Formulare erstellen, um die Daten zu erhalten und die APIs zu verwenden, die ich erstellt habe. Ich habe mich in den Tutorials im Internet verlaufen. Meine APIs sind in einem Ordner namens Routen, zum Beispiel erste ist Adressen genannt und hier ist die Post Add Code:node.js Formular Handling Post aktualisieren und löschen

var express = require('express'); 
var router = express.Router(); 
var Address = require('../models/address'); 
var Student = require('../models/student'); 


router.post('/add',function(req,res){ 

var language = req.body.language, 
    country_id = req.body.country_id, 
    city_id = req.body.city_id, 
    pickup_points = req.body.pickup_points, 
    static_address = req.body.static_address; 
    student_id = req.body.student_id; 

// if(student_id!=null && student_id != undefined){ 
// res.json({success:false,message: "error one or more fields are empty"}); 
// }else{ 


    Student.findById(student_id,function(err,student){ 
    if(err) {res.json({success:false , message:"please enter a valid student Id"}); 
    } 
    }); 
    req.assert('student_id', 'Invalid student id').notEmpty(); 
     errors = req.validationErrors(); 
    if (errors) { 
    res.json({success:false,message:"please enter student ID " }); 

    } 

    var newaddress = new Address({ 
     language : req.body.language != null 
     || req.body.language !=undefined ? req.body.language : "", 
     country_id : req.body.country_id != null 
     || req.body.country_id !=undefined ? req.body.country_id : "", 
      city_id : req.body.city_id != null 
      || req.body.city_id !=undefined ? req.body.city_id : [], 
     pickup_points : req.body.pickup_points != null 
     || req.body.pickup_points !=undefined ? req.body.pickup_points : [], 
      drop_points : req.body.drop_points != null && 
      req.body.drop_points !=undefined ? req.body.drop_points : [], 
     static_address : req.body.static_address != null 
     || req.body.static_address !=undefined ? req.body.static_address : {} 
    }); 

// } 
newaddress.save(function(err,address){ 
    if(err){ 
     console.log(err); 
    }else{ 
     addAddress(req,res,address); 
     res.json({success: true ,message: "address successfully added"}); 
    } 
}); 
}); 


var addAddress =function (req, res, address) { 

var student_id = req.body.student_id; 

Student.findById(student_id,function(err,student){ 
    if(err){ 
     console.log(err); 
    }else{ 

     student.address = address._id; 
     student.save(function(err,student){ 

      res.json({success : true , message : "address successfully added"  }); 
     }); 

    } 


}); 

} 

Dann habe ich die HTML-Formular aus:

<html> 
      <body> 
       <form action="/" method="post" enctype="multipart/form-data"> 
       <fieldset> 
        <label for="language">Language:</label> 
        <input type="text" id="address" name="address" placeholder="Enter your language" /> 
        <br /> 

        <label for="country_id">country_id:</label> 
        <input type="country_id" id="country_id" name="country_id" placeholder="Enter your country_id " /> 
        <br /> 

        <label for="city_id">city_id:</label> 
        <input type="city_id" id="city_id" name="city_id" placeholder="Enter your city_id " /> 
        <br /> 

        <label for="pickup_points">pickup_points:</label> 
        <input type="pickup_points" id="pickup_points" name="pickup_points" placeholder="Enter your pickup_points " /> 
        <br /> 

        <label for="drop_points">drop_points:</label> 
        <input type="drop_points" id="drop_points" name="drop_points" placeholder="Enter your drop_points " /> 
        <br /> 

        <label for="static_address">static_address:</label> 
        <input type="static_address" id="static_address" name="static_address" placeholder="Enter your static_address " /> 
        <br /> 

        <input type="submit" value="Create Profile" /> 
       </fieldset> 
       </form> 
      </body> 
     </html> 

Die Frage ist, wie ich tun Verbinden Sie das Formular mit der API?

+0

Ich denke, Sie müssen Ihre Frage auf einen einzigen Eingang und viel weniger Code zu vereinfachen, wenn Sie eine gezielte Antwort wollen. –

+0

Bitte lesen Sie, wie man ein [mcve] erstellt – jmattheis

Antwort

2

Es gibt ein paar Probleme hier. Sie müssen das Formular aktualisieren, um es an /add zu senden.

<form action="/add" method="post" enctype="multipart/form-data">

Als nächstes müssen Sie Ihr ausdrückliches Server zum Laufen bringen:

Ersetzen Sie Ihre ersten 2 Zeilen mit:

var express = require('express'); 
var router = express(); 
router.use(express.static('public')); 

Dann am Ende der Datei, legen

router.listen(3000); 
console.log('Listening on port: 3000 -- Open http://localhost:3000'); 

Dann erstellen Sie einen Ordner mit der Bezeichnung public und erstellen Sie eine index.html Datei. Hier können Sie den oben geschriebenen HTML-Code kopieren. Dies bedeutet, dass der Server Ihren statischen HTML-Code von http://localhost:3000 verarbeiten kann.

Schließlich, da Sie einen POST verwenden, benötigen Sie einen Body-Parser für Express. Ich weiß, dass das merkwürdig erscheint, dass Sie ein Extra-Util benötigen, um einfach den Körper zu bekommen, aber drücken Sie sich eher auf Leichtgewicht als auf All-In.

Sie können die Dokumentation auf Körper-Parsing hier lesen: https://github.com/expressjs/body-parser

An diesem Punkt sollten Sie die Ausgabe auf console.log der Lage sein, auf dem Back-End-Code zu arbeiten.