Vue - 登录页

思路

1.创建页面组件并配置路由

2.布局结构 - vant

3.样式处理

4.实现业务功能

表单校验

调用接口，发送ajax

1.创建页面组件并配置路由

1.1 创建组件

src/views/login/login.vue

1.2 配置路由

import Login from '../views/login/login.vue'

{
    path: '/login',
    name: 'login',
    compoent: Login
}

1.3 根组件app.vue 配置路由容器

<template>
  <div id="app">
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

2.布局结构 - vant

3.样式处理

3.1 分析

1. 登录页头部的样式写到全局，因为其他页面组件也要用

2.按钮样式写到自建内部

3.2 全局样式

1. 创建styles/index.less

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

2. 在main.js` 引入

import './styles/index.css'

3.3 局部样式

<style lang="less" scoped>
  // 按钮
  .btn-wrap {
    padding:20px;
    .van-button{
      width: 100%;
      background-color: #6db4fd;
      color:#fff;
    }
  }
</style>

4.表单验证

4.1 数据绑定

1.补充数据项

user: {
        mobile: '13800000002', // 测试账号可以登录
        code: '246810'  // 必须一定是这个值
      }

 2.使用 v-model绑定

4.2 表单验证

https://vant-contrib.gitee.io/vant/#/zh-CN/form#xiao-yan-gui-ze

      <van-cell-group>
        <van-field
          v-model.trim="user.mobile"
          type="tel"
          label="手机号"
          :rules="[{ pattern: /^1\d{10}$/, message: '请输入正确的手机号'}]"
        />
        <van-field
          v-model.trim="user.code"
          type="password"
          label="密码"
          :rules="[{ pattern: /^\d{6}$/, message: '请输入正确的密码'}]"
        />
      </van-cell-group>

5.发送ajax

1.在api/user.js 中写入

export const login = (user) => {
  return request({
    url: '/v1_0/authorizations',
    method: 'POST',
    // data | params
    // 如果参数通过请求体来发(post),就用data
    // 如果参数通过请求头来发(get),就用params
    data: user

  })
}

2.调用

    async doLogin () {
      // 提交ajax
      // getProfile()
      try {
        this.$toast.loading({
          duration: 0, // 持续展示 toast,永远不会关闭，它会被后续的toast覆盖
          overlay: true, // 整体添加一个遮罩
          message: '加载中...'
        })
        await this.$store.dispatch('userLogin', this.user)
        // const res = await login(this.user)
        // console.log(res)
        this.$toast.success('欢迎')
      } catch (err) {
        this.$toast.fail('登录失败')
        console.log(err)
      }
    },

6.登录loading效果 - toast组件（this.$toast）

用toast的提示框代替alert

this.$toast.loading({
  duration: 0, // 持续展示 toast,永远不会关闭
  overlay: true, // 整体添加一个遮罩
  message: '加载中...'
})
this.$toast.success('成功')
this.$toast.fail('失败')