使用vue-resource請求接口很是方便,在使用前需安裝vue-resource依賴並在入口文件main.js中聲明。
附github地址php
本實例只有簡單的兩個模塊:登陸和註冊,主要演示如何用vue-resource請求接口以及後期邏輯書寫。各個功能以下所示:
登陸模塊
登陸-用戶不存在vue
登陸-密碼錯誤git
登陸-成功github
註銷登陸vue-router
註冊模塊vue-cli
在建立項目以前,咱們先理一下整個項目的功能模塊。
登陸模塊
1.用戶輸入用戶名及密碼,調用接口
1.1用戶名未找到,提示用戶「用戶名不存在」
1.2用戶名找到,但密碼不匹配,提示用戶「密碼輸入錯誤」
1.3用戶名和密碼都匹配,登陸成功並跳轉到主頁,同時將用戶名存爲cookie
2.加載主頁獲取cookie
2.1cookie不存在,跳轉到登陸頁
2.2cookie存在,顯示用戶名
2.3點擊註銷,刪除cookie並跳轉到登陸頁
3.管理員登陸
3.1輸入管理員用戶名及密碼,跳轉到管理頁
註冊模塊
1.用戶輸入用戶名及密碼,調用接口
1.1註冊成功直接跳轉到登陸頁數據庫
項目總體文件結構以下
cookie.js爲公共方法,用於cookie的存儲、獲取及刪除
home.vue爲用戶登陸成功以後的主頁
login.vue爲登陸註冊頁
main.vue爲後臺管理頁npm
用vue-cli建立一個新項目,建立好後,由於咱們要用到接口請求,因此第一步先安裝vue-resource,打開cmd進入文件所在目錄,輸入npm install vue-resource,安裝完成後在入口文件main.js中引入api
import VueResource from 'vue-resource' Vue.use(VueResource)
在src中新建views/login/login.vue瀏覽器
<template> <div> <div class="login-wrap" v-show="showLogin"> <h3>登陸</h3> <p v-show="showTishi">{{tishi}}</p> <input type="text" placeholder="請輸入用戶名" v-model="username"> <input type="password" placeholder="請輸入密碼" v-model="password"> <button v-on:click="login">登陸</button> <span v-on:click="ToRegister">沒有帳號?立刻註冊</span> </div> <div class="register-wrap" v-show="showRegister"> <h3>註冊</h3> <p v-show="showTishi">{{tishi}}</p> <input type="text" placeholder="請輸入用戶名" v-model="newUsername"> <input type="password" placeholder="請輸入密碼" v-model="newPassword"> <button v-on:click="register">註冊</button> <span v-on:click="ToLogin">已有帳號?立刻登陸</span> </div> </div> </template> <style> .login-wrap{text-align:center;} input{display:block; width:250px; height:40px; line-height:40px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;} p{color:red;} button{display:block; width:250px; height:40px; line-height: 40px; margin:0 auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;} span{cursor:pointer;} span:hover{color:#41b883;} </style> <script> export default{ data(){ return{ showLogin: true, showRegister: false, showTishi: false, tishi: '', username: '', password: '', newUsername: '', newPassword: '' } } } </script>
編輯/src/router/router.js
import Vue from 'vue' import Router from 'vue-router' /*引入頁面*/ import Login from '@/views/login/login.vue' import Main from '@/views/main/main.vue' import Home from '@/views/home/home.vue' Vue.use(Router) /*配置路由*/ export default new Router({ routes: [ { path: '/', name: 'Login', component: Login }, { path: '/main', name: 'Main', component: Main }, { path: '/home', name: 'Home', component: Home } ] })
在cmd輸入npm run dev啓動項目,在瀏覽器看效果
點擊登陸按鈕,觸發login事件,登陸成功會保存cookie,因此咱們先把公共方法寫好。新建src/assets/js/cookie.js
/*用export把方法暴露出來*/ /*設置cookie*/ export function setCookie(c_name,value,expire) { var date=new Date() date.setSeconds(date.getSeconds()+expire) document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString() console.log(document.cookie) } /*獲取cookie*/ export function getCookie(c_name){ if (document.cookie.length>0){ let c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1){ c_start=c_start + c_name.length+1 let c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" } /*刪除cookie*/ export function delCookie(c_name){ setCookie(c_name, "", -1) }
login.vue頁面先引用該公共方法
<script> import {setCookie,getCookie} from '../../assets/js/cookie.js' export default{ mounted(){ /*頁面掛載獲取cookie,若是存在username的cookie,則跳轉到主頁,不需登陸*/ if(getCookie('username')){ this.$router.push('/home') } }, methods:{ login(){ if(this.username == "" || this.password == ""){ alert("請輸入用戶名或密碼") }else{ let data = {'username':this.username,'password':this.password} /*接口請求*/ this.$http.post('http://localhost/vueapi/index.php/Home/user/login',data).then((res)=>{ console.log(res) /*接口的傳值是(-1,該用戶不存在),(0,密碼錯誤),同時還會檢測管理員帳號的值*/ if(res.data == -1){ this.tishi = "該用戶不存在" this.showTishi = true }else if(res.data == 0){ this.tishi = "密碼輸入錯誤" this.showTishi = true }else if(res.data == 'admin'){ /*路由跳轉this.$router.push*/ this.$router.push('/main') }else{ this.tishi = "登陸成功" this.showTishi = true setCookie('username',this.username,1000*60) setTimeout(function(){ this.$router.push('/home') }.bind(this),1000) } }) } } } } </script>
同時新建登陸成功跳轉到的主頁 src/views/home/home.vue
<template> <div> <h3>歡迎 {{name}}</h3> <a href="#" @click="quit">註銷登陸</a> </div> </template> <script> /*引入公共方法*/ import { setCookie,getCookie,delCookie } from '../../assets/js/cookie.js' export default{ data(){ return{ name: '' } }, mounted(){ /*頁面掛載獲取保存的cookie值,渲染到頁面上*/ let uname = getCookie('username') this.name = uname /*若是cookie不存在,則跳轉到登陸頁*/ if(uname == ""){ this.$router.push('/') } }, methods:{ quit(){ /*刪除cookie*/ delCookie('username') } } } </script>
如今咱們來檢測一下,接口是我用php寫在本地上的,服務器環境用的xampp,咱們先打開xampp的phpMyadmin數據庫管理頁看一下咱們的user表
而後咱們來試試剛剛寫的登陸功能
輸入用戶名「張三」,密碼「123」,能夠看到提示區域顯示「該用戶不存在」,接口返回的值是-1
輸入用戶名「劉德華」,密碼「123456」,能夠看到提示區域顯示「密碼錯誤」,接口返回的值是0
輸入用戶名「劉德華」,密碼「123」,能夠看到提示區域顯示「登陸成功」,間隔1秒自動跳轉到了主頁,url地址欄能夠看到路由的變化,接口返回值爲1,打印cookie能夠看到已經存在username的cookie
剛剛咱們已經登陸成功了,而且已經保存了username的cookie,如今咱們在該瀏覽器中新建一個標籤頁,輸入路由localhost:8080/#/能夠看到路由自動跳轉到了home。這個意思就是用戶登陸成功以後,在cookie有效期內是能夠免登陸直接跳轉主頁的。
註銷登陸其實就是刪除cookie,能夠看到打印出的cookie裏面已經沒有了username
此時咱們已經刪除了cookie,再新建一個標籤頁,輸入主頁的路由,能夠看到又自動跳回登陸頁了
前面咱們登陸功能主要用到的是vue-resource的post請求,接下來咱們寫一個get請求,其實二者都差很少,格式都爲this.$http.post/get(url,data).then((res)=>{成功返回},(res)=>{失敗返回})
咱們新建一個管理頁src/views/main/main.vue,用get請求返回全部註冊的用戶
<template> <div> <h3>全部註冊用戶</h3> <ul> <li v-for="item in list"> {{item.username}} </li> </ul> </div> </template> <style> ul{padding: 0;} ul li{list-style: none;} </style> <script> export default{ data(){ return{ list: '' } }, mounted(){ this.$http.get('http://localhost/vueapi/index.php/Home/user/index').then((res)=>{ this.list = res.data console.log(res) }) } } </script>
前面建立登陸頁login.vue時,咱們作的判斷是當用戶名和密碼都爲admin時,認爲它是管理員帳號,跳轉到管理頁main.vue
打開登陸頁,輸入用戶名「admin」,密碼「admin」,能夠看到路由直接跳轉到main,打印出的是接口的返回值
前面咱們在login.vue裏已經寫好了登陸和註冊兩個區域,而且咱們默認的是顯示登陸頁(即showRegister 爲false,showLogin 爲true),如今咱們要增長切換顯示的方法ToRegister和ToLogin,方法很簡單,寫在login.vue下script標籤的methods內部便可
ToRegister(){ this.showRegister = true this.showLogin = false }, ToLogin(){ this.showRegister = false this.showLogin = true }
查看切換效果
點擊「註冊」按鈕,觸發register事件,在該事件中將用戶輸入的用戶名和密碼傳至接口
register(){ if(this.newUsername == "" || this.newPassword == ""){ alert("請輸入用戶名或密碼") }else{ let data = {'username':this.newUsername,'password':this.newPassword} this.$http.post('http://localhost/vueapi/index.php/Home/user/register',data).then((res)=>{ console.log(res) if(res.data == "ok"){ this.tishi = "註冊成功" this.showTishi = true this.username = '' this.password = '' /*註冊成功以後再跳回登陸頁*/ setTimeout(function(){ this.showRegister = false this.showLogin = true this.showTishi = false }.bind(this),1000) } }) } }
輸入用戶名「蠟筆小新」,密碼「labi」,提示「註冊成功」,並跳轉到了登陸頁
此時再來查看數據庫,發現多了蠟筆小新的記錄
好了,到這裏咱們已經基本實現了一個有cookie功能的簡單的登陸註冊小實例,主要是瞭解一下vue-resource接口請求的用法,對代碼這一塊的講解不是不少,若是瞭解不夠的能夠去看我前面的人員管理實例,在那篇文章對各個代碼都有詳細解釋。