vue-cli——vue-resource登錄注冊實例

前言

使用vue-resource請求接口非常方便，在使用前需安裝vue-resource依賴並在入口文件main.js中聲明。

實例功能簡述

本實例只有簡單的兩個模塊：登錄和注冊，主要演示如何用vue-resource請求接口以及后期邏輯書寫。各個功能如下所示：
登錄模塊
登錄-用戶不存在

登錄-密碼錯誤

登錄-成功

注銷登錄

注冊模塊

項目功能梳理

在創建項目之前，我們先理一下整個項目的功能模塊。
登錄模塊
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為后台管理頁

開發項目

用vue-cli創建一個新項目，創建好后，因為我們要用到接口請求，所以第一步先安裝vue-resource,打開cmd進入文件所在目錄，輸入npm install vue-resource,安裝完成后在入口文件main.js中引入

import VueResource from 'vue-resource' Vue.use(VueResource)

1.登錄頁

1.1 新建login.vue頁面

在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>

1.2 配置路由

編輯/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啟動項目，在瀏覽器看效果

1.3 登錄功能

點擊登錄按鈕，觸發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>

1.4 測試

現在我們來檢測一下，接口是我用php寫在本地上的，服務器環境用的xampp，我們先打開xampp的phpMyadmin數據庫管理頁看一下我們的user表

用戶名不存在測試

然后我們來試試剛剛寫的登錄功能
輸入用戶名“張三”，密碼“123”，可以看到提示區域顯示“該用戶不存在”，接口返回的值是-1

密碼錯誤測試

輸入用戶名“劉德華”，密碼“123456”，可以看到提示區域顯示“密碼錯誤”，接口返回的值是0

登錄成功測試

輸入用戶名“劉德華”，密碼“123”，可以看到提示區域顯示“登錄成功”，間隔1秒自動跳轉到了主頁，url地址欄可以看到路由的變化，接口返回值為1，打印cookie可以看到已經存在username的cookie

cookie測試

剛剛我們已經登錄成功了，並且已經保存了username的cookie，現在我們在該瀏覽器中新建一個標簽頁，輸入路由localhost:8080/#/可以看到路由自動跳轉到了home。這個意思就是用戶登錄成功之后，在cookie有效期內是可以免登錄直接跳轉主頁的。

注銷登錄測試

注銷登錄其實就是刪除cookie，可以看到打印出的cookie里面已經沒有了username

此時我們已經刪除了cookie，再新建一個標簽頁，輸入主頁的路由，可以看到又自動跳回登錄頁了

1.5 管理頁

前面我們登錄功能主要用到的是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，打印出的是接口的返回值

2.注冊頁

2.1 在login.vue頁面控制登錄注冊切換

前面我們在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 }

查看切換效果

2.2 注冊功能

點擊“注冊”按鈕，觸發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) } }) } }

 

好了，到這里我們已經基本實現了一個有cookie功能的簡單的登錄注冊小實例，主要是了解一下vue-resource接口請求的用法