Vue前台向后台传递数据报错------Required String parameter 'username' is not present

vue登录界面---太简单

<template>
  <div class="login">
    <input placeholder="请输入用户名" v-model="info.username">                   
    <input placeholder="请输入密码" v-model="info.password">    
    <button @click='submit()'>登录</button>        
  </div>  
</template>

<script>
import auth from '../../auth/auth'

export default {
        data () {
            return {
                info:{
                    username: 'zhangsan',
                    password: '123456'
                }
                
            };
        },
        methods: {           
            submit() {
                console.log(this.info);
                 var info = {
                     username: this.info.username,
                     password: this.info.password
                 }
                 auth.login(this,info)
             }           
        }
    }; 
</script>


<style >
</style>

  anth.js

const SERVER_URL = 'http://localhost:8081'
const LOGIN_URL = SERVER_URL+'/login'

export default{
    data:{
        authenticated:false
    },
    
    login(context,info){
        context.$http.post(LOGIN_URL,info).then((data)=>{
            //alert('success')
            console.log(data.bodyText)
            localStorage.setItem('token',data.bodyText);
            this.authenticated = true
            //跳到home页
            context.$router.push('userInfo')
        },(err)=>{
           // alert('loser')
            console.log(err+","+err.body.message)
            context.error = err.body.message
        })
    },
    getAuthHeader(){
        return {
            'Authorization':'Bearer '+localStorage.getItem('token')
        }
    },
    checkAuth(){
        var token = localStorage.getItem('token')
        if(token){
            this.authenticated = true
        }else{
            this.authenticated = false
        }
    }
}

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import router from './router'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'

import Login from './views/login/login.vue'
import UserInfo from './views/login/user_info.vue'
import auth from './auth/auth'


Vue.config.productionTip = false

Vue.use(VueResource);
Vue.use(VueRouter);

auth.checkAuth()

const routes= [
    {
        path:'/',redirect:'/login'
    },
    {
        path:'/login',component:Login
    },
    {
        path:'/userInfo',component:UserInfo
    }
]

const router = new VueRouter({
    routes
})

//这两个需要设置,不然前端向后台不能传递数据 Vue.http.options.emulateJSON
= true Vue.http.options.emulateHTTP = true new Vue({ router, render: h => h(App) }).$mount('#app')

注意:这里在main.js里面添加了两行

Vue.http.options.emulateJSON = true
Vue.http.options.emulateHTTP = true

加上这两行,表示JSON和HTTP的数据格式可以传给后台。

 不然报错,我之前没有这两行都是报这样的错

 

posted @ 2018-07-02 11:26  有书如玉  阅读(9487)  评论(0编辑  收藏  举报