zoukankan      html  css  js  c++  java
  • 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的数据格式可以传给后台。

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

  • 相关阅读:
    面向对象知识点2
    面向对象知识点1
    面向对象知识点
    常用模块
    模块与包
    迭代器相关知识
    jquery.jqprint-0.3.js打印功能 以及页眉页脚设置显示与否
    js和layerjs配合实现的拖拽表格列
    iframe中跳转页面的区别
    select3搜索下拉树
  • 原文地址:https://www.cnblogs.com/shuzhongruyu/p/9252996.html
Copyright © 2011-2022 走看看