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