vue中axios发送post请求

axiox的post参数提交

 axios.post默认是application/json方式提交数据，不是表单
 ajax中的post默认是表单的方式提交
 psot表单方式提交  application/x-www-form-urlencoded 采用&拼接

下面这个代码是修改axios post的提交方式为表单的方式

axios.post方法 默认发送数据格式
            application/json的方式发送的
            {"name":"david","age":30}

            axion({
              url:"地址",
              method:"post",
              data:{
                  name:"david",
                  age:30
              },
              transformRequest: [function (data) {
                  // Do whatever you want to transform the data
                  let ret = ''
                  for (let it in data) {
                    // 如果要发送中文 编码 
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                  }
                  return ret
                }],
                headers: {
                  'Content-Type':'application/x-www-form-urlencoded'
                }
            })

            发送的数据就是跟表单一样
            application/x-www-form-urlencoded 
            name=david&age=30

在node中 处理

// application/json
// 提交复杂的大数据
// 订单数据 购物车的数据提交 比较复杂
// JSON.parse(params);
//console.log(params);
// 表单的固定格式
// applicaton/x-www-form-urlencoded
// 提交小的数据 用户信息
//var querystring = require("querystring");
//querystring.parse(params);

axios.get /axios.post 案例

<template>
  <div id="app">
    ![](./assets/logo.png)
    <h1>用户登录</h1>
    <form>
      <input type="text" id="name" placeholder="用户名"><br>
      <input type="password" id="password" placeholder="密码"><br>
      <input type="submit" @click.prevent="loginUser" value="提交">
    </form>
    <hr>
    <h2>用户注册</h2>
    <user-info></user-info>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    "user-info":{
       data(){
          return {
             name:"",
             password:"",
             email:""
          }
       },
       template:`
           <form >
          <input type="text" v-model="name" placeholder="用户名"><br>
          <input type="password" v-model="password" placeholder="密码"><br>
          <input type="email" v-model="email" placeholder="邮箱"><br>
          <input type="submit" @click.prevent="registUser" value="提交">
        </form>`,
        methods:{
          registUser(){
            //注册用户信息
            var self = this;
            // 默认是applicatino/json方式提交数据 不是表单
            // 下面这个代码是修改post的提交方式为表单的方式
            /*
            axios.post方法 默认发送数据格式
            application/json的方式发送的
            {"name":"david","age":30}

            axion({
              url:"地址",
              method:"post",
              data:{
                  name:"david",
                  age:30
              },
              transformRequest: [function (data) {
                  // Do whatever you want to transform the data
                  let ret = ''
                  for (let it in data) {
                    // 如果要发送中文 编码 
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                  }
                  return ret
                }],
                headers: {
                  'Content-Type':'application/x-www-form-urlencoded'
                }
            })

            发送的数据就是跟表单一样
            application/x-www-form-urlencoded 
            name=david&age=30
            */
            axios(
              {
                url:'http://localhost:8000/myRegist', 
                method:"post",
                data:{
                  name:self.name,
                  password:self.password,
                  email:self.email
                },
                //将JSON对象 转 键=值&键=值
                /*
                {
                  name:"david",
                  age:30
                }
                name=小李&age=30
                // 在发送数据之前 将对象转键值对
                */
                transformRequest: [function (data) {
                  // Do whatever you want to transform the data
                  let ret = ''
                  for (let it in data) {
                    // 如果要发送中文 编码 
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                  }
                  return ret
                }],
                headers: {
                  'Content-Type':'application/x-www-form-urlencoded'
                }
            })
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
          }
        }
    }
  },
  methods:{
    loginUser(){
      // 发送数据给服务器
      //http://localhost:8000/myLogin?name=david&password=123
      /*
      localhost/:1 XMLHttpRequest cannot load http://localhost:8000/myLogin?name=wang&password=dfasf. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
      */
      console.log("发送数据");
      var name = document.getElementById("name").value;
      var password = document.getElementById("password").value;
      var path = "http://192.168.104.31:8000/myLogin";
      axios.get(path,{
        params:{
          name,
          password
        }
      }).then(function(data){
        // 验证成功和失败 怎么知道成功了还是失败了
        console.log(data);
        if(data.data.code==0){
          alert("登录成功");
        }else {
          alert("登录失败");
        }
      },function(err) {
        console.log(err);
      }).catch(function(err){
        console.log("捕获错误");
      })
    }
    

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>