第一天加油

1登录页面对手机号的校验

   <van-field
        v-model="phone"
        name="phone"
        label="手机号"
        placeholder="请输入手机号"
        :rules="telRules"
      />
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="codeRules"
      >


telRules: [
        {
          required: true,
          message: "手机号码不能为空",
          trigger: "onBlur",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^1[3456789]\d{9}$/.test(
              value
            );
          },
          message: "请输入正确格式的手机号码",
          trigger: "onBlur",
        },
      ],
      codeRules: [
        {
          required: true,
          message: "验证码不能为空",
          trigger: "onBlur",
        },
      ],

2:封装http请求  引入了axios使用请求拦截和响应拦截让请求头携带token 当token失效时返回401请求 使用router重新跳转到登录页面。 使用Promise来封装请求 

import axios from 'axios'
import router from '@/router'
import store from '@/store'
axios.defaults.baseURL="https://apif.java.crmeb.net"
axios.interceptors.request.use((config)=>{
    let token = store.state.token.token;
    config.headers['authori-zation']=token;
    return config
})
axios.interceptors.response.use((respones)=>{
    if(respones.data.code == 401){
        router.push({
            path:"/login"
        })
        return respones
    }
    return respones
})
let getHttp = (url)=>{
    return new Promise((resolve,reject)=>{
       axios.get(url).then((res)=>{
          resolve(res)
       })
    })
}
let postHttp =(url,data,header)=>{
    return new Promise((resolve,reject)=>{
        axios.post(url,data,header).then(res=>{
            resolve(res)
        })
    })
}
export {
    getHttp,
    postHttp
}

3：搜索框使用模糊查询 然后利用闭包的原理使用setTimeout来封装了一个防抖

   <div class="search">
    <van-search
      @input="input()()"
      v-model="value"
      placeholder="请输入搜索商品"
    />
  </div>
 methods: {
    input() {
      if (this.time) {
        clearTimeout(this.time);
      }
      let that = this;
      return function () {
        that.time = setTimeout( async() => {
          let res = await searchGethttp(that.value)
          console.log(res);
        }, 2000);
      };
    },
  },

4：使用vant 自带的轮播实现了图片懒加载

<van-swipe :autoplay="3000">
      <van-swipe-item >
        <img class="imge" v-lazy="banner" />
      </van-swipe-item>
    </van-swipe>