阅读 5102

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的正确姿势。