如何使用阿里云短信服务实现登录页面，手机验证码登录？

1：个人如何使用阿里云短信服务？

2022如何使用个人阿里云短信服务？_linxiMY的博客-CSDN博客添加完成之后，等待审核！一般2个小时就会出来审核结果了，这里我因为注册申请时填写规则有误，足足审核了7次才通过!点击进来以后，按照要求填写：因为一个账号只能选购一种，所以我这里就没法仔细演示了。然后点击添加即可，一把2-3个小时就可以申请出结果了。ConstantPropertiesUtils 工具类。点击登录阿里云短信服务控制台--->点击。3：创建一个SpringBoot 启动类。将下面的服务地址改为自己对应的地址。AccessKey 保存下来！4：添加一个配置工具类类。开启启动类调接口测试。https://blog.csdn.net/XikYu/article/details/127617049?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168232320316800192242795%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168232320316800192242795&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127617049-null-null.blog_rank_default&utm_term=%E9%98%BF%E9%87%8C%E4%BA%91&spm=1018.2226.3001.4450

2：直接上代码

2.1：建表SQL

CREATE TABLE `sys_user`
(`id`          varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT 'id',`username`    varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户名',`password`    varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',`nickname`    varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '昵称',`email`       varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮箱',`phone`       varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '电话',`address`     varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '地址',`create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',`avatarUrl`   varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

2.2：后端代码

引入pom.xml 依赖：

<dependencies><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId></dependency>
</dependencies>

yml 文件：

server:port: 9999
spring:application:name: demo-enddatasource:druid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/数据库?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=trueusername: rootpassword: rootredis:host: ip地址port: 6379lettuce:pool:max-active: 8 # ????max-idle: 8 # ??????min-idle: 0 # ??????max-wait: 100ms # ??????
mybatis:configuration:map-underscore-to-camel-case: truelog-impl: org.apache.ibatis.logging.stdout.StdOutImplmapper-locations: classpath:mapper/*.xmltype-aliases-package: com.xi.demoend.entity

application.properties:


aliyun.sms.regionId=default
aliyun.sms.accessKeyId=LTAI5tBP98NtTK3gC5mgRQBz
aliyun.sms.secret=gH1w8F0jEWVXSiClmAAnowRw93YTFg

common公共包下的类：

全局统一返回结果：

package com.xialj.demoend.common;import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
/*** @Author * @Date Created in  2023/2/23 17:25* @DESCRIPTION:  全局统一返回结果* @Version V1.0*/
@Data
@ApiModel(value = "全局统一返回结果")
@SuppressWarnings("all")
public class Result<T> {@ApiModelProperty(value = "返回码")private Integer code;@ApiModelProperty(value = "返回消息")private String message;@ApiModelProperty(value = "返回数据")private T data;private Long total;public Result(){}protected static <T> Result<T> build(T data) {Result<T> result = new Result<T>();if (data != null)result.setData(data);return result;}public static <T> Result<T> build(T body, ResultCodeEnum resultCodeEnum) {Result<T> result = build(body);result.setCode(resultCodeEnum.getCode());result.setMessage(resultCodeEnum.getMessage());return result;}public static <T> Result<T> build(Integer code, String message) {Result<T> result = build(null);result.setCode(code);result.setMessage(message);return result;}public static<T> Result<T> ok(){return Result.ok(null);}/*** 操作成功* @param data* @param <T>* @return*/public static<T> Result<T> ok(T data){Result<T> result = build(data);return build(data, ResultCodeEnum.SUCCESS);}public static<T> Result<T> fail(){return Result.fail(null);}/*** 操作失败* @param data* @param <T>* @return*/public static<T> Result<T> fail(T data){Result<T> result = build(data);return build(data, ResultCodeEnum.FAIL);}public Result<T> message(String msg){this.setMessage(msg);return this;}public Result<T> code(Integer code){this.setCode(code);return this;}public boolean isOk() {if(this.getCode().intValue() == ResultCodeEnum.SUCCESS.getCode().intValue()) {return true;}return false;}
}

统一返回结果状态信息类：

package com.xialj.demoend.common;import lombok.Getter;/*** @Author * @Date Created in  2023/2/23 17:25* @DESCRIPTION:  统一返回结果状态信息类* @Version V1.0*/
@Getter
@SuppressWarnings("all")
public enum ResultCodeEnum {SUCCESS(200,"成功"),FAIL(201, "失败"),PARAM_ERROR( 202, "参数不正确"),SERVICE_ERROR(203, "服务异常"),DATA_ERROR(204, "数据异常"),DATA_UPDATE_ERROR(205, "数据版本异常"),LOGIN_AUTH(208, "未登陆"),PERMISSION(209, "没有权限"),CODE_ERROR(210, "验证码错误"),
//    LOGIN_MOBLE_ERROR(211, "账号不正确"),LOGIN_DISABLED_ERROR(212, "改用户已被禁用"),REGISTER_MOBLE_ERROR(213, "手机号码格式不正确"),REGISTER_MOBLE_ERROR_NULL(214, "手机号码为空"),LOGIN_AURH(214, "需要登录"),LOGIN_ACL(215, "没有权限"),URL_ENCODE_ERROR( 216, "URL编码失败"),ILLEGAL_CALLBACK_REQUEST_ERROR( 217, "非法回调请求"),FETCH_ACCESSTOKEN_FAILD( 218, "获取accessToken失败"),FETCH_USERINFO_ERROR( 219, "获取用户信息失败"),//LOGIN_ERROR( 23005, "登录失败"),PAY_RUN(220, "支付中"),CANCEL_ORDER_FAIL(225, "取消订单失败"),CANCEL_ORDER_NO(225, "不能取消预约"),HOSCODE_EXIST(230, "医院编号已经存在"),NUMBER_NO(240, "可预约号不足"),TIME_NO(250, "当前时间不可以预约"),SIGN_ERROR(300, "签名错误"),HOSPITAL_OPEN(310, "医院未开通，暂时不能访问"),HOSPITAL_LOCK(320, "医院被锁定，暂时不能访问"),HOSPITAL_LOCKKEY(330,"医院对应key不一致");private Integer code;private String message;private ResultCodeEnum(Integer code, String message) {this.code = code;this.message = message;}
}

untils包下的工具类：

ConstantPropertiesUtils 用来读取 application.properties文件中的配置

package com.xialj.demoend.utils;import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
/*** @Author * @Date Created in  2023/2/23 17:25* @DESCRIPTION:* @Version V1.0*/
@Component
public class ConstantPropertiesUtils implements InitializingBean {//InitializingBean  初始化bean  让spring 容器一初始化就加载@Value("${aliyun.sms.regionId}")private String regionId;@Value("${aliyun.sms.accessKeyId}")private String accessKeyId;@Value("${aliyun.sms.secret}")private String secret;public static String REGION_Id;public static String ACCESS_KEY_ID;public static String SECRECT;@Overridepublic void afterPropertiesSet() throws Exception {REGION_Id=regionId;ACCESS_KEY_ID=accessKeyId;SECRECT=secret;}
}

RandomUtil 工具类用来生成6位验证码：

package com.xialj.demoend.utils;import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Random;
/*** @Author * @Date Created in  2023/2/23 17:25* @DESCRIPTION:* @Version V1.0*/
@SuppressWarnings("ALL")
public class RandomUtil {private static final Random random = new Random();private static final DecimalFormat fourdf = new DecimalFormat("0000");private static final DecimalFormat sixdf = new DecimalFormat("000000");public static String getFourBitRandom() {return fourdf.format(random.nextInt(10000));}public static String getSixBitRandom() {return sixdf.format(random.nextInt(1000000));}/*** 给定数组，抽取n个数据* @param list* @param n* @return*/public static ArrayList getRandom(List list, int n) {Random random = new Random();HashMap<Object, Object> hashMap = new HashMap<Object, Object>();// 生成随机数字并存入HashMapfor (int i = 0; i < list.size(); i++) {int number = random.nextInt(100) + 1;hashMap.put(number, i);}// 从HashMap导入数组Object[] robjs = hashMap.values().toArray();ArrayList r = new ArrayList();// 遍历数组并打印数据for (int i = 0; i < n; i++) {r.add(list.get((int) robjs[i]));System.out.print(list.get((int) robjs[i]) + "\t");}System.out.print("\n");return r;}
}

User实体类：(实现了简单的手机验证码登录+email邮箱登录)

package com.xialj.demoend.entity;import com.alibaba.druid.sql.visitor.functions.Insert;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import org.hibernate.validator.constraints.Length;import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Pattern;
import java.io.Serializable;
import java.text.SimpleDateFormat;
import java.util.Date;/*** @Author * @Date Created in  2023/2/24 13:07* @DESCRIPTION:   User 实体类* @Version V1.0*/@Data
public class User extends PageQuery implements Serializable {private static final long serialVersionUID = 1L;/*** id*/private String id;/*** 用户名*/private String username;/*** 密码*/private String password;/*** 昵称*/private String nickname;/*** 邮箱*/@ApiModelProperty(value = "联系人邮箱")@NotBlank(message = "邮箱不能为空", groups = {Insert.class})@NotNull(message = "邮箱不能为空", groups = {Insert.class})@Pattern(regexp = ".+@.+\\.com$", message = "Email格式不正确")private String email;/*** 电话*/@ApiModelProperty(value = "联系人电话")@NotBlank(message = "手机号码不能为空", groups = {Insert.class})@NotNull(message = "手机号不能为空", groups = {Insert.class})@Length(min = 11, max = 11, message = "手机号只能为11位")@Pattern(regexp = "^[1][3,4,5,6,7,8,9][0-9]{9}$", message = "手机号格式有误")private String phone;/*** 地址*/private String address;/*** 验证码*/private Integer code;/*** 创建时间*/@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")private Date createTime;/*** 头像*/private String avatarUrl;
}

MsmApiController：用来实现发送验证码的接口

package com.xialj.demoend.controller;import cn.hutool.extra.mail.MailUtil;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.xialj.demoend.common.Result;
import com.xialj.demoend.common.ResultCodeEnum;
import com.xialj.demoend.common.paramCommon;
import com.xialj.demoend.entity.User;
import com.xialj.demoend.service.MsmService;
import com.xialj.demoend.utils.JsonSerializer;
import com.xialj.demoend.utils.RandomUtil;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.util.StringUtils;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;import javax.mail.MessagingException;
import javax.validation.constraints.Email;
import java.util.Set;
import java.util.concurrent.TimeUnit;
/*** @Author xlj* @Date Created in  2023/2/23 17:25* @DESCRIPTION:  主要是为了实现邮箱发送验证码，以及手机发送验证码登录* @Version V1.0*/
@RestController
@RequestMapping("/api/msm")
@SuppressWarnings("ALL")
@Slf4j
@CrossOrigin
public class MsmApiController {@Autowiredprivate MsmService msmService;@Autowiredprivate RedisTemplate<String,String> redisTemplate;//将手机验证码存放到redis  中，并设置过期时间@ApiOperation(value = "发送手机验证码")@PostMapping("sendPhoneCode")public Result sendCode(@RequestBody(required = true) @Validated User user){String phoneNum = user.getPhone();// phone  作为redis  中的key,  code  作为redis  中的value值String code = redisTemplate.opsForValue().get(phoneNum);if (!StringUtils.isEmpty(code)) {//这里为什么从redis 拿取 验证码  我理解的是 ，因为redis 验证码我们给他设置了时间限制，所以在规定时间内，验证码//可以多次使用，一旦时间到期之后，我们就需要从新生成6位数的验证码了。return Result.ok(code);}//生成六位验证码code = RandomUtil.getSixBitRandom();//调用service 方法，整合阿里云短信服务进行发送Boolean isSend = msmService.send(phoneNum,code);//返回的Boolean 值进行判断 ，如果发送信息成功，即存入到redis 中,如果没有则提示验证码发送失败if (isSend) {//放到redis中规定时间内有效redisTemplate.opsForValue().set(phoneNum,code,1, TimeUnit.MINUTES);redisTemplate.setDefaultSerializer(new JsonSerializer<>());
//            redisTemplate.opsForValue().set(phoneNum,code);String codeMessage = redisTemplate.opsForValue().get(phoneNum);Set<String> allKeys = redisTemplate.keys("*");for (String key : allKeys) {System.out.println(key);System.out.println(key.getClass().getName());}log.info("当前存储的验证码为:{}",codeMessage);return Result.ok(code);} else {return Result.fail().message(paramCommon.FAIL_MESSAGE);}}
}

MsmServiceImpl实现类：

package com.hospital.service.impl;import com.alibaba.fastjson.JSONObject;
import com.aliyuncs.CommonRequest;
import com.aliyuncs.CommonResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.exceptions.ServerException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
import com.hospital.service.MsmService;
import com.hospital.utils.ConstantPropertiesUtils;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;import java.util.HashMap;
import java.util.Map;@Service
public class MsmServiceImpl implements MsmService {//根据手机号，存入验证码@Overridepublic Boolean send(String phone, String code) {//判断手机号是否为空if (StringUtils.isEmpty(phone)) {return false;}//整合阿里云的短信服务DefaultProfile profile = DefaultProfile.getProfile(ConstantPropertiesUtils.REGION_Id,ConstantPropertiesUtils.ACCESS_KEY_ID,ConstantPropertiesUtils.SECRECT);IAcsClient client = new DefaultAcsClient(profile);CommonRequest request = new CommonRequest();//request.setProtocol(ProtocolType.HTTPS);request.setMethod(MethodType.POST);request.setDomain("dysmsapi.aliyuncs.com");request.setVersion("2017-05-25");request.setAction("SendSms");
//        request.setSysAction();//手机号request.putQueryParameter("PhoneNumbers", phone);//签名名称request.putQueryParameter("SignName", "自己申请的短信签名");//模板coderequest.putQueryParameter("TemplateCode", "短信模板CODE");//验证码  使用json格式   {"code":"123456"}Map<String,Object> param = new HashMap();param.put("code",code);request.putQueryParameter("TemplateParam", JSONObject.toJSONString(param));//调用方法进行短信发送try {CommonResponse response = client.getCommonResponse(request);System.out.println(response.getData());return response.getHttpResponse().isSuccess();} catch (ServerException e) {e.printStackTrace();} catch (ClientException e) {e.printStackTrace();}return false;}
}

LoginController登录接口：(通过@Validated 对手机号，邮箱等参数进行校验)

package com.xialj.demoend.controller;import cn.hutool.core.util.StrUtil;
import com.xialj.demoend.common.Result;
import com.xialj.demoend.entity.User;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.util.StringUtils;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;
import java.math.BigInteger;
import java.util.Optional;
import java.util.function.Supplier;/*** @Author * @Date Created in  2023/3/18 14:30* @DESCRIPTION:* @Version V1.0*/
@RestController
@RequestMapping("/user/login")
@Slf4j
@CrossOrigin
public class LoginController {@Autowiredprivate RedisTemplate<String,String> redisTemplate;@ApiOperation("手机验证码登录接口")@PostMapping("/phoneCode")@SuppressWarnings("all")public Result phoneCodeLogin(@RequestBody @Validated User user) throws Throwable {Optional.ofNullable(user.getPhone()).orElseThrow((Supplier<Throwable>) () -> new RuntimeException("手机号码为null"));String phone = user.getPhone();log.info("当前获取的手机号为:{}",phone);//从redis中获取手机验证码String userPhoneKey = redisTemplate.opsForValue().get(phone);if (StringUtils.isEmpty(userPhoneKey)) {return Result.fail("手机验证码有误");}if (!userPhoneKey.equals(String.valueOf(user.getCode()))) {return Result.fail("手机验证码有误");}return Result.ok("登录成功");}
}

前端vue代码：

<template><div class="cont1" id="mainContainer" v-title data-title="若梦管理系统"><p class="tip">Click on button in image container</p><div class="cont" style="border-radius: 15px"><div class="form sign-in" style="line-height: 50px;"><h2 style="margin-top: 1px">后台管理系统</h2><el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"><el-form-item label="手机号" prop="phone" style="width: 50%;margin-left: 110px;margin-top: 80px"><el-input v-model.number="formData.phone" placeholder="请输入手机号" :maxlength="11" show-word-limitclearableprefix-icon='el-icon-mobile-phone' :style="{width: '200px'}"></el-input></el-form-item><el-form-item label="验证码" prop="yzm" style="width: 50%;margin-left: 110px;margin-top: 50px"><el-input v-model.number="formData.yzm" :maxlength="6" :minlength="6"clearable show-word-limitprefix-icon='el-icon-chat-round'oninput="value=value.replace(/[^0-9.]/g,'')":style="{width: '200px'}"><template #append ><el-button class="test" style="width: 5px;margin-right: 10px;text-align: center;background-color: inherit;"type="danger":disabled="remainingTime > 0"@click="startTimer">{{ remainingTime > 0 ? '('+remainingTime+'s)' : '获取' }}</el-button></template></el-input></el-form-item><el-form-item><el-button type="primary" :loading="loading" @click="submitForm('/manage/home')"class="submit">登录</el-button></el-form-item></el-form></div><div class="sub-cont"><div class="img"><div class="img__text m--up"><h2>第一次来?</h2><p>注册并发现大量的新机会!</p></div><div class="img__text m--in"><h2>加入我们 ?</h2><p>如果你已经有一个账户,只需登录即可 </p><span>We've missed you!</span></div><div class="img__btn"><span class="m--up">邮箱登录</span><span class="m--in">手机登录</span></div></div><div class="form sign-up" style="line-height: 50px"><h2>Time to feel like home</h2><el-form ref="elForm2" :model="formData" :rules="rules2" size="medium" label-width="100px"><el-form-item label="电子邮箱" prop="email" style="width: 50%;margin-left: 110px;margin-top: 80px"><el-input v-model="formData.email" placeholder="请输入邮箱" show-word-limit clearableprefix-icon='el-icon-message' :style="{width: '200px'}"></el-input></el-form-item><el-form-item label="验证码" prop="yzm2" style="width: 50%;margin-left: 110px;margin-top: 50px"><el-input v-model.number="formData.yzm2" :maxlength="6" :minlength="6"clearable show-word-limitprefix-icon='el-icon-chat-round'oninput="value=value.replace(/[^0-9.]/g,'')":style="{width: '200px'}"><template #append ><el-button class="test" style="width: 5px;margin-right: 10px;text-align: center;background-color: inherit;"type="danger":disabled="remainingTime > 0"@click="startTimer2">{{ remainingTime > 0 ? '('+remainingTime+'s)' : '获取' }}</el-button></template></el-input></el-form-item><el-form-item><el-button type="primary"  :loading="loading2" @click="submitForm2('/manage/home')"class="submit">登录</el-button></el-form-item></el-form></div></div></div></div>
</template><script>
import {sendPhoneCode, sendEmailCode,phoneLogin,emailLogin} from "@/api/login.js";
export default {name: 'login',props: {msg: String},data() {return {remainingTime: 0,loading: false,loading2:false,timer: null,formData: {pwd: '',phone: '',email: '',yzm: '',yzm2: ''},rules: {phone: [{required: true,message: '请输入手机号',trigger: 'change'}, {pattern: /^1(3|4|5|7|8|9)\d{9}$/,message: '手机号格式错误',trigger: 'blur'}],yzm: [{required: true, message: '验证码不能为空', trigger: 'change'},// {type: 'number', message: '验证码必须为数字', trigger: ['blur', 'change']}],},rules2: {email: [{required: true, message: '请输入邮箱地址', trigger: 'change'},{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}],yzm2: [{required: true, message: '验证码不能为空', trigger: 'change'},// {type: 'number', message: '验证码必须为数字', trigger: ['blur', 'change']}]},}},methods: {//手机号登录submitForm(path) {this.$refs['elForm'].validate(valid => {if (!valid) return// 显示loading 加载效果this.loading = true;const user = {phone:this.formData.phone,code: this.formData.yzm}this.timer = setTimeout(() => {phoneLogin(user).then( res=>{if (res.code == 200){this.$message({type: 'success',message: '登录成功!'})// 处理业务逻辑 以及发送请求this.$router.push(path)}else {this.$message({type: 'error',message: '登录失败!'});}}).finally((this.loading = false));}, 1000);})},//邮箱登录submitForm2(path) {this.$refs['elForm2'].validate(valid => {if (!valid) return// TODO 提交表单// 显示loading 加载效果this.loading2 = true;const user = {email:this.formData.email,code: this.formData.yzm2}this.timer = setTimeout(() => {// 处理业务逻辑 以及发送请求emailLogin(user).then(res=>{console.log(res)if (res.code == 200){this.$message({type: 'success',message: '登录成功!'})// 处理业务逻辑 以及发送请求this.$router.push(path)}else {this.$message({type:'error',message: '登录失败!'})}}).finally((this.loading2 = false));}, 1000);})},//发送手机验证码sendCode() {// TODO 提交表单let user ={phone:this.formData.phone}console.log(user)sendPhoneCode(user).then(res => {if (res.code == 200) {this.$message({type: 'success',message: '验证码发送成功!'})} else {this.$message({type: 'warning',message: '验证码发送失败!'});}})},startTimer() {this.$refs['elForm'].validateField('phone', valid => {if (valid) return// TODO 提交表单this.remainingTime = 60;this.sendCode()const timer = setInterval(() => {this.remainingTime--;if (this.remainingTime === 0) {clearInterval(timer);}}, 1000);})},startTimer2() {this.$refs['elForm2'].validateField('email', valid => {if (valid) return// TODO 提交表单this.remainingTime = 60;this.sendCodeTwo()const timer = setInterval(() => {this.remainingTime--;if (this.remainingTime === 0) {clearInterval(timer);}}, 1000);})},//发送邮箱验证码sendCodeTwo() {// TODO 提交表单let user ={email:this.formData.email}console.log(user)sendEmailCode(user).then(res => {if (res.code == 200) {this.$message({type: 'success',message: '验证码发送成功!'})} else {this.$message({type: 'warning',message: '验证码发送失败!'});}})},},mounted() {document.querySelector('.img__btn').addEventListener('click', function () {const contEl = document.querySelector('.cont');contEl.classList.toggle('s--signup');contEl.addEventListener('transitionend', function () {if (contEl.classList.contains('s--signup')) {contEl.querySelectorAll('input').forEach(inputEl => inputEl.value = '');}}, {once: true});});},beforeDestroy() {// eslint-disable-next-line no-irregular-whitespaceclearInterval(this.timer); // 清除定时器this.timer = null;},}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*, *:before, *:after {box-sizing: border-box;margin: 0;padding: 0;
}input, button {border: none;outline: none;background: none;font-family: "Open Sans", Helvetica, Arial, sans-serif;
}.tip {font-size: 20px;margin: 40px auto 50px;text-align: center;
}.cont1::before {content: '';position: fixed;background-color: #ededed;width: 100%;height: 100%;left: 0;top: 0;background-image: linear-gradient(to bottom right ,#d3dae9,#14c2c2)
}.cont {overflow: hidden;position: relative;width: 900px;height: 550px;margin: 0 auto 100px;background: #fff;
}.form {position: relative;width: 640px;height: 100%;transition: transform 1.2s ease-in-out;padding: 50px 30px 0;
}.sub-cont {overflow: hidden;position: absolute;left: 640px;top: 0;width: 900px;height: 100%;padding-left: 260px;background: #fff;transition: transform 1.2s ease-in-out;
}.cont.s--signup .sub-cont {transform: translate3d(-640px, 0, 0);
}button {display: block;margin: 0 auto;width: 260px;height: 36px;border-radius: 30px;color: #fff;font-size: 15px;cursor: pointer;
}.img {overflow: hidden;z-index: 2;position: absolute;left: 0;top: 0;width: 260px;height: 100%;padding-top: 360px;
}.img:before {content: "";position: absolute;right: 0;top: 0;width: 900px;height: 100%;background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg");background-size: cover;transition: transform 1.2s ease-in-out;
}.img:after {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);
}.cont.s--signup .img:before {transform: translate3d(640px, 0, 0);
}.img__text {z-index: 2;position: absolute;left: 0;top: 50px;width: 100%;padding: 0 20px;text-align: center;color: #fff;transition: transform 1.2s ease-in-out;
}.img__text h2 {margin-bottom: 10px;font-weight: normal;
}.img__text p {font-size: 14px;line-height: 1.5;
}.cont.s--signup .img__text.m--up {transform: translateX(520px);
}.img__text.m--in {transform: translateX(-520px);
}.cont.s--signup .img__text.m--in {transform: translateX(0);
}.img__btn {overflow: hidden;z-index: 2;position: relative;width: 100px;height: 36px;margin: 0 auto;background: transparent;color: #fff;text-transform: uppercase;font-size: 15px;cursor: pointer;
}.img__btn:after {content: "";z-index: 2;position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 2px solid #fff;border-radius: 30px;
}.img__btn span {position: absolute;left: 0;top: 0;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;transition: transform 1.2s;
}.img__btn span.m--in {transform: translateY(-72px);
}.cont.s--signup .img__btn span.m--in {transform: translateY(0);
}.cont.s--signup .img__btn span.m--up {transform: translateY(72px);
}h2 {width: 100%;font-size: 26px;text-align: center;
}label {display: block;width: 260px;margin: 25px auto 0;text-align: center;
}label span {font-size: 12px;color: #cfcfcf;text-transform: uppercase;
}input {display: block;width: 100%;margin-top: 5px;padding-bottom: 5px;font-size: 16px;border-bottom: 1px solid rgba(0, 0, 0, 0.4);text-align: center;
}.forgot-pass {margin-top: 15px;text-align: center;font-size: 12px;color: #cfcfcf;
}.submit {margin-top: 30px;margin-left: 50px;margin-bottom: 10px;background: #d4af7a;/*text-transform: uppercase;*/
}.style2 {margin-top: 10px;margin-right: 100px;margin-bottom: 10px;background: darkgrey;text-transform: uppercase;
}.fb-btn {border: 2px solid #d3dae9;color: #8fa1c7;
}.fb-btn span {font-weight: bold;color: #455a81;
}.sign-in {transition-timing-function: ease-out;
}.cont.s--signup .sign-in {transition-timing-function: ease-in-out;transition-duration: 1.2s;transform: translate3d(640px, 0, 0);
}.sign-up {transform: translate3d(-900px, 0, 0);
}.cont.s--signup .sign-up {transform: translate3d(0, 0, 0);
}.icon-link {position: absolute;left: 5px;bottom: 5px;width: 32px;
}.icon-link img {width: 100%;vertical-align: top;
}.icon-link--twitter {left: auto;right: 5px;
}
.test[disabled]:not(.is-loading) {opacity: 0.5;cursor: not-allowed;width: 5px;margin-right: 10px;text-align: center;
}</style>

页面效果图：

手机登录

邮箱登录

短信：