9.1正则校验，发送请求

正则

1.1首先，因为我们把v-model="username"改成了，改成了mobile，所以，就把下面数据中的return，改成mobile和code，然后，为了避免后续数据太多混乱了，就可以用info包裹一下

在组件使用了这个变量 我们一定要现在data中申明这个变量 vant组件有申明这个变量的代码 但是我们要做一些改动

1.2接下来就声明一个rules变量，再把上面的mobile和code的rules放到下面的rules中去

如果我们直接在template标签内写rule规则 会页面分工不清晰 所以我们定义一个变量来阐述校验规则

1.3接下来我们写正则校验规则

我们已经把rules规则移动到script标签内 那个现在要继续在这个校验数组里添加校验规则 因为我们用的是正则校验 那么就要用pattern属性

<template>
<div>
  <van-nav-bar title="登录"/>

<van-form @submit="onSubmit">
  <van-field
    v-model="info.mobile"
    label="手机号"
    placeholder="请输入手机号"
    :rules="rules.mobile"
  />
  <van-field
    v-model="info.code"
    label="验证码"
    placeholder="请输入验证码"
    :rules="rules.code"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">登录</van-button>
  </div>
</van-form>

</div>

</template>

<script>
export default {
   data() {
    return {
      info:{
        mobile:'',
        code:''
      },
      rules:{
        // 手机号的规则
        mobile:[
          // required：表示是否必填
          // message：如果没有满足规则，弹出来的提示
          { required: true, message: '请填写用户名' },
          // 用来验证输入的是不是手机号
          // ^匹配输入字符串的开始位置
          // $匹配输入字符串的结尾位置
          // [3-9]匹配3-9之间的字符
          // {n}是一个非负整数
          //\d查找数字字符
          { pattern:/^1[3-9]\d{10}$/,message:'请输入正确的手机号'}
        ],
        // 验证码的规则
        code:[
          { required: true, message: '请填写验证码' },
          { pattern:/^\d{6}$/,message:'请输入正确的验证码'}
        ]
      }
    };
  },
}
</script>

<style>

</style>

现在如果少输入手机号，或者手机号是12开头都会提示输入错误就算完成了表单验证部分
然后当用户输入了正确手机号和验证码 通过了表单验证 就要发送请求了 这个请求还必须携带两个参数（用户输入的手机号和验证码）

发送请求

2.1首先创建专门写请求的文件夹

2.2因为我们之前已经下载过axios了，所以现在可以直接导入

2.3把接口地址放进来，再根据提示补齐代码
YAPI接口文档地址

2.4这个函数里需要传入两个参数
然后把这个请求封装成一个函数

import request from "@/utils/request";

(monile,code) =>{
    return request({
        url:'/v1_0/authorizations',
        method:'post',
        data:{
            mobile:'',
            code:''
        }
    })
    
}

因为需要传入的这两个参数，都放在data数据里，所以可以直接申明需要的数据是data，简写为

import request from "@/utils/request";

(data) => {
    return request({
        url:'/v1_0/authorizations',
        method:'post',
        data
    })
    
}

2.5最后就是暴露出去

// 导入了设置基地址的请求对象
import request from "@/utils/request";

//  封装并暴露一个登陆请求
export const login = (data) => {
    return request({
        url:'/v1_0/authorizations',
        method:'post',
        data
    })
    
}

2.6使用
2.6.1在api文件夹中新建index.js文件

// 导入use文件夹
import { login } from "./use";

// 封装并暴露出去
export const loginAPI = login;

2.6.2去login的index.vue文件中使用

实际上是‘@/api/index.vue’，但是可以省略为‘@/api’

总结：
首先是utils/request.js文件导入了axios，调用了axios方法，并且暴露了一个变量requset
然后在这个src/api/login这个文件里，导入了request，然后封装了登陆请求函数login，把这个函数又暴露出去了
然后src/api/index.js，定义了一个变量loginAPI接收了login函数 ，再暴露出去
最后在views/login/index.vue文件里，接收了loginAPI变量函数

2.7后面就是写方法（在src/views/login/index.vue中）

<script>
import { loginAPI } from "../../api"

export default {
   data() {
    return {
      info:{
        mobile:'',
        code:'',
      },
      rules:{
        // 手机号的规则
        mobile:[
          { required: true, message: '请填写用户名' },
          { pattern:/^1[3-9]\d{9}$/,message:'请输入正确的手机号'}
        ],
        // 验证码的规则
        code:[
          { required: true, message: '请填写验证码' },
          { pattern:/^\d{6}$/,message:'请输入正确的验证码'}
        ]
      }
    };
  },
  methods: {
  //因为是异步，所以要写async,await方法包裹这个函数，并且定义一个变量res接收请求发送成功的内容
    async onSubmit() {
      let res = await loginAPI({
        mobile:this.info.mobile,
        code:this.info.code
      });
      console.log(res);
    },
  },
}
</script>

这样就成功了，验证码是246810