axios post方式提交数据到后台（node）处理方法

最新推荐文章于 2023-03-29 14:28:56 发布
最新推荐文章于 2023-03-29 14:28:56 发布
阅读量3.2k 收藏 10
点赞数 3
分类专栏： 小白 文章标签： axios post提交数据 vue node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39293724/article/details/85851441
版权

本人属于小白一枚，纯属自学。正在不断踩坑o(╥﹏╥)o。。。。最近用axios post方式提交数据到后台遇到一点麻烦。。。就是数据传到后台不知道怎么正确解析成想要的形式。

首先 我们要清楚axios post提交方式默认数据提交格式为application/json ,如下：

         在前台写出相应post提交数据的代码，

        

       然后打日志，可以在浏览器控制台，很清楚的观察出提交的数据格式：

      

针对这种情况，我写了两种方法。学有不足，仅供参考。

方法一：利用vue qs模块

1、首先是在cmd找到项目根目录，输入npm install qs，然后在main.js中导入qs模块，并交给vue使用       

2、使用qs，对data数据进行格式转换,代码如下：

然后打日志，在浏览器控制台观察：

data提交的数据格式已经转变，这个为普通post提交数据的格式。这样后台处理起来就很简单了。就是获取数据后利用querystring.parse解析数据。

前台相应模块导入代码：

import axios from 'axios'
import qs from 'qs'

Vue.prototype.$qs = qs
Vue.prototype.ajax = axios

前台组件代码（只写了登陆的方法，可以参照登录方法写下注册）：

<template>
  <div>
    用户：<input type="text" id="user" v-model="users"/><br>
    密码：<input type="password" id="pass" v-model="pwd"/><br>
    <input type="button" value="注册" id="btn_reg">
    <input type="button" value="登陆" id="btn_login" @click="log">
  </div>
</template>

<script>
  export default {
    name: '',
    data(){
      return {
        users:'',
        pwd:'',
      }
    },
    methods:{
      async log(){
        console.log(this.users)
        
        let a = await this.ajax({
          method:'post',
          url:'http://localhost:8081/login',
          data: this.$qs.stringify({user: this.users,pass: this.pwd})
        })
        
        //相应日志：
        console.log('a',a)
        console.log('a.data',a.data)
        console.log(this.users)
        
        if(!a.data['err']){
          console.log('success')
          //路由跳转
          this.$router.push({ path: '/list' })
        }
  }}}
</script>

<style scoped>

</style>

后台代码：

const http=require('http');
const mysql=require('mysql');
const fs=require('fs');
const url=require('url');
const zlib=require('zlib');
const crypto=require('crypto');
const querystring=require('querystring');

const _key='sadfslekrtuew5iutoselgdtjiypoydse4ufhs.edtyo;s8te4arfeliawkfhtsie5tlfia;sefdshroiupeoutwyeli5gurse;ihf';

function md5(str){
  let obj=crypto.createHash('md5');

  obj.update(str);

  return obj.digest('hex');
}
//加密
function md5_2(str){
  return md5(md5(str)+_key);
}
//连接数据库
let db=mysql.createPool({host: 'localhost', port: 3306, user: 'root', password: '', database: 'a'});

let server=http.createServer((req, res)=>{
 
  //跨域处理
  res.writeHead(200,{
    'Access-Control-Allow-Origin': '*',
	'Access-Control-Allow-Headers':'content-type'
    });
	
  //get
  let {pathname, query}=url.parse(req.url, true);
  
  console.log('query',query);
  
  //post
  let str='';
  req.on('data',data=>{
	  console.log('str0:',str);
	  str+=data
	  console.log('str1:',str);
  });
  console.log('str2:',str); 
  req.on('end', ()=>{
	  //解析数据
    let post=querystring.parse(str);
	console.log('str3:',str); 
	console.log('post1:',post);
    //解构获取到的数据
	let {user, pass}=str?post:query;
	console.log(user);
  switch(pathname){
    //接口
    case '/reg':
      //校验
      if(!user){
        res.write('{"err": 1, "msg": "username can\'t be null"}');
        res.end();
      }else if(!pass){
        res.write('{"err": 1, "msg": "password can\'t be null"}');
        res.end();
      }else if(!/^\w{4,16}$/.test(user)){
        res.write('{"err": 1, "msg": "username is invaild"}');
        res.end();
      }else if(/['|"]/.test(pass)){
        res.write('{"err": 1, "msg": "password is invaild"}');
        res.end();
      }else{
        db.query(`SELECT * FROM usertable WHERE username='${user}'`, (err, data)=>{
          if(err){
            res.write('{"err": 1, "msg": "database error"}');
            res.end();
          }else if(data.length>0){
            res.write('{"err": 1, "msg": "this username exsits"}');
            res.end();
          }else{
            db.query(`INSERT INTO usertable (ID,username,password) VALUES(0,'${user}','${md5_2(pass)}')`, (err, data)=>{
              if(err){
                res.write('{"err": 1, "msg": "database error"}');
                res.end();
              }else{
                res.write('{"err": 0, "msg": "success"}');
                res.end();
              }
            });
          }
        });
      }
      break;
    case '/login':
      //校验
      if(!user){
        res.write('{"err": 1, "msg": "username can\'t be null"}');
        res.end();
      }else if(!pass){
        res.write('{"err": 1, "msg": "password can\'t be null"}');
        res.end();
      }else if(!/^\w{4,16}$/.test(user)){
        res.write('{"err": 1, "msg": "username is invaild"}');
        res.end();
      }else if(/['|"]/.test(pass)){
        res.write('{"err": 1, "msg": "password is invaild"}');
        res.end();
      }else{
        db.query(`SELECT * FROM usertable WHERE username='${user}'`, (err, data)=>{
          if(err){
            res.write('{"err": 1, "msg": "database error"}');
            res.end();
          }else if(data.length==0){
            res.write('{"err": 1, "msg": "no this user"}');
            res.end();
          }else if(data[0].password!=md5_2(pass)){
            res.write('{"err": 1, "msg": "username or password is incorrect"}');
            res.end();
          }else{
            res.write('{"err": 0, "msg": "success"}');
            res.end();
          }
        });
      }
      break;
    default:
      //缓存      TODO
      //静态文件
      let rs=fs.createReadStream(`www${pathname}`);
      let gz=zlib.createGzip();

      res.setHeader('content-encoding', 'gzip');
      rs.pipe(gz).pipe(res);

      rs.on('error', err=>{
        res.writeHeader(404);
        res.write('Not Found');
        res.end();
      });
  }
  });
});
server.listen(8081);

方法二：前台不改变提交的数据格式，后台解析

1、因为前台不引用模块，则提交到后台的数据就是json格式，后台接说到不能直接解构，这里我还是利用querystring.parse对数据进行解析，但是在解析数据前，首先得对数据进行处理。

2、我们要了解querystring.parse的用法，根据官方文档

对于user=AAAA&pass=123456 会解析成 { user: 'AAAA', pass: '123456' }。我们需要的就是{ user: 'AAAA', pass: '123456' }这种格式的数据。

3、我们先观察后台接收的数据转成字符串形式为：{"user":"AAAA","pass":"123456"}，不能直接对其进行解析。为了得到类似user=AAAA&pass=123456 的数据形式，我们得去除{}和"，利用replace()去除。去除后得到 user:AAAA,pass:123456，与user=AAAA&pass=123456进行对比发现，这里只是将=换成：、&换成，。到这里问题就变的非常简单，利用querystring.parse相应参数设置，就可以对数据进行解析。

后台代码：

const http=require('http');
const mysql=require('mysql');
const fs=require('fs');
const url=require('url');
const zlib=require('zlib');
const crypto=require('crypto');
const querystring=require('querystring');

const _key='sadfslekrtuew5iutoselgdtjiypoydse4ufhs.edtyo;s8te4arfeliawkfhtsie5tlfia;sefdshroiupeoutwyeli5gurse;ihf';

function md5(str){
  let obj=crypto.createHash('md5');

  obj.update(str);

  return obj.digest('hex');
}

function md5_2(str){
  return md5(md5(str)+_key);
}

let db=mysql.createPool({host: 'localhost', port: 3306, user: 'root', password: '', database: 'a'});

let server=http.createServer((req, res)=>{
 
  
  res.writeHead(200,{
    'Access-Control-Allow-Origin': '*',
	'Access-Control-Allow-Headers':'content-type'
    });
	
  let {pathname, query}=url.parse(req.url, true);
 
  console.log('1',query);
  let str='';
  req.on('data',data=>{
	  console.log('str0:',str);
	  str+=data;
	 
  });
  console.log('str2:',str); 
  req.on('end', ()=>{
	//去除{}、"
	str=str.replace('{','');
	str=str.replace('}','');
	str=str.replace(/"/g,'');
	console.log('str3:',str);
	//解析数据
    let post=querystring.parse(str,',',':');
	
	let {user, pass}=str?post:query;
	console.log(user);
  switch(pathname){
    //接口
    case '/reg':
      //校验
      if(!user){
        res.write('{"err": 1, "msg": "username can\'t be null"}');
        res.end();
      }else if(!pass){
        res.write('{"err": 1, "msg": "password can\'t be null"}');
        res.end();
      }else if(!/^\w{4,16}$/.test(user)){
        res.write('{"err": 1, "msg": "username is invaild"}');
        res.end();
      }else if(/['|"]/.test(pass)){
        res.write('{"err": 1, "msg": "password is invaild"}');
        res.end();
      }else{
        db.query(`SELECT * FROM usertable WHERE username='${user}'`, (err, data)=>{
          if(err){
            res.write('{"err": 1, "msg": "database error"}');
            res.end();
          }else if(data.length>0){
            res.write('{"err": 1, "msg": "this username exsits"}');
            res.end();
          }else{
            db.query(`INSERT INTO usertable (ID,username,password) VALUES(0,'${user}','${md5_2(pass)}')`, (err, data)=>{
              if(err){
                res.write('{"err": 1, "msg": "database error"}');
                res.end();
              }else{
                res.write('{"err": 0, "msg": "success"}');
                res.end();
              }
            });
          }
        });
      }
      break;
    case '/login':
      //校验
      if(!user){
        res.write('{"err": 1, "msg": "username can\'t be null"}');
        res.end();
      }else if(!pass){
        res.write('{"err": 1, "msg": "password can\'t be null"}');
        res.end();
      }else if(!/^\w{4,16}$/.test(user)){
        res.write('{"err": 1, "msg": "username is invaild"}');
        res.end();
      }else if(/['|"]/.test(pass)){
        res.write('{"err": 1, "msg": "password is invaild"}');
        res.end();
      }else{
        db.query(`SELECT * FROM usertable WHERE username='${user}'`, (err, data)=>{
          if(err){
            res.write('{"err": 1, "msg": "database error"}');
            res.end();
          }else if(data.length==0){
            res.write('{"err": 1, "msg": "no this user"}');
            res.end();
          }else if(data[0].password!=md5_2(pass)){
            res.write('{"err": 1, "msg": "username or password is incorrect"}');
            res.end();
          }else{
            res.write('{"err": 0, "msg": "success"}');
            res.end();
          }
        });
      }
      break;
    default:
      //缓存      TODO
      //静态文件
      let rs=fs.createReadStream(`www${pathname}`);
      let gz=zlib.createGzip();

      res.setHeader('content-encoding', 'gzip');
      rs.pipe(gz).pipe(res);

      rs.on('error', err=>{
        res.writeHeader(404);
        res.write('Not Found');
        res.end();
      });
  }
  });
});
server.listen(8081);

这里的前台就不引用qs模块了。

数据库表格：

到此为止，这就是我解决问题的两种方法。当然还有别的方法，只是目前我没有掌握。在编写代码的过程中，可以通过打日志的方式发现很多问题，同时也是通过打日志的方式解决问题。学习的道路还很漫长，希望可以越来越好。

xue小白
关注
专栏目录
详解vue axios用post提交的数据格式
01-19
但之前做着玩用的都是get请求，现在我自己搭博客时使用了post方法，结果发现后台（node.js）完全拿不到前台传来的参数。后来进过一番探索，终于发现问题所在。 post提交数据的四种编码方式 1.application/x-...
node 通过axios发送post请求（FormData）
最新发布
徐同保的专栏
10-16 2146
node 通过axios发送post请求（FormData）
axios发送post请求数据和node处理post请求数据
前端小攻城狮的博客
06-07 1165
在学习node，处理post数据的时候，用postman是可以传过去的，用axios却传过去的却是空数据。后来发现只要JSON.stringify转换一下你的数据就可以了。同时后端接受数据也要JSON.stringify一下。 data: { title: "标题11", content: "标题112" }, axios({ url: "/api/blog/update", method: "post", data: JSON.stringify(this.data), header: { "Con
Nodejs axios模块使用整理
天马3798
10-02 7493
支持PromoisAPI，支持拦截请求和响应，支持转换请求和响应数据，支持取消请求，支持自动转换JSON数据，支持客户端防御XSRF。Axios是一个基于Promise网络请求库，可以用于node.js 环境和浏览器环境使用。在node.js框架中封装http模块，在浏览器中分装XMLHttpRequests对象。这些属性都不必在配置中指定。类似$.ajax()1.nodejs 使用。1. 发送get请求。2.发送多个并发请求。
vue使用axios发送post请求携带json body参数，后端使用@RequestBody进行接收
见证自己学习,成长的记录
02-17 2万+
最近在做自己项目中，做一个非常简单的新增用户场景，但是使用原生axios发送post请求的时候，还是踩了不少坑的。唉，说多了都是泪，小小一个新增业务，在自己前后端一起开发的时候，硬是搞了好久。下面就把问题总结分享下，防止后人再踩坑。首先先看下我的接口定义吧。其实就是一个很简单的新增，参数也不复杂。
vue-axios-post方式传递对象至后台
热门推荐
weixin_43748216的博客
11-28 2万+
1.对象参数类型JSON化： data:JSON.parse(JSON.stringify(object)), 2.头部信息headers： &amp;quot;Content-Type&amp;quot;: &amp;quot;application/json; charset=UTF-8&amp;quot; 3.service中请求方式写为POST 4.后台controller中获得参数方式：@RequestBody Strin...
解决vue中post方式提交数据后台无法接收的问题
10-18
在Vue.js应用中，POST方式提交数据到后台时，可能会遇到数据无法被后台正确接收的问题。这通常是由于数据格式不正确或与后端接口的预期格式不匹配导致的。本文将详细探讨这个问题，并提供解决方案。 首先，理解POST...
axios post提交formdata的实例
08-27
既然我们知道 Axios.post 方法默认使用 `application/json` 格式编码数据，那么解决方案就有两种，一是后台改变接收参数的方法，另一种则是将 Axios.post 方法的编码格式修改为 `application/x-www-form-urlencoded`...
Vue中Axios从远程/后台读取数据
10-17
本文主要介绍了如何在Vue.js中利用Axios库从远程后台拉取数据，涉及的关键知识点包括Axios的安装、引入、使用，以及数据获取中的常见问题处理等。 知识点一：Axios安装与引入 首先，要使用Axios从Vue项目中请求后端...
Vue使用axios用post方式将表单中的数据以json格式提交给后端接收
inspireT的博客
03-29 7335
Vue使用axios用post方式将表单中的数据以json格式提交给后端接收
axios用post提交数据到后台的格式和问题处理
wushen的博客
04-30 2487
文章目录post提交数据的四种编码方式1.application/x-www-form-urlencoded2.multipart/form-data3.application/json4.text/xml解决方法 post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式，一般的表单提交默认以此方式提交。大部分服务器语...
最近在用node写后台，前台用axios请求数据。学到一些东西和踩了一些坑，整理一下--- 主要针对POST请求
weixin_44326194的博客
02-11 963
最近在用node写后台，前台用axios请求数据。学到一些东西和踩了一些坑，整理一下--- 主要针对POST请求问题汇总1、post请求如果单纯只有一个url和数据（普通对象数据），那么大概率会请求失败；2、post请求成功后，node后台无法正常获得入参；3、axios十分有用的常用配置，拦截器、入参格式化、返回数据格式化；4、总结 问题汇总 最近遇到的问题大概有以下几个（以后可能会补充）： post请求如果单纯只有一个url和数据（普通对象数据），那么大概率会请求失败； post请求成功后，node后
【常用代码08】封装axios的get和post请求方法，在nodejs中使用
qq_51055690的博客
10-03 3002
axios的二次封装，搭配vue.config.js一起使用
axios的Get和Post方法封装及Node后端接收数据
weixin_30672295的博客
04-23 426
最近有做一个Vue的小项目，其中用到了尤大大推荐使用的axios，但是使用的过程中遇到了各种各样的问题，所以这次也是将一些心得分享出来。 安装的流程我就简单说一下下吧，在一个自己新建的文件夹中命令行中，输入以下命令，当然这边是默认大家已经安装了node.js npm install vue --save对Vue的安装 vue init webpack studentchoose初始化...
axios 发 post 请求，后端接收不到参数的解决方案
song854601134的博客
03-17 1万+
项目总结： axios 发 post 请求，后端接收不到参数的解决方案 问题场景 axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: 'post', url: '/api/lockServer/search', data: { username, pwd } }) 后台说没有接收到你的传参。 这就有点奇怪了，我看了一下浏览器的
axios调用接口时用post 提交数据，后台获取不到提交的数据解决方法
The One Who's at the Front
09-02 1446
调用接口常用的方式是axios,但在调的过程中会遇到很多问题，后台获取不到提交的数据\color{red}{后台获取不到提交的数据}后台获取不到提交的数据是其中之一。 问题\color{blue}{问题}问题 post请求传参时，数据已经提交，打开开发者工具，点击 network 里面的确有数据已经传过去了，但后台那里打印时没有获取到传过去的参数。所以解决方法如下： 解决方案\color{blue...
前端使用axios发送post请求json数据到后端SpringBoot，数据多出一个 等号 “=“
qq_52595269的博客
11-25 2061
前端传给后端的数据后面多了个“=“
node端通过axios携带cookie发送post跨域请求
weixin_52314006的博客
11-30 1330
【代码】node端通过axios携带cookie发送post跨域请求。
axios向后台传值
weixin_34250434的博客
07-02 2205
//前端使用GET，通过url的拼接向后台传值 this.$axios.get(this.url,{ params: { curPage: 1 } }).then((res) => { this.table_data = res.data.results; this.data_count = res.data.dataCount; }) ...
怎么用axios.post方法传递到node后台中的req.file参数中
04-24
您可以创建一个FormData对象并将文件添加到其中，然后将其作为第二个参数传递给axios.post方法。在Node后端中，您可以使用multer库解析File对象。在请求的req参数上使用multer.single()中间件，并在其中包含文件字段...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值