node.js 表单处理更新和删除答案

【问题标题】：node.js form handling post update and deletenode.js 表单处理更新和删除
【发布时间】：2016-10-10 08:07:22
【问题描述】：

我是 nodejs 的新手并且被卡住了。我已经完成了服务器端代码和所有 API，现在我必须构建表单来获取数据并使用我构建的 API。我迷失在互联网上的教程中。我的 API 位于名为路由的文件夹中，例如第一个名为地址，这是添加后的代码：

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？

【问题讨论】：

我认为如果你想要一个有针对性的答案，你需要将你的问题简化为一个单一的输入和更少的代码。
请阅读如何创建minimal reproducible example

标签： javascript html node.js api express

【解决方案1】：

这里有几个问题。您需要更新表单以发布到/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');

然后创建一个名为 public 的文件夹并创建一个 index.html 文件。在这里，您可以将上面编写的 HTML 复制到其中。这意味着服务器可以从http://localhost:3000 提供静态 HTML。

最后，由于您使用的是 POST，因此您需要一个用于 express 的正文解析器。我知道你需要一个额外的工具来简单地获得身体但表达倾向于轻量而不是全能，这似乎很奇怪。

您可以在此处阅读有关正文解析的文档：https://github.com/expressjs/body-parser

此时您应该能够console.log 输出以开始处理后端代码。

【讨论】：