vue-cli入門（四）——vue-resource登錄註冊實例 前言 實例功能簡述 項目功能梳理 開發項目

前言

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

實例功能簡述

本實例只有簡單的兩個模塊：登錄和註冊，主要演示如何用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
<pre>

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

</pre>

1.2 配置路由

編輯/src/router/router.js
<pre>

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
    }
  ]
})

</pre>

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

2.3 測試

輸入用戶名“蠟筆小新”，密碼“labi”，提示“註冊成功”，並跳轉到了登錄頁

此時再來查看數據庫，發現多了蠟筆小新的記錄

好了，到這裏我們已經基本實現了一個有cookie功能的簡單的登錄註冊小實例，主要是瞭解一下vue-resource接口請求的用法，對代碼這一塊的講解不是很多，如果瞭解不夠的可以去看我前面的人員管理實例，在那篇文章對各個代碼都有詳細解釋。