Vue.js实现用户登录退出和e2e测试

MycLambert 发布于2019-08-21 11:45 / 2459人阅读

摘要：前言本来只是想写个实现登录退出的例子的，但是又觉得这样干货太少。哈哈，不小心被吓到了吧，其实这些都是有办法可以解决的，下次有机会，我们可以再讨论一下使用的正确姿势。

前言

本来只是想写个Vuet实现登录退出的例子的，但是又觉得这样干货太少。一个好的开源项目，少不了单元测试和e2e测试，为了保证Vuet教程的丰富性和程序的稳定性，所以我选择了写的例子即能当教程使用，也可以用于测试，丰富的应用场景和测试，能保证日后的版本迭代不会因为修复了一个bug而引发了一大堆bug的尴尬。

源码地址

例子源码
测试源码

运行Vuet项目

git clone https://github.com/medevicex/vuet.git
npm install
npm run dev
npm run dev:test # 运行测试，需要电脑本地安装firefox和chrome浏览器

开始

哈哈，上面直接抛源码地址，感觉也是挺尴尬的，我们先分析一下我们这个登录退出所需要所的功能

登录页面，用户信息页面，是两个不同的页面，就涉及到了多组件状态共享

我期望用户在已登录的情况下，每次到用户信息页面时，先渲染本地的用户信息，然后再去请求服务器更新本地的用户信息

将登录退出的方法，集中起来管理，方面在在各个组件中调用

多组件共享状态和方法

Vuet提供了全局的mapModules方法，可以让我们连接到挂载在Vue实例上的Vuet实例

ages/Home.vue

  import { mapRules, mapModules } from "vuet"

  export default {
    mixins: [
      // manual：规则，可以将通用的更新模块状态的方法集中起来，
      //        可以理解成vuex中的action，只不过他是可以允许在里面更改模块状态的
      // need 规则，会在组件每一次的beforeCreate钩子中，发送请求更新一次用户的信息
      mapRules({ manual: "user", need: "user" }),
      // 连接用户模块
      mapModules({ user: "user" })
    ]
  }

定义一个user模块

vuet/user.js

export default {
  data () {
    // 一个Object对象中，是否有data方法，是构成Vuet.js一个模块的依据
    // 当你调用reset方法时，将会重置整个模块的状态
    // 例如在组件中：this.$vuet.reset("模块名称")
    return {
      name: null,
      age: null,
      sex: null,
      count: 0
    }
  },
  async fetch ({ state }) {
    // 当need规则触发更新时，出调用一次fetch方法更新
    // 我们可以在这里直接更改state，也可以return一个Object对象来更新状态

    // 在实际项目中，用户未登录时，我们并不需要向服务器发送真正的请求
    // 所以我们可以判断一下用户的名称是否存在，否则的话不向服务器进行真正的请求
    if (state.name === null) return
    
    // 下面数据因为是模拟的，所以就直接return好了
    return {
      name: "Vuet",
      age: 18,
      sex: "male",
      count: ++state.count
    }
  },
  // 注：你要在组件中使用manual规则才能向组件注入这些方法
  // 例如：mapRules({ manual: "模块名称" }) 
  // 调用：this.$模块名称.xxx()
  manuals: {
    async signin ({ state }, from) { // 定义了一个登录的方法
      if (from.name === "Vuet" && from.pass === "2017") {
        return {
          success: true,
          msg: "Login was successful",
          data: {
            name: "Vuet",
            age: 18,
            sex: "male",
            count: ++state.count
          }
        }
      }
      return {
        success: false,
        msg: "Logon failure",
        data: null
      }
    },
    async sigout () {
      // 用户选择退出后，直接调用reset的方法即可重置用户信息
      this.reset()
    }
  }
}

实现用户登录

pages/Signin.vue

总结

其实教程并没有写得特别详细的过程，主要是为了体现出Vuet一种开放的姿态，它可以在任意组件直接对模块的状态进行直接的赋值更新，也可以使用类似action的方法进行更新，它可以让你为所欲为，用得好的人可以让你开发的效率飙升，用得不好，也会导致你程序中的状态难以追踪变化的记录。哈哈，不小心被吓到了吧，其实这些都是有办法可以解决的，下次有机会，我们可以再讨论一下使用Vuet的正确姿势。

专线服务私有云系统登录用户名和密码 asp实现登录和查询 JSP用户退出服务器用户账号退出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87079.html

Vue.js项目重构，轻松实现上拉加载滚动位置还原

摘要：这是基于进行状态管理的完整项目，包含了用户的登录退出，路由页面，滚动位置还原，帖子编辑状态保存等等，麻雀虽小，却是五脏俱全。前言上一篇《Vue.js轻松实现页面后退时，还原滚动位置》只是简单的实现了路由切换时进行的滚动位置还原，很多朋友就来问上拉加载怎么实现啊！于是我想起了以前做过一个叫vue-cnode的项目，于是花了两天时间进行了重构，完全的移除了Vuex，使用了Vuet来做为...

junbaor 2019-08-20 17:23 评论0 收藏0
2017-06-13 前端日报

摘要：前端日报点关注，不迷路精选前端团队工作流迁移记译新语法私有属性知乎专栏前端每周清单大前端技术生命周期模型发布面向生产环境的前端性能优化模块实现入门浅析知乎专栏中文一个线下沙龙中国最大的前端技术社区单页面博客从前端到后端基于 2017-06-13 前端日报点关注，不迷路:-P 精选 ESLint v4.0.0 released - ESLint - Pluggable JavaScri...

曹金海 2019-08-21 11:45 评论0 收藏0
Vue Cli安装以及使用

摘要：单元测试前端的单元测试目前有两个比较热的框架，一个是的方式，一个是。小伙伴们不用急，关于单元测试这块，我会找时间写博客的。首先前端的测试分为两种，一个是单元测试，另一个就是测试了。因为公司项目要用vue框架，所以会用vue-cli来新建项目。用过vue的都知道，要全局安装vue以及脚手架vue-cli，然后执行vue init webpack projectname来新建vu...

lemanli 2019-04-23 13:21 评论0 收藏0
vue-cli 构建 vue 项目详解

摘要：打开浏览器输入，会看到构建的项目的主页目录结构使用编辑器打开推荐使用，下面具体看看目录结构在中，根据我们在构建项目的时候的选项，有以下几个命令。构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli 。前端的三大框架都有自己的脚手架工具，其作用就是用配置好的模板迅速搭建起一个项目工程来，省去自己配置 webpack 配置文件的基本内容，大大降低了初学者构建项目的难度。这...

JeOam 2019-08-23 14:59 评论0 收藏0
Vue 2.0 开发聊天程序（一）: 初建项目

摘要：它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。安装和使用在之后的实践过程中讲解。有一套良好的代码规范，对于项目的开发和维护都很友好。努力了，不一定能成功，但是不努力，感觉好舒服啊　　　　　　　　　　　　　　　　　　　——努训没有了解过vue1.*，直接上手vue2.0；虽然有些吃力但还是很愉快了学下来了。一丶环境配置 node.js...

荆兆峰 2019-08-21 11:25 评论0 收藏0