node.js表单处理发布更新和删除

I am new to nodejs and am stuck. I've finished the server side code and all the APIs, now I have have to build forms to get the data and use the APIs I've built. I got lost in the tutorials in the internet. My APIs are in a folder called routes, for example first one is called addresses and here's the post add code:

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

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

    }


});

}

Then I made the html form:

然后我制作了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>

The question is how do I connect the form to the API?

问题是如何将表单连接到API?

1 个解决方案

#1

There are a couple issues here. You need to update the form to post to /add.

这里有几个问题。您需要更新表单以发布到/添加。

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

Next you need to get your express server running:

接下来,您需要运行快速服务器:

Replace your first 2 lines with:

将前两行替换为:

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

Then at the bottom of the file, place

然后在文件的底部,放置

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

Then create a folder called public and create an index.html file. Here you can copy the HTML written above into it. This means the server can serve your static HTML from http://localhost:3000.

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

Finally since you are using a POST you need a body parser for express. I know that seems weird that you need an extra util to simply get the body but express leans towards light weight rather than do-all.

最后因为你正在使用POST,你需要一个body解析器来表达。我知道你需要一个额外的工具来简单地获得身体但是表达倾向于轻量化而不是全部,这似乎很奇怪。

You can read the docs on body-parsing here: https://github.com/expressjs/body-parser

你可以在这里阅读有关正文解析的文档:https://github.com/expressjs/body-parser

At that point you should be able to console.log the output to start working on the backend code.

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

#1