Reachel

Reachel 查看完整档案

填写现居城市西南大学  |  信息管理与信息系统 编辑  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Reachel 发布了文章 · 2019-11-05

通过框架设计理解React、Angular、Vue区别

前言

我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们可以从框架设计上入手试着分析它们。

什么是框架

可以参考我之前的文章关于基于框架搭建与布局系统的思考

框架设计

一、职责范围

职责范围就是框架设计之初要考虑的范围,是一手全包还是只封装底层核心代码?简单说就是这个框架可以为你做多少事情

1.small scope(小职责范围)

代表:React
(1)设计理念:
自底向上
只建立核心模型,然后围绕核心模型建立生态系统
(2)优点:
  • 初始时需要理解的概念很少

初始只用掌握核心代码

  • 灵活
    因为框架/库只提供了部分底层的原生实现,用户可以在框架基础上构建任意复杂的系统
  • 生态好

拥有强大的生态系统

  • 维护成本小
(3)缺点:
  • 学习成本大

1.同样也是因为框架只提供了部分底层的原生实现,所以当我们需要构建比较复杂的系统时,就需要用非常有限的、非常原始的一些东西,去构建一些复杂的想法。(如学习了React,还需钻研Redux、HOC 高阶组件、render、props、Hooks以及在 JS 中使用 CSS 的各种方式等等)
2.官方只提供基础的文档,其余需要自己去钻研,需要自主学习能力

2.large scope(大职责范围)

代表:Angular
(1)设计理念
自上而下
尽可能考虑用户可能会遇到的问题;当你尝试解决一个问题时,你在框架内就能找到解决方案。
(2)优点
  • 框架与生态一致性

集中式的设计确保了它本身与其生态系统的。当你遇到一个具体问题的时候,你不必去找一些不同的解决方案,你只需要看看框架它让你做什么,最大的可能就是它(框架)对此已经有解决方案。

  • 少量代码解决最常见的问题

可以通过构建抽象概念来解决最常见的问题,如只需要建一个路由、一个http请求数据就能实现基本功能。

(3)缺点
  • 更高的学习门槛

对于初学者来说,如果没有类似使用 Java 或者 C# 等语言经验的话,而是仅仅只学过 HTML/CSS 以及 JavaScript 的话,当你看到 Angular 文档的时候,你可能会很难吃透。

  • 不灵活

如果框架内置的解决方案不满足当前需求,但却没有方法替换。
当你想尝试更改底层想法时,它会影响到你项目中的每个组件(牵一发而动全身)。

3.progressive scope(渐进式框架)

代表:Vue
(1)设计理念
框架分层
允许以渐进的方式选择特性。如需要路由、需要状态管理就引入,不需要也不影响,按需取舍,既能开发全新应用,也能融合之前已开发应用
(2)优点
  • 降低了学习门槛
(3)缺点

作为small scope 和 large scope的中间者,需要去权衡利弊

  • 生态系统可能不会像小职责范围那样多样化
  • 维护负担几乎与大职责范围相同

二、渲染机制

如何表达你的视图层,框架如何处理代码?如何将实际渲染东西展示到页面上的?这就要考虑我们的渲染机制。

1.原生DOM

原生DOM大家都熟悉,在这里我就不过多说明了。

<div>
  <p class="framework-design">框架设计</p>
</div>
(1)优点
  • 易用性强
(2)缺点

在我们对原生DOM进行操作时,会发现很多缺点

  • 效率低
  • 解析速度慢
  • 内存占用量高

2.JSX / VDOM(虚拟DOM)

通过框架来表现自己的UI结构

render() {
    return h(
        'div',
        null,
        h(
            'p',
            {  'class': 'framework-design' },
           '框架设计'
        )
    );
}
(1)优点
  • 通过JS实现UI层,具有 JavaScript 的完整表现力
  • 将视图层视为数据,可以对数据做任何操作
  • 可以渲染到任何目标,终端、PDF、Canvas、WebGL
(2)缺点
  • VDOM 本身成本很高

即使你只有一个节点,也可能会触发 这个VDOM 的 Diff 算法

3.templates(模板编译)

通过模板来表现自己的UI结构

<template>
  <div>
    <p>{{ data.title }}</p>
    <p>{{ data.content }}</p>
  </div>
</template>
(1)优点
  • 更加直接的渲染指令,具有更好的原生性能

通过模板编译符准确知道可变的dom节点

<div>
  <p>框架设计</p>
  <p>{{ message }}</p>
</div>
(2)缺点
  • 受限于严格的模板语法,从而失去 JavaScript 的表达能力

三、状态机制

1.脏检查

脏数据:产生了变化的数据
脏检查:找出脏数据,重新渲染视图

那么在什么时候进行脏检查呢?检查哪些元素呢?

下面以Angular为例

何时进行

Angular 会在可能触发 UI 变更的时候进行脏检查。例如常用的 ng-click。

检查哪些元素

Angular 会对所有绑定到 UI 上的表达式做脏检查。在Angular程序初始化时,会将绑定的对象的属性添加为监听对象(watcher),也就是说一个对象绑定了N个属性,就会添加N个watcher。

如何操作

当脏检查触发,则会循环遍历所有watch,最后更新DOM

通俗点讲

我们回忆一下我们的学生时代,住校生都住在寝室里面,每栋宿舍楼都有专门的宿管阿姨。每天晚上快熄灯的时候(触发脏检查了),宿管阿姨开始巡逻了,她要看哪些学生还没回寝室呢,寝室有哪些违规现象呢。阿姨会从1楼开始一直巡逻查看到顶楼,每间宿舍都要查看(循环遍历watcher)。但是呢,因为目前顶楼还没住人,所以阿姨巡逻时会跳过(只检查绑定到UI上的表达式)。最后啊,没回寝的学生都被阿姨拿上小本本记下来了(查出了脏数据)。

2.依赖追踪

当某一个数据(依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动,也就是数据驱动。

下面以Vue为例

何时进行

依赖数据发生变化

如何操作

为数据定义 getter & setter
当在data里面定义了数据时,系统会为这些数据添加getter和setter
获取数据时触发getter,为数据赋值时触发setter
当触发了setter时,model发生变化,系统会通知所有的viewModel更新视图

通俗点讲

在我们大学时期,上课还是相对而言较严格的,为了应对各项严格的规章制度,417寝室的室友们商量拉了一个微信群(依赖数据:微信群),当有重大事情时在群里面进行通知(每个人都可以接收消息、发送消息 getter & setter)。

某天政治课,大家偷懒赖床不去上课,只有小李一人去了教室,不一会儿,小李就在微信群里面发了一句话“老师在点名!速来!”(set,更改了model,通知了所有的viewModel)。接收到消息的所有室友迅速起床飞奔去教室(监听到依赖数据发生变化,自动更新视图)。

3.VDOM diff

保存上次的VDOM,对比这次的VDOM,发现差异,更改视图
下面以React为例

何时进行

state 发生改变

如何操作

比较两次的VDOM,层层遍历,找出不同的数据,更新整个DOM

通俗点讲

大学每年最痛苦的就是期末了,期末时各个同学打起十二分的精神,抢占各个楼道口,通宵达旦的背书看题。这个时候少不了老师划的重点,政治课老师划完重点后,小熊还不放心,去找上一届的学长讨来了学长那一届的重点,回到寝室就开始一章一章地对比,从书的第一页翻到了最后一页(比较两次VDOM),把不同的地方都标记出来(找出不同的数据),最后把比较过后的整本书都背了下来(更新整个DOM)。

总结

通过以上我们可以看出

1.React

是自底向上的框架。
它只提供部分底层的原生实现,拥有强大的生态环境。
使用JSX / VDOM 来渲染视图层。
使用VDOM diff更新视图,通常整个DOM都要重新渲染过。
学习成本很高,虽然初始上手很快,但如果想要实现更为复杂的系统,需要钻研Redux、HOC 高阶组件、render、props、Hooks等知识。

2.Angular

是自上而下的框架。
使用templates和JSX / VDOM实现视图层。
采用脏检查更新视图,设置多个watcher,当watcher越多时会耗费性能。
学习门槛高,不利于初学者。
组件丰富,一般常见的功能都在框架里能找到解决方案。
二次开发成本高,当想实现底层想法时,会影响很多组件。

3.Vue

渐进式框架。
使用templates和JSX / VDOM实现视图层。
采用数据驱动更新视图,有变化才更新,提升效率。
易上手,灵活性强,既能开发全新应用,又能融合进已有应用中。
性能高,超快虚拟DOM
查看原文

赞 15 收藏 10 评论 0

Reachel 发布了文章 · 2019-11-05

基于框架搭建与布局系统

前言

我们在开发一个系统的时候,最重要的就是选择系统开发框架,其次选择UI,有了框架会使我们接下来的开发就游刃有余,大大提升我们的开发效率。那么我们如何选择框架?如何基于框架搭建系统?系统如何布局呢?

一、框架简介

1.框架与架构

什么是框架

框架是实体,是系统或子系统的半成品

什么是架构

架构是抽象的重要策略,是技术整合、扩展

如果把开发一个系统比作造房子,
那么架构是地基打在哪里,打多深,用什么材料,如何分配;
框架就是我们搭出来的房屋基本的架子;
开发就在我们这个架子上去堆砖砌瓦即可;

2.框架模式

框架模式有很多,接下来我们了解下主流的两个框架

(1)MVC

image.png

M:Model(模型)负责数据和业务逻辑
V:View(视图)所看到的页面
C:Controller(控制器)控制器负责从视图读取数据,控制用户输入,并向模型发送数据

(2)MVVM

image.png

M:Model(模型)从后台获取到的数据
V:View(视图)所看到的页面
VM:ViewModel(视图模型)处理数据和业务逻辑

二、布局与构思

了解了框架以及主流的框架模式之后,下面就可以思考如何着手搭建我们的系统了。

1.搭建一个什么系统?

系统定位是什么?系统功能有哪些?

2.在哪个端搭建?

PC?WAP?多端兼容?...

3.页面怎么布局?

有无设计图?常规布局都有哪些?

4.框架模式选用?

MVC?MVP?MVVM?...

5.开源?自己搭建?

套用开源的框架进行二次开发?自己从0开始搭建?

经过这些灵魂拷问之后,我们对于自己要开发什么系统是不是更清晰了呢?

三、技术选型

市场上各种各样的框架和技术,层出不穷,我们如何进行技术选型呢?
要考虑的方面我归纳为以下几点:

1.公司:

(1)公司技术栈
公司目前所用技术都有哪些,有哪些成熟的技术

(2)公司语言
公司常用的开发语言是什么

(3)团队实力
团队实力如何,团队熟悉哪种语言,如果学习新框架易上手吗?

2.时间

(1)开发周期
有没明确规定开发周期,在这个规定的开发周期内能不能完成;
如果没有规定开发周期,那根据选用的技术不同,分别需要花多久

3.技术

(1)生态&文档
是否有一个良好的生态环境,文档是否齐全

(2)稳定性
大团队开发?私人开发?会不会选用了这个技术开发到一半,团队不再维护这个技术了?

(3)可扩展性
如果我想进行二次开发,加一些扩展的功能或者自定义的方法,成本如何?难度大不大?需要修改的地方多不多?对我整体的框架有什么影响?

(4)可维护性
维护成本及难度如何

(5)易用性
学习成本、上手难易程度及开发成本如何

(6)性能效率
性能如何?效率高不高

四、UI框架

当我们选好了我们的技术框架后,就要确定是自己写样式组件等还是选用一个好的UI框架来提升我们的开发效率。市面上的UI框架同样有很多,我们如何去选择适合自己系统的呢?

1.PC、WAP?

这个UI框架适用哪个端

2.兼容性

PC端对各浏览器兼容性如何,WAP端对各类型手机系统兼容性如何

3.易用性

4.稳定性

5.样式是否与系统气质相符

选用UI框架时,需要考虑一点,这个UI的样式界面与我们系统的气质搭不搭?怎么说呢,打个比方,如果我们要开发的是面向年轻人的电商平台,结果我们选用的UI框架死气沉沉,更像是一个政府网站,这显然是不妥的。

6.组件是否丰富

封装的底层组件多不多,涵盖了哪些?包含了常用的组件没,是否需要我们自己封装还是开箱即用?

7.生态&文档

本篇文章只给大家提供一个思路,让大家在开发系统时不再对选用技术及UI感到迷茫,提前规划好我们要开发的框架,在选择框架时不要跟随潮流,而是综合评估各个层面后选用适合自己的框架。

查看原文

赞 9 收藏 5 评论 0

Reachel 评论了文章 · 2018-10-08

vue-cli——vue-resource登录注册实例

前言

使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。
github地址

实例功能简述

本实例只有简单的两个模块:登录和注册,主要演示如何用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表

数据库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接口请求的用法,对代码这一块的讲解不是很多,如果了解不够的可以去看我前面的人员管理实例,在那篇文章对各个代码都有详细解释。

查看原文

Reachel 评论了文章 · 2018-08-15

vue-cli——vue-resource登录注册实例

前言

使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。
github地址

实例功能简述

本实例只有简单的两个模块:登录和注册,主要演示如何用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表

数据库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接口请求的用法,对代码这一块的讲解不是很多,如果了解不够的可以去看我前面的人员管理实例,在那篇文章对各个代码都有详细解释。

查看原文

Reachel 评论了文章 · 2018-07-16

vue-cli——vue-resource登录注册实例

前言

使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。
github地址

实例功能简述

本实例只有简单的两个模块:登录和注册,主要演示如何用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表

数据库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接口请求的用法,对代码这一块的讲解不是很多,如果了解不够的可以去看我前面的人员管理实例,在那篇文章对各个代码都有详细解释。

查看原文

Reachel 评论了文章 · 2018-07-16

vue-cli——vue-resource登录注册实例

前言

使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。
github地址

实例功能简述

本实例只有简单的两个模块:登录和注册,主要演示如何用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表

数据库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接口请求的用法,对代码这一块的讲解不是很多,如果了解不够的可以去看我前面的人员管理实例,在那篇文章对各个代码都有详细解释。

查看原文

Reachel 评论了文章 · 2018-06-13

vue-cli——vue-resource登录注册实例

前言

使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。
github地址

实例功能简述

本实例只有简单的两个模块:登录和注册,主要演示如何用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表

数据库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接口请求的用法,对代码这一块的讲解不是很多,如果了解不够的可以去看我前面的人员管理实例,在那篇文章对各个代码都有详细解释。

查看原文

Reachel 评论了文章 · 2018-06-13

vue-cli——vue-resource登录注册实例

前言

使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。
github地址

实例功能简述

本实例只有简单的两个模块:登录和注册,主要演示如何用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表

数据库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接口请求的用法,对代码这一块的讲解不是很多,如果了解不够的可以去看我前面的人员管理实例,在那篇文章对各个代码都有详细解释。

查看原文

Reachel 评论了文章 · 2018-06-13

vue-cli——vue-resource登录注册实例

前言

使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。
github地址

实例功能简述

本实例只有简单的两个模块:登录和注册,主要演示如何用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表

数据库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接口请求的用法,对代码这一块的讲解不是很多,如果了解不够的可以去看我前面的人员管理实例,在那篇文章对各个代码都有详细解释。

查看原文

Reachel 评论了文章 · 2018-06-13

vue-cli——vue-resource登录注册实例

前言

使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。
github地址

实例功能简述

本实例只有简单的两个模块:登录和注册,主要演示如何用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表

数据库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接口请求的用法,对代码这一块的讲解不是很多,如果了解不够的可以去看我前面的人员管理实例,在那篇文章对各个代码都有详细解释。

查看原文

认证与成就

  • 获得 328 次点赞
  • 获得 10 枚徽章 获得 1 枚金徽章, 获得 1 枚银徽章, 获得 8 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-04-07
个人主页被 2.4k 人浏览