axios onDownloadProgress 后端需要传什么 axios将数据从前端传到后端

最近用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模块了。

数据库表格：

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