2016-06-09 61 views
1

我是nodejs的新手,被卡住了。我完成了服務器端代碼和所有API,現在我必須構建表單以獲取數據並使用我構建的API。我迷失在互聯網上的教程中。我的API是在一個文件夾,名爲路線,例如,第一個被稱爲地址和這裏的文章添加代碼:node.js表單處理帖子更新和刪除

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"  }); 
     }); 

    } 


}); 

} 

然後我做了HTML表單:

<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> 

的問題是,我該怎麼辦將表單連接到API?

+0

我想你需要簡化你的問題到一個單一的輸入和更少的代碼,如果你想要一個專注的答案。 –

+0

請閱讀如何創建[mcve] – jmattheis

回答

2

這裏有幾個問題。您需要更新表格以張貼至/add

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

接下來,你需要得到您的Express服務器運行:

替換爲你的第一個2線:

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

然後在文件的底部,放置

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

然後創建一個名爲的文件夾10並創建一個index.html文件。在這裏,你可以複製上面寫的HTML到它。這意味着服務器可以從http://localhost:3000提供靜態HTML。

最後,因爲您正在使用POST,您需要一個用於快車的身體分析器。我知道這似乎很奇怪,你需要一個額外的實用程序來簡單地獲取身體,但表達傾向於輕量級而不是全部。

您可以閱讀身體解析此文檔:https://github.com/expressjs/body-parser

在這一點上,你應該能夠console.log開始在後端代碼工作的輸出。