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教程