前后端分离之Vue(三)爬过得那些坑
爬過得那些坑
前言:在整個(gè)Vue的過程中,遇到了不少坑。查找不同的資料,把這些坑給填了,記錄下這些坑,以及解決辦法。
一、Http請(qǐng)求的那些坑
1.不支持http請(qǐng)求
表現(xiàn)為:程序啟動(dòng)正常,點(diǎn)擊按妞不跳轉(zhuǎn),后臺(tái)無響應(yīng),瀏覽器調(diào)試出現(xiàn)
Uncaught TypeError: Cannot read property 'post' of undefined解決辦法:添加vue-resource支持,在main.js添加
import VueResource from 'vue-resource' Vue.use(VueResource);2.post請(qǐng)求,后臺(tái)接收參數(shù)為null
表現(xiàn)為:后臺(tái)響應(yīng)但是參數(shù)為null,正確的登陸失效,調(diào)試時(shí),參數(shù)為from object
解決辦法:http請(qǐng)求中,添加
{emulateJSON:true}全部的Http請(qǐng)求部分代碼為
_this.$http.post('http://localhost:8080/person/login', { username: _this.username, password: _this.password } ,{emulateJSON:true} ) .then(function (response) { var errorcode = response.data.code; if (errorcode == "200") { _this.$router.push( { path: '/HelloWorld', query: { user: response.data.data, } }); } else { _this.$router.push({ path: '/Fail' }); } }) .catch(function (error) { console.log(error); });3、正確處理后,跳轉(zhuǎn)到空頁面
原因:路由的url配置有問題,注意組件的引用的對(duì)應(yīng)關(guān)系以及path的路徑問題
4.Request請(qǐng)求變成Options
解決辦法:設(shè)置頭格式
http: { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} },二、Vue視圖之間的跳轉(zhuǎn)實(shí)現(xiàn)
1.引用router組件
2.在router.js添加對(duì)應(yīng)的view,以及相對(duì)應(yīng)的path的配置
3.this.$router.push({path:'url'})
4.可參照上文的Http請(qǐng)求部分代碼
三、Vue跳轉(zhuǎn)傳遞參數(shù)
采用編程式的實(shí)現(xiàn)方式
傳遞參數(shù)
_this.$router.push( { path: '/HelloWorld',//跳轉(zhuǎn)的路徑 query: {//query 代表傳遞參數(shù) user: response.data.data,//參數(shù)名key,以及對(duì)應(yīng)的value } });接收參數(shù)
this.$route.query.useruser代表的參數(shù)名,不但可以傳遞單個(gè)參數(shù),也可以傳遞對(duì)應(yīng),解析的方式user.屬性
四、實(shí)例,登陸頁面的Vue代碼
<template> <div class="login"> {{ message }}<br/> <input v-model="username" placeholder="用戶名"><br/> <input v-model="password" placeholder="密碼"><br/> <button v-on:click="login">登陸 </button> </div> </template> <script> export default { name: "login", data() { return { message: 'Vue 登陸頁面', username: '', password: '' } }, http: { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} }, methods: { login: function () { var _this = this; console.log(_this.username+_this.password); _this.$http.post('http://localhost:8080/person/login', { username: _this.username, password: _this.password } ,{emulateJSON:true} ) .then(function (response) { var errorcode = response.data.code; if (errorcode == "200") { _this.$router.push( { path: '/HelloWorld', query: { user: response.data.data, } }); } else { _this.$router.push({ path: '/Fail' }); } }) .catch(function (error) { console.log(error); }); } } } </script> <style scoped> </style> 本文作者:shenbug 本文發(fā)布時(shí)間:2018年03月13日 本文來自云棲社區(qū)合作伙伴CSDN,了解相關(guān)信息可以關(guān)注csdn.net網(wǎng)站。總結(jié)
以上是生活随笔為你收集整理的前后端分离之Vue(三)爬过得那些坑的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: exportfs命令、NFS客户端问题、
- 下一篇: 介绍几个移动web app开发框架