注册功能axios 与后台接口的对接

axios 与后台接口的对接

 用的是前端框架vue，贴一段页面代码
 <table >
    <tr>
        <td >手机号：</td>
        <td ><input type="text" name="phone" v-model="phone"   placeholder="请输入手机号"></td>
    </tr>
</table>
在template中input里v-model一个双向绑定数据 phone 。在vue中this.phone 获取input的值，
再贴入我script中的代码

import axios from 'axios'
import AppHead from '@/components/public/Head'
import AppFoot from '@/components/public/foot'
export default {
  name: 'rigist_',
  data(){
 return{  
  phone:'',
  password:'',
  passwordC:''
  }
 },
   components: {
    'app-head': AppHead,
    'app-foot':AppFoot
  },
 methods:{
 //验证用户输入信息并且向后台传参
 rigist(){
	 if(!this.phone|| !this.password || !this.passwordC) {
				alert("您有未填项，不能注册")
                   
                } else if(this.password != this.passwordC) {
                    alert('两次输入的密码不一致')
                } else {	
             var rigistDate=this.$qs.stringify({
              userPhoneNumber: this.phone,
                userPassword: this.password 
                });				
          this.$axios.post(
		  //相当于url？userPhoneNumber=1&userPassword=1
              'http://192.168.0.109:8080/farmer/user/register#/',rigistDate,
             {    
   headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}   
   }).then(function(response) {            
              console.log(rigistDate.userPassword)
        
              this.$router.push({path:'/home'})
            })
            .catch(() => {
              this.loading = false
            }) 
                   		
                }	          
   }
}
}

script中使用了一个qs类库
功能是序列化。假设我要提交的数据如下
var a = {name:’hehe’,age:10};
qs.stringify序列化结果如下
name=hehe&age=10

第一次与后台交互各种报错，403之类的总之报的最多的是传输媒体类型错误，与后台的数据类型不匹配，因为我注册得传输post类型所以在前面var一个rigistDate里封装了phone和password

 var rigistDate=this.$qs.stringify({
              userPhoneNumber: this.phone,
                userPassword: this.password 
                });	

接下来就要做的是从后台返回的massage 提示注册成功 失败然后跳转其他页面