Vue.js實現用戶登錄退出和e2e測試

MycLambert 發(fā)布于2019-08-21 11:45 / 2626人閱讀

摘要：前言本來只是想寫個實現登錄退出的例子的，但是又覺得這樣干貨太少。哈哈，不小心被嚇到了吧，其實這些都是有辦法可以解決的，下次有機會，我們可以再討論一下使用的正確姿勢。

前言

本來只是想寫個Vuet實現登錄退出的例子的，但是又覺得這樣干貨太少。一個好的開源項目，少不了單元測試和e2e測試，為了保證Vuet教程的豐富性和程序的穩(wěn)定性，所以我選擇了寫的例子即能當教程使用，也可以用于測試，豐富的應用場景和測試，能保證日后的版本迭代不會因為修復了一個bug而引發(fā)了一大堆bug的尷尬。

源碼地址

例子源碼
測試源碼

運行Vuet項目

git clone https://github.com/medevicex/vuet.git
npm install
npm run dev
npm run dev:test # 運行測試，需要電腦本地安裝firefox和chrome瀏覽器

開始

哈哈，上面直接拋源碼地址，感覺也是挺尷尬的，我們先分析一下我們這個登錄退出所需要所的功能

登錄頁面，用戶信息頁面，是兩個不同的頁面，就涉及到了多組件狀態(tài)共享

我期望用戶在已登錄的情況下，每次到用戶信息頁面時，先渲染本地的用戶信息，然后再去請求服務器更新本地的用戶信息

將登錄退出的方法，集中起來管理，方面在在各個組件中調用

多組件共享狀態(tài)和方法

Vuet提供了全局的mapModules方法，可以讓我們連接到掛載在Vue實例上的Vuet實例

ages/Home.vue

  import { mapRules, mapModules } from "vuet"

  export default {
    mixins: [
      // manual：規(guī)則，可以將通用的更新模塊狀態(tài)的方法集中起來，
      //        可以理解成vuex中的action，只不過他是可以允許在里面更改模塊狀態(tài)的
      // need 規(guī)則，會在組件每一次的beforeCreate鉤子中，發(fā)送請求更新一次用戶的信息
      mapRules({ manual: "user", need: "user" }),
      // 連接用戶模塊
      mapModules({ user: "user" })
    ]
  }

定義一個user模塊

vuet/user.js

export default {
  data () {
    // 一個Object對象中，是否有data方法，是構成Vuet.js一個模塊的依據
    // 當你調用reset方法時，將會重置整個模塊的狀態(tài)
    // 例如在組件中：this.$vuet.reset("模塊名稱")
    return {
      name: null,
      age: null,
      sex: null,
      count: 0
    }
  },
  async fetch ({ state }) {
    // 當need規(guī)則觸發(fā)更新時，出調用一次fetch方法更新
    // 我們可以在這里直接更改state，也可以return一個Object對象來更新狀態(tài)

    // 在實際項目中，用戶未登錄時，我們并不需要向服務器發(fā)送真正的請求
    // 所以我們可以判斷一下用戶的名稱是否存在，否則的話不向服務器進行真正的請求
    if (state.name === null) return
    
    // 下面數據因為是模擬的，所以就直接return好了
    return {
      name: "Vuet",
      age: 18,
      sex: "male",
      count: ++state.count
    }
  },
  // 注：你要在組件中使用manual規(guī)則才能向組件注入這些方法
  // 例如：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一種開放的姿態(tài)，它可以在任意組件直接對模塊的狀態(tài)進行直接的賦值更新，也可以使用類似action的方法進行更新，它可以讓你為所欲為，用得好的人可以讓你開發(fā)的效率飆升，用得不好，也會導致你程序中的狀態(tài)難以追蹤變化的記錄。哈哈，不小心被嚇到了吧，其實這些都是有辦法可以解決的，下次有機會，我們可以再討論一下使用Vuet的正確姿勢。

GPU云服務器云服務器系統(tǒng)登錄用戶名和密碼 asp實現登錄和查詢 JSP用戶退出服務器用戶賬號退出

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/87079.html

Vue.js項目重構，輕松實現上拉加載滾動位置還原

摘要：這是基于進行狀態(tài)管理的完整項目，包含了用戶的登錄退出，路由頁面，滾動位置還原，帖子編輯狀態(tài)保存等等，麻雀雖小，卻是五臟俱全。前言上一篇《Vue.js輕松實現頁面后退時，還原滾動位置》只是簡單的實現了路由切換時進行的滾動位置還原，很多朋友就來問上拉加載怎么實現?。∮谑俏蚁肫鹆艘郧白鲞^一個叫vue-cnode的項目，于是花了兩天時間進行了重構，完全的移除了Vuex，使用了Vuet來做為...

junbaor 2019-08-20 17:23 評論0 收藏0
2017-06-13 前端日報

摘要：前端日報點關注，不迷路精選前端團隊工作流遷移記譯新語法私有屬性知乎專欄前端每周清單大前端技術生命周期模型發(fā)布面向生產環(huán)境的前端性能優(yōu)化模塊實現入門淺析知乎專欄中文一個線下沙龍中國最大的前端技術社區(qū)單頁面博客從前端到后端基于 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，然后執(zhí)行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 開發(fā)聊天程序（一）: 初建項目

摘要：它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。安裝和使用在之后的實踐過程中講解。有一套良好的代碼規(guī)范，對于項目的開發(fā)和維護都很友好。努力了，不一定能成功，但是不努力，感覺好舒服啊　　　　　　　　　　　　　　　　　　　——努訓沒有了解過vue1.*，直接上手vue2.0；雖然有些吃力但還是很愉快了學下來了。一丶環(huán)境配置 node.js...

荊兆峰 2019-08-21 11:25 評論0 收藏0