Vue 移动端 实战二 登录和注册 定时器的用法、Token过期问题（处理 刷新的token和 自动的token）

1.0 登录注册

目标

• 能实现登录页面的布局
• 能实现基本登录功能
• 能掌握 Vant 中 Toast 提示组件的使用
• 能理解 API 请求模块的封装
• 能理解发送验证码的实现思路
• 能理解 Vant Form 实现表单验证的使用

2.0 准备

2.1 创建组件并配置路由

1.创建 src/views/login/index.vue 并写入以下内容

<template>
  <div class="login-container">登录页面</div>
</template>

<script>
export default {
   
  name: 'LoginPage',
  components: {
   },
  props: {
   },
  data () {
   
    return {
   }
  },
  computed: {
   },
  watch: {
   },
  created () {
   },
  mounted () {
   },
  methods: {
   }
}
</script>

<style scoped lang="less"></style>

2、然后在 src/router/index.js 中配置登录页的路由表

{
   
  path: '/login',
  name: 'login',
  component: () => import('@/views/login')
}

这里有个注意点  要 npm i core-js@3.6.4    降低一下版本 高版本会报错
最后 记得删除 app.vue 里面的多余代码

3、最后，访问 /login 查看是否能访问到登录页面。

2.2 布局结构

这里主要使用到三个 Vant 组件：

• NavBar 导航栏
• Form 表单
  • Field 输入框
  • Button 按钮

一个经验：使用组件库中的现有组件快速布局，再慢慢调整细节，效率更高（刚开始可能会感觉有点麻烦，越用越熟，慢慢的就有了自己的思想）。

2.3 布局样式

写样式的原则：将公共样式写到全局（src/styles/index.less），将局部样式写到组件内部。

1、src/styles/index.less

@import "./icon.less";

body {
   
  background-color: #f5f7f9;
}


.page-nav-bar {
   
  background-color: #3296fa;
  .van-nav-bar__title {
   
    color: #fff;
  }
}

2、src/views/login/index.vue

<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="登录" />
    <!-- /导航栏 -->

    <!-- 登录表单 -->
    <van-form @submit="onSubmit">
      <van-field
        name="用户名"
        placeholder="请输入手机号"
      >
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        type="password"
        name="验证码"
        placeholder="请输入验证码"
      >
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
        <template #button>
          <van-button class="send-sms-btn" round size="small" type="default">发送验证码</van-button>
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <!-- /登录表单 -->
  </div>
</template>

<script>
export default {
   
  name: 'LoginIndex',
  components: {
   },
  props: {
   },
  data () {
   
    return {
   
    }
  },
  computed: {
   },
  watch: {
   },
  created () {
   },
  mounted () {
   },
  methods: {
   
    onSubmit (values) {
   
      console.log('submit', values)
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
   
  .toutiao {
   
    font-size: 37px;
  }
  .send-sms-btn {
   
    width: 152px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
  .login-btn-wrap {
   
    padding: 53px 33px;
    .login-btn