vue vue-router vuex element-ui axios 的學習筆記（七）完善登陸註冊

時間  2019-11-10
標籤 vue router vuex element axios 學習 筆記 完善 登陸 註冊 简体版
原文   原文鏈接

如今咱們已經可以在服務器環境下完成註冊操做了vue

Image 070.png

登陸功能

login.vueios

<template>
  <el-main>
    <el-form 
      :model="LoginForm" 
      ref="LoginForm" 
      :rules="rule"
      label-width="0"
      class="login-form">
      <h3>用戶登陸系統</h3>

      <el-form-item prop="username">
        <el-input 
          type="text" 
          v-model="LoginForm.username" 
          placeholder="username" >
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input 
          type="password" 
          v-model="LoginForm.password" 
          placeholder="password" >
        </el-input>
      </el-form-item>

      <el-form-item >
        <el-button 
          type="danger" 
          class="submitBtn"
          round
          @click.native.prevent="submit"
          :loading="logining">
          登陸
        </el-button>
        <el-button 
          type="primary"
          class="resetBtn" 
          round
          @click.native.prevent="reset">
          重置
        </el-button>
        <hr>
        <p>尚未帳號，立刻去<span class="to" @click="toregin">註冊</span></p>
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script>
import {LoginUser} from '../api/api'
export default {
  // ....
  data () {
    return {
      LoginForm: {
        username: '',
        password: ''
      },
      logining: false,
      rule: {
        username: [
          {
            required: true,
            max: 14,
            min: 7,
            message: '用戶名是必須的，長度爲7-14位',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密碼是必須的！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // ...
    submit () {
      this.$refs.LoginForm.validate(valid => {
        if (valid) {
          this.logining = true
          // console.log('開始請求後臺數據，驗證返回之類的操做！')
          // 登陸做爲參數的用戶信息
          let LoginParams = {
            username: this.LoginForm.username,
            password: this.LoginForm.password
          }
          // 調用axios登陸接口
          LoginUser(LoginParams).then(res => {
            this.logining = false
            // 根據返回的code判斷是否成功
            let {code, msg, user} = res.data
            if (code !== 200) {
              this.$message({
                type: 'error',
                message: msg
              })
            } else {
              this.$message({
                type: 'success',
                message: msg
              })
              // 將返回的數據注入sessionStorage
              sessionStorage.setItem('user', JSON.stringify(user))
              // 跳轉到個人信息的頁面
              this.$router.push('/manger/my')
            }
          })
        } else {
          console.log('submit err')
        }
      })
    },
    reset () {
      this.$refs.LoginForm.resetFields()
    },
    toregin () {
      this.$router.push('/regin')
    }
  }
}
</script>

<style scoped>
.login-form {
  margin: 20px auto;
  width: 310px;
  background: #fff;
  box-shadow: 0 0 35px #B4BCCC;
  padding: 30px 30px 0 30px;
  border-radius: 25px; 
}
.submitBtn {
  width: 65%;
}
.to {
  color: #67C23A;
  cursor: pointer;
}
</style>

登陸頁面和註冊頁面差很少的，但測試的話又得打一包，很麻煩，因此暫時能夠用axios-mock-adapter 來模擬測試一下，等功能都完善以後再打包丟到服務器測試vuex

一、安裝axio-mock-adapter

Image 072.png

二、寫個假數據

  • 一、在data.js 裏面添加2個用戶npm

data.jsaxios

import avatarLee from '../assets/avatar.jpg'
import avatarZhang from '../assets/avatar2.jpg'
const users = [
  {
    username: 'lytton',
    password: '123456',
    email: '123@163.com',
    tel: '15181589155',
    name: '李小白',
    time: '2017-11-11',
    avatar: avatarLee
  },
  {
    username: 'zhangsan',
    password: '123456',
    email: '321@163.com',
    tel: '13789546327',
    name: '張三',
    time: '2017-08-17',
    avatar: avatarZhang
  }
]
export default {users}

三、寫mock-adapter 接口

在data文件夾下寫一個index.jsapi

mock.js瀏覽器

import axios from 'axios'
import Adapter from 'axios-mock-adapter'
import {users} from './data'
import avatarDefault from '../assets/logo.png'
export default {
  init () {
    // 建立Adapter 實例
    const mock = new Adapter(axios)

    // 模擬登陸接口
    mock.onPost('/login').reply(config => {
      // 解析axios傳過來的數據
      let {username, password} = JSON.parse(config.data)
      return new Promise((resolve, reject) => {
        // 先建立一個用戶爲空對象
        let user = {}
        // 判斷模擬的假數據中是否有和傳過來的數據匹配的
        let hasUser = users.some(person => {
          // 若是存在這樣的數據
          if (person.username === username && person.password === password) {
            let user = JSON.parse(JSON.stringify(person))
            user.password = ''
            return true
          } else {
            // 若是沒有這個person
            return false
          }
        })
        // 若是有這麼一我的
        if (hasUser) {
          resolve([200, { code: 200, msg: '登陸成功', user }])
          // 若是沒有這我的
        } else {
          resolve([200, { code: 500, msg: '帳號或密碼錯誤' }])
        }
      })
    })

    // 模擬註冊接口
    mock.onPost('/regin').reply(config => {
      let {username, password, email, tel, name} = config.params
      users.push({
        username: username,
        password: password,
        email: email,
        name: name,
        tel: tel,
        avatar: avatarDefault
      })
      return new Promise((resolve, reject) => {
        resolve(config.data)
      })
    })
  }
}

四、配置一下adapter

main.js服務器

Image 073.png

五、測試

cnpm run devsession

Image 074.png

這好尷尬，我添加的假數據用戶名沒7位，其實用戶名不必這麼長啊，改爲3位好了app

Image 075.png

還有問題，來了三個警告，有沒有大神指教一下

Image 076.png

不過應該不影響邏輯的，繼續測試

Image 077.png
額
Image 078.png

跳轉順利，但數據了？？？？找找問題

找到緣由了

Image 079.png

測試了幾回，找到問題了，
mock.js寫出問題了
這是原來的代碼

Image 080.png

首先定義了let user = {}，
在下面的if（）裏面，我又 let user = ‘咱們要返回的數據’
而後在if ()以及hasUser()的外面我resolve user回去的時候，由於做用域的問題，天然就是把這個空的user 返回回去了
正確的寫法就是把if()裏面let user = xxxxx,的let去掉

Image 081.png

由於測試了幾回，因此能夠看見在console 裏面竟然看見了2個user的信息，這個user但是寫進sessionStorage的啊，按道理sessionStorage裏面只該有一個user的信息，這個太危險了，不過咱們仍是把header上的按鈕先變成用戶信息吧

打開header.vue
首先添加這些代碼：

Image 082.png

而後把其它功能完善一下

Image 083.png

Image 084.png

測試一下

Image 085.png

看起來效果仍是不錯的

但點擊個人工做太，退出登陸竟然沒效果，而後我改成這樣

Image 086.png

就有效果了

這是爲何？？？有時候用@click.native沒有效果，要用@click，有時候正好相反@click沒效果，要用@click.native，有沒有大佬來解惑一番？

而後我又發現一個問題了，是這樣的，我先退出登陸

Image 087.png

而後登陸

Image 088.png

很明顯sessionStorage裏面用戶數據是存在的，但右上角仍是登陸按鈕，並無變爲用戶信息？

我原本覺得是mounted 寫錯了，但發現並非，由於我刷新一下就這樣了

Image 089.png

變正常了？並非，我仔細思考了一下，mounted是在頁面建立的時候執行，我刷新一下，右邊是先有了上面的user數據，纔出現下面的warning和console，因此事實是這樣的

Image 088.png

我登陸以後，user數據寫入sessionStorage，而後跳轉到manger/my頁面，而中間那個main部分的頁面是才建立的，會顯示name,而header.vue這個頁面是我打開瀏覽器，輸入這個地址的時候建立的，無論我登陸、註冊仍是登出，切換到那個頁面，header.vue並無被銷燬後重建，天然不會執行mounted()這個行爲。只有我刷新頁面它纔會執行。

固然既然知道問題出在哪裏，那天然就能找出解決的辦法

  • 1：換一個寫法，app.vue裏面不要寫header,footer

Image 090.png

把header,footer，寫在home裏面，這樣跳轉的時候就能夠整個頁面重建了，但這樣的話要修改不少地方，路由要重寫，很麻煩。

  • 二、用$emit 和$on的方法，就是組件之間通信，但我看到一個專門幹這事的vuex以後，本着多學習的思想，決定用vuex來解決，雖然看起來用vuex更麻煩一些。

忽然看見上面的圖片寫着<el-footer class="el-footer.">，這個.讓我非常羞愧啊，辣眼睛，趕忙去改掉。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程