登录

m.xflapp.com/f100/activi…

3. 手机号输入

• 只能输入数字
  • -type="number"
  • oninput="value = value.replace(/[^0-9]/g, '')"
• 正则匹配手机号
  • 校验长度11位 --input maxlength="11"
  • 1开头，并且第二位是3-9，长度一共是11位 ^1[3-9]\d{9}$

2. 获取验证码

• 正则校验手机号之后，如果不通过校验，则弹一个toast
• 
• toast

• 验证通过之后，发请求 post请求

• 获取验证码变成-倒计时，这段时间避免用户重复发送

3.校验

1. 手机号/是否满足正则
2. 验证码有没有输入
3. 个包协议有没有勾选 三个都满足之后，可点击状态

• 不满足 弹toast 具体的文案可以替换
  • 发送post请求给服务端，如果返回值是xx，可以通过登录/否则不行，并弹出toast弹窗
  • 根据接口返回值展示具体内容

• 满足 重定向到首页 window.location.href = 'www.baidu.com'

1. 页面

import React, { useState, useEffect, useRef } from "react";
import LoginView from "./LoginView";
import API from '../../api/index'
const Login = () => {
    const [getId, setGetId] = useState('');
    const [postId, setPostId] = useState('');


    function getFunction() {
        //接口请求返回的都是Promise

        API.getFunc(2).then(response => {
            console.log('response.data=>', response.data);
            let res = response.data;
            setGetId(res.id);
        }).catch(error => {
            console.error('err', error);
        });
    }

    function postFunction() {
        // 创建一个新的帖子
        const newPost = {
            userId: 1,
            title: "foo",
            body: "bar"
        };

        API.PostFunc(newPost).then(response => {
            console.log('postData=>', response.data);
            let res = response.data;
            setPostId(res.id);
        }).catch(error => {
            console.error('There was an error!', error);
        });

    }




    return (


        <div>
            <button onClick={getFunction}>get</button>
            <div>get请求返回对象的id:{getId}</div>

            <button onClick={postFunction}>post</button>
            <div>post请求返回值:{postId}</div>


        </div>
    )
}
export default Login;

API

// import axios  from "../utils/request";
import axios from "axios";
// get和Post区别

//路径地址
const base = { 

    baseURL: "http://localhost:3000",
    homehot1: "/api/home/hot1",
    homehot2: "/api/home/hot2",
}

//请求方法
 const api = {
    // 获取首页热门产品
    getHomeHot1() {
        return axios.get(base.baseURL + base.homehot1)
    },
    getHomeHot2() {
        return axios.get(base.baseURL + base.homehot2)
    },
     getFunc (postId)  {
        const url = `http://jsonplaceholder.typicode.com/posts/${postId}`;
        return axios.get(url);
    },
   PostFunc(post)  {
        const url = `http://jsonplaceholder.typicode.com/posts`;
        return axios.post(url, post);
    },
}



export default api