vue-cli——vue-resource登陸註冊實例

時間  2019-11-08
標籤 vue cli resource 登陸 註冊 實例 简体版
原文   原文鏈接

前言

使用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)

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表

數據庫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接口請求的用法，對代碼這一塊的講解不是不少，若是瞭解不夠的能夠去看我前面的人員管理實例，在那篇文章對各個代碼都有詳細解釋。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程