解决vue 使用axios发送post请求表单提交时参数传不进去问题

1.qs插件介绍

简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

2.qs安装

在项目中使用命令行工具输入：npm install qs

安装完成后在需要用到的组件中：import qs from 'qs'

1. qs.parse()和qs.stringify()区别:

qs.parse()是将URL解析成对象的形式

qs.stringify()是将对象序列化成URL的形式，以&进行拼接

解决我遇到的问题我使用了qs.stringify()

4.axios POST请求介绍：

axios请求默认的是application/json：这种格式 {name:"小明",age:20}

但是有时候后端需要的是表单提交方式，（post请求）post表单请求提交时，使用的是：
content-type就是application/x-www-form-urlencoded，
所以需要将ajax发送请求的application/json改为application/x-www-form-urlencoded
那么content-type就是application/x-www-form-urlencoded 
使用qs进行序列化传输的样式是formdata格式的参数 这样的格式：name=xxx&age=xxx

 5.登陆案例

  async loginClick(){
          this.$refs.loginFormRef.validate(async valid=>{
                 if(!valid){
                     return
                 }
                // 深拷贝表单对象
                const form=JSON.parse(JSON.stringify(this.loginForm))
                //  获取公钥
                const res=await getPublicKey()
                //  创建加密对象实例
                let jsencrypt=new JSEncrypt()
                //  设置公钥
                jsencrypt.setPublicKey(res.data)
                form.publicKey=res.data
                // 对密码加密
                form.password = jsencrypt.encrypt(form.password)
                try {
                    // 将form参数序列化
                    const res=await login(qs.stringify(form))
                    console.log(form);
                    this.getCodeData()
                } catch (error) {
                    this.$message.error(error.message)
                    this.getCodeData()
                }
          })
      }
  }