node+express接收post过来的表单数据

最新推荐文章于 2024-07-22 21:31:07 发布

林木森森森

最新推荐文章于 2024-07-22 21:31:07 发布

阅读量3.9k

点赞数 3

分类专栏： node 文章标签： node post表单 express

本文链接：https://blog.csdn.net/huahuahua__/article/details/89489535

版权

node 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!-- html代码 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color: #FFFEC6;
        }
        input{
            border: 0;
            outline: none;
        }
        .title{
            margin-top: 130px;
            text-align: center;
            font-size: 30px;
            color: grey;
        }
        .registerDiv{
            margin: 30px auto 0;
            width:350px;
            background-color: rgba(255,255,255,0.3);
            text-align: center;
        }
        .registerDiv>div{
            margin-top: 10px;
            font-size: 30px;
        }
        #count,
        #password,
        #confirmPassword{
            margin-top: 40px;
            width:300px;
            box-sizing: border-box;
            background-color: transparent;
            border-bottom: 1px solid black;
            line-height: 20px;
            font-size: 20px;
            padding: 8px;
        }
        #submitButton{
            margin-top: 50px;
            margin-bottom: 20px;
            width:300px;
            box-sizing: border-box;
            background-color: #5F74AD;
            height:35px;
            color: #fff;
        }
        /*
            这里本来是想加一个input左边有一个跟随的边框，但是后来发现input的某些类型是不可以使            
            用伪元素的，现在还没改过来，所以下面的代码是没用的。
        */
       /* .registerDiv input{
            position: relative;
        }
        .registerDiv input[type="text"]::before,
        .registerDiv input[type="password"]::before{
            content:"";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 0;
            border-left: 2px #5F74AD solid;
        }
        .registerDiv input[type="text"]:hover::before,
        .registerDiv input[type="password"]:hover::before{
            height: 100%;
        }*/

    </style>
</head>
<body>
    <div class="title">注册账号</div>
    <div class="registerDiv">
        <form action="register" method="POST">
            <!-- 账号 -->
            <input id="count" type="text" name="userName" placeholder="用户名"> 
            <!-- 密码 -->
            <input id="password" type="password" name="password" placeholder="请输入密码">
            <!-- 确认密码 -->
            <input id="confirmPassword" type="password" placeholder="请再次输入密码">
            <!-- 确认按钮 -->
            <input id="submitButton" type="submit" value="确认">
        </form>
    </div>
</body>
</html>

/**
*       index.js
*       用于启动服务
*/
//启动服务
const express = require('express');
const router = require('./router.js');
const app = express();
const bodyParser = require('body-parser');

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

//绑定路由
app.use(router);

app.listen(8080,function(err){
    if(err){
        console.log("服务器开启失败！");
    }
})

/**
*    router.js
*    路由文件
*/

const express = require('express');
const router = express.Router();
const fs = require('fs');
const path = require('path');

const publicPath = path.join(__dirname,'public');
router.get('/',function(req,res){
    fs.readFile(path.join(publicPath,'formDemo.html'),function(err,data){
        //如果不先设置头的话，当接收到数据为buffer类型的时候，express会自动将头设置为 application / octet-stream
        res.set('Content-type','text/html');
        res.send(data);
    });
});

router.use('/public',express.static(publicPath));


router.post('/register',function(req,res){
    console.log(req.body);
    res.send();
});

module.exports = router;

需要注意的地方是，如果用express处理表单post过来的数据的话，直接读req.body是读不到的，必须要在路由之前加载

body-parser模块，然后设置

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

然后才可以在req.body里面读到post过来的数据。

林木森森森

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录