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

最新推荐文章于 2024-09-19 14:15:05 发布
最新推荐文章于 2024-09-19 14:15:05 发布
阅读量4k 收藏 5
点赞数 3
分类专栏： node 文章标签： node post表单 express
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huahuahua__/article/details/89489535
版权 
<!-- 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过来的数据。

林木森森森
关注
专栏目录
node.js 数据接收
歡囍
09-26 646
//post数据提交方式=>数据接收【接收到的数据收字符串数据】 const http=require("http"); //用于创建服务 const queryString=require("querystring"); //用于post数据提交方式的数据接收【对字符串数据进行处理】 queryString.parse()：将字符串数据转换为对象 http.createServer(function(request,response){ //http.createServer()：创建服务 re.
使用express框架书写 POST 接口，三种文件数据接收
C_guoqing的博客
09-14 1183
POST 接口 三种文件数据接收 1.准备如下目录的文件 将 express ，multer 提前从npm超市导入 （multer 文件上传会用到） index.html 内容如下： <button id="btn_keyvalue"> post-传递普通键值对</button> <hr /> <button id="btn_json"> post-传递json</button> <hr />
express框架基本的表单接受参数
weixin_45578684的博客
06-10 239
express
express_post表单实例
leechoy
10-31 934
前端代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>express_post请求</title> </head> <body>
【Node.js】Express---监听 GET 和 POST 请求及处理参数详解
最新发布
lph159的博客
09-19 1791
Express 是 Node.js 生态中最常用的 Web 框架之一，具有简洁、灵活的特点。它允许开发者快速构建 Web 应用程序和 API，支持中间件机制，使得开发者可以方便地进行请求和响应的处理。Express 中的中间件是请求处理流水线的一部分，它们在请求到达路由之前，或者在响应发送给客户端之前执行。中间件可以对请求进行处理、修改，或者终止请求。解析请求体设置 CORS 头处理身份验证和授权Express 提供了便捷的方法来监听和处理 GET 与 POST 请求。
express 表单提交
Yang'blog
01-04 5607
请求与bodyParser....
Nodejs express获取POST参数值
YNlanduiyun的博客
04-29 1870
学习 nodejs，获取url post传回的参数时，会发生和我一样的问题，今天就来解决这个小麻烦 node.js不像php这种老牌后端语言有特定的获取外部参数的做法，毕竟是个新生力量，希望后来的版本能够更加便捷高效 //正常的获取值 app.get(’/’, (req, res) => { console.log(req.query); res.send(‘完成’); }); app.po...
Node+Express+MongoDB实现登录注册功能实例
08-30
在用户注册和登录的过程中，我们使用了 `body-parser` 中间件来解析表单数据，并使用 `express-session` 中间件来管理用户的会话信息。 Jade 模板引擎 在本实例中，我们使用了 Jade 模板引擎来渲染视图页面。Jade ...
使用node+express+mysql实现一个简单的后台管理（增删改查）
01-04
在本文中，我们将深入探讨如何使用Node.js、Express框架以及MySQL数据库来构建一个基础的后台管理系统，该系统能够实现常见的数据操作：增加、删除、修改和查询（CRUD）。我们将重点讲解每个技术的关键概念和它们...
node+express+bootstrap博客案例
06-04
这个案例主要展示了如何使用Node.js（通过Express）作为后端处理数据，Bootstrap作为前端界面设计，构建一个完整的博客系统。学习者可以了解到如何设置路由来处理不同的HTTP请求（如GET、POST），如何使用模板引擎...
node.js+express+mysql实现增删改查+分页+文件上传
12-25
在本文中，我们将深入探讨如何使用Node.js、Express框架和MySQL数据库来构建一个功能完备的Web应用程序，包括数据的增删改查（CRUD）操作、分页功能以及图片的上传处理。首先，我们先来了解这三个核心组件。 **Node...
详解Vue+axios+Node+express实现文件上传(用户头像上传)
10-18
在文章中axios用于发送一个POST请求到Node服务器，并将用户选择的图片文件作为数据发送。 Node.js 是一个基于Chrome V8引擎的JavaScript运行时环境，它使用事件驱动、非阻塞I/O模型，使其轻量又高效。express是基于...
在express中配置解析表单post请求体数据
qq_45830543的博客
01-25 691
在express中，没有内置获取表单 POST 请求体的 API，这里我们需要使用一个第三方包：body-parser 当配置好body-parse中间件后，就可以直接通过 req.body 来获取表单 POST 请求体数据了 一、安装 npm install --save body-parser 二、配置 var express = require('express') //引包 var bodyParser = require('body-parser') var app = express
在Express中get,post获取表单请求数据
阿牛哥的博客
02-03 2369
在Express中获取表单请求数据，
node.js02 -- 接收用户请求和返回数据
m0_64494670的博客
10-11 1002
node.js02 -- 接收用户请求和返回数据
用Nodejs创建服务器后端，接收前端数据
st_andrews的博客
01-06 2754
博士做的钓鱼研究。其中有一章节，“how easy is it to launch a phishing attack”。主要来讲，现在做一个钓鱼网站，是一件多么简单的事情。一般来讲，用php来搭建后端服务器。这样，前端复制过来的官网，把诱骗的用户信息传到自己的后端服务器上。但是呢，对于新手来说，还要多学一门语言。所以，我们可以舍弃用php，而用nodejs来搭建自己的后端服务器。 js越来越强大，nodejs用法基本和js一样，并且用来做后端。今天就用nodejs写一个简单的例子。可以接受前端发过来的数
nodejs express如何接收POST传递的参数
weixin_42495005的博客
01-06 2701
1. nodejs express接收POST参数的问题 通过CURL或者POSTMAN工具向后台服务发送POST请求时，nodejs express无法获得相关参数，req.body是undefined，查询各种资料，多数是简单说设置 bodyParser.json()或者bodyParser.urlencoded({ extended: false })，但均没有完整说明，现整理如下： 2. 解决办法 （1）在路由页面文件引入body-parser var bodyParser = require(‘
Express 获取表单内容
qq_42760049的博客
07-20 959
在 Express 中没有内置获取表单 POST 请求体的 API，所以需要引入第三方包body-parser npm install --save body-parser boder-parser的使用： 参考网址：http://expressjs.com/en/resources/middleware/body-parser.html var express = require('exp...
nodejs接收post数据
weixin_30408309的博客
05-07 1273
var qs=require('querystring'); var obj=""; req.on('data',function(data1){ //数据较大，分多次接收 obj+=data1; }) req.on("end",function(){ //接收完成后的操作 obj=qs.parse(obj); res.writeHead(200, { 'content-type':...
Node.js + Express + HTML5：实现高效拖拽上传
- 在Express路由中，设置一个接收文件的POST请求处理器，使用`formidable`或`multer`解析文件数据。 - 处理接收到的文件，可能需要进行验证、存储或进一步处理，然后返回适当的响应给客户端。 总结，使用Node.js、...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值