Javascript 使用express.Router（）时如何从HTML表单传递用户输入_Javascript_Html_Node.js_Express

Javascript 使用express.Router（）时如何从HTML表单传递用户输入

javascript html node.js express

Javascript 使用express.Router（）时如何从HTML表单传递用户输入,javascript,html,node.js,express,Javascript,Html,Node.js,Express,我有一个文件server.js，看起来是这样的： var express = require('express'); var app = express(); var mongoose = require('mongoose'); var Bear = require('./models/bear'); mongoose.connect('mongodb://123:pass123@ds1383.mlab.com:53/bears'); var bodyParser = require("

我有一个文件server.js，看起来是这样的：

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var Bear = require('./models/bear');

mongoose.connect('mongodb://123:pass123@ds1383.mlab.com:53/bears');


var bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({extended : false}));
app.use(bodyParser.json());

var port = 8080;


var router = express.Router();



router.use(function(req, res, next){

   //console.log("Working....");
   next();

});


router.get('/', function (req, res){

    res.json({ message: "API Works!"});

});


router.route('/bears')

    .post(function(req, res) {
        console.log("hi");

    var bear = new Bear(req.body);      // create a new instance of the Bear model
    console.log(bear);
    // save the bear and check for errors
    bear.save(function(err) {
        if (err)
            return res.send(err);

        res.json({ message: 'Bear created!' });
    });

});



app.use("/", (req, res) =>{
    res.sendFile(__dirname + "/index.html");
});
app.use('/books', router);

app.listen(port);
console.log("Listening on port "+ port);

<head> 

</head>
<body>

    <form method="POST" action="/bears">
        Enter Book to add
        <input type="text" id="book_name"/>
        <br /><br />

        Enter Quantity
        <input type="number" id="book_quantity"/>
        <br /><br />

        Enter Price

        <input type="text" id="book_price"/>
        <br /><br />

        <button type="submit"> Add Book </button>


    </form>

</body>

我的Index.html文件如下所示：

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var Bear = require('./models/bear');

mongoose.connect('mongodb://123:pass123@ds1383.mlab.com:53/bears');


var bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({extended : false}));
app.use(bodyParser.json());

var port = 8080;


var router = express.Router();



router.use(function(req, res, next){

   //console.log("Working....");
   next();

});


router.get('/', function (req, res){

    res.json({ message: "API Works!"});

});


router.route('/bears')

    .post(function(req, res) {
        console.log("hi");

    var bear = new Bear(req.body);      // create a new instance of the Bear model
    console.log(bear);
    // save the bear and check for errors
    bear.save(function(err) {
        if (err)
            return res.send(err);

        res.json({ message: 'Bear created!' });
    });

});



app.use("/", (req, res) =>{
    res.sendFile(__dirname + "/index.html");
});
app.use('/books', router);

app.listen(port);
console.log("Listening on port "+ port);

<head> 

</head>
<body>

    <form method="POST" action="/bears">
        Enter Book to add
        <input type="text" id="book_name"/>
        <br /><br />

        Enter Quantity
        <input type="number" id="book_quantity"/>
        <br /><br />

        Enter Price

        <input type="text" id="book_price"/>
        <br /><br />

        <button type="submit"> Add Book </button>


    </form>

</body>

当点击“添加书本”按钮时，我甚至认为我已经设置了

action=“/bears”

属性

当使用curl进行测试时，它工作得很好，只是不适用于这个html表单

我用旋度测试，如下所示：

curl-i-X POST-H“内容类型：应用程序/json”-d'{“图书名称”：“Android”，“图书数量”：2，“图书价格”：580}”本地主机：8080/books

<form method="POST" action="/books/bears">

我是Javascript新手，因此任何帮助都将不胜感激

对于通过html表单进行的post调用，所有输入标记的“名称”属性都是必需的

在服务器代码中

这是因为表单以application/x-www-form-urlencoded格式发送post数据，所以访问服务器中的req.body.book_名称

如果需要json格式，则在客户端上使用javascript并生成json，然后发送。

对于通过html表单进行的post调用，所有输入标记的“名称”属性都是必需的

app.use("/", (req, res) =>{
    res.sendFile(__dirname + "/index.html");
});

在服务器代码中

这是因为表单以application/x-www-form-urlencoded格式发送post数据，所以访问服务器中的req.body.book_名称

若需要json格式，那个么在客户端使用javascript，生成json，然后发送

app.use("/", (req, res) =>{
    res.sendFile(__dirname + "/index.html");
});

正在用于所有请求，而不仅仅是'/

。而是使用

app.get（）`来处理index.html页面。这样你的请求就可以通过了

app.get("/", (req, res) =>{
    res.sendFile(__dirname + "/index.html");
});

端点应该是

/books/bears

，而不仅仅是

/bears

，因为您的路由使用是

应用程序。使用（'/books'，router）

，所以您的端点需要从

/books

开始

<form method="POST" action="/books/bears">

正在用于所有请求，而不仅仅是'/

。而是使用

app.get（）`来处理index.html页面。这样你的请求就可以通过了

app.get("/", (req, res) =>{
    res.sendFile(__dirname + "/index.html");
});

端点应该是

/books/bears

，而不仅仅是

/bears

，因为您的路由使用是

应用程序。使用（'/books'，router）

，所以您的端点需要从

/books

开始

<form method="POST" action="/books/bears">

单击“提交”时会发生什么情况？你会去其他路线吗？如果我使用app.post，它会去。但是不能使用router.routeNote您的卷曲测试正在请求

/books

而不是

/bears

我将其更改为action=“/books”，但没有运气。我也尝试了action=“/books/bears”，但仍然没有运气当你点击提交时会发生什么？你会去其他路线吗？如果我使用app.post，它会去。但是不能使用router.routeNote您的卷曲测试正在请求

/books

而不是

/bears

我将其更改为action=“/books”，但没有运气。我也尝试了action=“/books/bears”，但仍然没有luckI修复它。但是它仍然没有进入post函数

action=“/books/bears”

我更改了它，但是仍然没有luckcheck now@timalperamunote name属性对于请求本身不是强制性的，但是对于请求中包含的输入值来说，它们是强制性的。此外，bodyParser不会阻止到达路由，它只会影响请求的主体（输入值）的解析方式。我修复了它。但是它仍然没有进入post函数

action=“/books/bears”

我更改了它，但是仍然没有luckcheck now@timalperamunote name属性对于请求本身不是强制性的，但是对于请求中包含的输入值来说，它们是强制性的。此外，bodyParser不会阻止到达路由，它只会影响请求的主体（输入值）的解析方式。我将其更改为action=“/books/bears”，并在server.js中将其更改为

router.route.get（“/”，（req，res）=>{res.sendFile（u dirname+“/index.html”）；}）但仍然没有运气。我应该删除什么吗？@TimalPeramune是的，router.route部分是错误的，只使用app.get（）
在我删除该部分之前，你一定看过帖子，我将其更改为action=“/books/bear”，在server.js中我将其更改为router.route.get（“/”，（req，res）=>{res sendFile（u dirname+“/index.html”）但仍然没有运气。我应该删除一些东西吗？@TimalPeramune是的，router.route部分出错，只需使用app.get（）
在我删除该部分之前，你一定看过帖子