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

前言

本来只是想写个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

<template>
  <div class="inner">
    <b class="msg" style="color:red" v-if="msg">{{ msg }}</b>
    <form @submit.prevent="submit">
      <div>
        <label>User name:<input class="name" type="text" v-model="form.name"></label>
      </div>
      <div>
        <label>Password:<input class="pass" type="password" v-model="form.pass"></label>
      </div>
      <button>Signin</button>
    </form>
  </div>
</template>
<script>
  import { mapRules, mapModules } from 'vuet'

  export default {
    mixins: [
      // 使用manual规则取得user模块里面manuals的方法
      mapRules({ manual: 'user' }),
      // 连接用户的模块信息
      mapModules({ user: 'user' })
    ],
    data () {
      return {
        msg: null,
        form: {
          name: null,
          pass: null
        }
      }
    },
    methods: {
      async submit () {
        const res = await this.$user.signin(this.form)
        this.msg = res.msg
        if (res.success) {
          // 登录成功后，直接赋值更新用户信息
          this.user = res.data
          setTimeout(() => {
            this.$router.replace({ name: 'home' })
          }, 500)
        }
      }
    }
  }
</script>
<style scoped>
</style>

总结

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