1. 前端 - HTML部分
用daisyUI搭建一个登录模版,加上“获取验证码”按钮
<div>
<div className="hero min-h-screen bg-base-200">
<div className="hero-content flex-col lg:flex-row-reverse">
<div className="text-center lg:text-left">
<h1 className="text-5xl font-bold">Login now!</h1>
<p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
</div>
<div className="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
<div className="card-body">
<div className="form-control">
<label className="label">
<span className="label-text">中国 +86</span>
</label>
<div className="input-group">
<input type="tel" placeholder="请输入手机号" onChange={(e) => {setUserPhone(e.target.value); }} className="input input-bordered" />
<button className="btn btn-secondary" onClick={handleGetVerifyCode}>获取验证码
</button>
</div>
<h2>Phone Number: {userPhone}</h2>
</div>
<div className="form-control mt-2">
<input type="text" placeholder="请输入验证码" className="input input-bordered