文章目录
- post提交数据的四种编码方式
- 1.application/x-www-form-urlencoded
- 2.multipart/form-data
- 3.application/json
- 4.text/xml
- 解决方法
post提交数据的四种编码方式
1.application/x-www-form-urlencoded
这应该是最常见的post编码方式，一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中，可以用$_POST[“key”]的方式获取到key的值，在node中我们可以使用querystring中间件对参数进行分离
app.post("/server",function(req,res){
req.on("data",function(data){
let key=querystring.parse(decodeURIComponent(data)).key;
console.log("querystring:"+key)
});
});2.multipart/form-data
这也是一种比较常见的post数据格式，我们用表单上传文件时，必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。使用这种编码格式时发送到后台的数据长得像这样子
不同字段以--boundary开始，接着是内容描述信息，最后是字段具体内容。如果传输的是文件，还要包含文件名和文件类型信息
3.application/json
axios默认提交就是使用这种格式。如果使用这种编码方式，那么传递到后台的将是序列化后的json字符串。我们可以将application/json与application/x-www-form-urlencoded发送的数据进行比较
首先是application/json：
接着是application/x-www-form-urlencoded：
这里可以明显看出application/x-www-form-urlencoded上传到后台的数据是以key-value形式进行组织的，而application/json则直接是个json字符串。如果在处理application/json时后台还是采用对付application/x-www-form-urlencoded的方式将会产生问题。例如后台node.js依然采用之前对付application/x-www-form-urlencoded的方法，那么querystring.parse(decodeURIComponent(data))之后得到的数据是这样子的
这个时候再querystring.parse(decodeURIComponent(data)).key只能获取到undefined
4.text/xml
剩下的一种编码格式是text/xml，这种格式用的少
解决方法
既然我们知道axios post方法默认使用application/json格式编码数据，那么解决方案就有两种，一是后台改变接收参数的方法，另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded，这样就不需要后台做什么修改了。
第一种解决方法
vue组件中，axios发送post请求的代码如下
this.$axios({
method:"post",
url:"/api/haveUser",
data:{
name:this.name,
password:this.password
}
}).then((res)=>{
console.log(res.data);
})此时控制台Network Headers里面的信息是这样子的
后台接收数据需要依赖body-parser中间件，我们事先装好，接着在后台代码中引用body-parser
这张截图中，发挥作用的代码仅仅是const bodyParser=require("body-parser"); 接下来在路由中使用body-parser
app.post("/api/haveUser",bodyParser.json(),function(req,res){
console.log(req.body);
let haveUser=require("../api/server/user.js");
haveUser(req.body.name,req.body.password,res);
});这时，当前台发送post请求之后，后台控制台中就会打印出req.body
这时，通过req.body.name或者req.body.password就能拿到对应的值。
这种方法比较简单，也不需要前台做过多修改，推荐使用这种方法。
第二种解决方法，具体操作如下
前端
this.$axios({
method:"post",
url:"/api/haveUser",
headers:{
'Content-type': 'application/x-www-form-urlencoded'
},
data:{
name:this.name,
password:this.password
},
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
}).then((res)=>{
console.log(res.data);
})其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前，修改请求数据。这样操作之后，后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: 'w', password: 'w' }的对象。后台代码如下
app.post("/api/haveUser",function(req,res){
let haveUser=require("../api/server/user.js");
req.on("data",function(data){
let name=querystring.parse(decodeURIComponent(data)).name;
let password=querystring.parse(decodeURIComponent(data)).password;
console.log(name,password)
haveUser(name,password,res);
});
});这种方法明显就要比第一种麻烦一点，但不需要后台做过多处理。所以具体操作还是得根据实际情况决定。
案例 :
首先 我们要清楚axios post提交方式默认数据提交格式为application/json ,如下：
在前台写出相应post提交数据的代码，
然后打日志，可以在浏览器控制台，很清楚的观察出提交的数据格式：
针对这种情况，我写了两种方法。
方法一：利用vue qs模块
1、首先是在cmd找到项目根目录，输入npm install qs，然后在main.js中导入qs模块，并交给vue使用
import qs from 'qs'
Vue.prototype.$qs =qs2、使用qs，对data数据进行格式转换,代码如下：
method:'post',
url:'http://localhost:8081/login',
data:this.$qs.stringify ( {user: this.user,pass: this.pwd})然后打日志，在浏览器控制台观察：
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>后台代码(node 服务器)：
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
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模块了。
数据库表格：
