Fatal编程技术网
  • javascript/
  • Javascript node.js表单处理后期更新和删除

Javascript node.js表单处理后期更新和删除

javascript html node.js api express

Javascript node.js表单处理后期更新和删除,javascript,html,node.js,api,express,Javascript,Html,Node.js,Api,Express,我是nodejs的新手，我被困住了。我已经完成了服务器端代码和所有API，现在我必须构建表单来获取数据并使用我构建的API。我在网上的教程中迷了路。我的API位于名为routes的文件夹中，例如，第一个称为addresses，下面是post add代码： var express = require('express'); var router = express.Router(); var Address = require('../models/address'); var Student

我是nodejs的新手，我被困住了。我已经完成了服务器端代码和所有API，现在我必须构建表单来获取数据并使用我构建的API。我在网上的教程中迷了路。我的API位于名为routes的文件夹中，例如，第一个称为addresses，下面是post add代码：

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？

这里有几个问题。您需要更新要发布到
/add
的表单

接下来，您需要运行express服务器：

将前两行替换为：

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');
然后创建一个名为
public
的文件夹，并创建一个index.html文件。在这里，您可以将上面编写的HTML复制到其中。这意味着服务器可以从提供静态HTML

最后，因为您使用的是POST，所以express需要一个主体解析器。我知道这看起来很奇怪，你需要一个额外的util来简单地获得身体，但express倾向于轻量，而不是全部

您可以在此处阅读有关正文解析的文档：

此时，您应该能够
控制台。记录输出以开始处理后端代码。
我认为您需要将问题简化为单个输入，如果您希望获得集中的答案，则需要更少的代码。请阅读如何创建