若依加入手机号注册功能（ruoyi-vue + aliyun sms）

已于 2024-08-12 09:20:56 修改
阅读量408 收藏 8
点赞数 3
分类专栏： ruoyi 文章标签： vue.js ruoyi spring boot java
于 2024-08-08 17:25:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46503594/article/details/141031086
版权

ruoyi-vue添加手机号验证码注册功能

1.  在阿里云中开通sms并申请签名模板

申请模板通过后在控制台中得到以下信息并添加进ruoyi-admin/resource/application.yml中：

aliSms:
  accessKeyId: ***  # 阿里云 accessKeyId
  accessKeySecret: ***  # 阿里云 accessKeySecret
  signName: ***    # 模板对应的签名名称
  templateCode: ***   # 使用的模板Code

2. 编写短信验证码发送工具

在ruoyi-framework下

2.1 添加依赖

<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.78</version>
</dependency>

<dependency>
  <groupId>com.aliyun.oss</groupId>
  <artifactId>aliyun-sdk-oss</artifactId>
  <version>3.18.1</version>
</dependency>

2.2 创建SmsVerificationUtils

package com.ruoyi.framework.sms;
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.http.ProtocolType;
import com.aliyuncs.profile.DefaultProfile;
import com.ruoyi.common.core.redis.RedisCache;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;

import org.springframework.stereotype.Component;

import java.util.Random;
import java.util.concurrent.TimeUnit;

/**
 * 短信验证码发送工具
 */
@Component
public class SmsVerificationUtils {

    private static final Logger log = LoggerFactory.getLogger(SmsVerificationUtils.class);
    /**
     * 阿里云 accessKeyId
     */
    @Value("${aliSms.accessKeyId}")
    private String accessKeyId;

    /**
     * 阿里云 secret
     */
    @Value("${aliSms.accessKeySecret}")
    private String accessKeySecret;

    /**
     * 阿里云签名
     */
    @Value("${aliSms.signName}")
    private String signName;

    /**
     * 阿里云短信模板Code
     */
    @Value("${aliSms.templateCode}")
    private String templateCode;


    @Autowired
    private RedisCache redisCache;

    /**
     * 从Redis中根据手机号获取验证码
     *
     * @param key 手机号
     * @return 返回获取的验证码
     */
    public String get(String key) {
        Object code = redisCache.getCacheObject(key);
        if (code != null) {
            return redisCache.getCacheObject(key).toString();
        }
        return null;
    }

    /**
     * 删除Redis中的验证码
     *
     * @param key 手机号
     */
    public void delete(String key) {
        redisCache.deleteObject(key);
    }


    /**
     * 发送短信手机短信验证码
     *
     * @param phoneNum 手机号
     * @return 返回发送状态
     */
    public String send(String phoneNum) {

        DefaultProfile profile = DefaultProfile.getProfile("default", accessKeyId, accessKeySecret);
        IAcsClient client = new DefaultAcsClient(profile);
        Random random = new Random();
        String randomNumber = String.valueOf(100000 + random.nextInt(900000));
        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.putQueryParameter("RegionId", "cn-guangzhou");
        request.putQueryParameter("PhoneNumbers", phoneNum);
        request.putQueryParameter("SignName", signName);
        request.putQueryParameter("TemplateCode", templateCode);
        request.putQueryParameter("TemplateParam", "{\"code\": " + randomNumber + "}");

        try {

            System.out.println("生成6位验证码为：【" + randomNumber + "】");
            // 将验证码放入Redis缓存中  有效时间为5分钟
            redisCache.setCacheObject(phoneNum, randomNumber, 5, TimeUnit.MINUTES);

            CommonResponse response = client.getCommonResponse(request);
            String data = response.getData();
            return JSONObject.parseObject(data).getString("Message");
        }
        catch (ServerException e) {
            e.printStackTrace();
            return null;
        }
        catch (ClientException e) {
            e.printStackTrace();
            return null;
        }

    }

}

3. 修改注册逻辑

3.1 修改SysRegisterController

添加发送短信验证码接口

    @Autowired
    private SmsVerificationUtils smsVerificationUtils;

    /**
     *  发送验证码
     * @param phoneNumber 手机号
     * @return 返回发送状态
     */
    @GetMapping("/sendVerificationCode")
    public AjaxResult send(@RequestParam("phoneNumber") String phoneNumber) {
        String send = smsVerificationUtils.send(phoneNumber);
        if ("OK".equals(send)) {
            return AjaxResult.success();
        }
        return AjaxResult.error("短信验证码发送失败", send);
    }

3.2 开放发送验证码接口权限

 

 3.3 修改LoginBody实体类

package com.ruoyi.common.core.domain.model;

/**
 * 用户登录对象
 * 
 * @author ruoyi
 */
public class LoginBody
{
    /**
     * 用户名
     */
    private String username;

    /**
     * 用户密码
     */
    private String password;

    /**
     * 手机号
     */
    private String phonenumber;

    /**
     * 验证码
     */
    private String code;

    /**
     * 唯一标识
     */
    private String uuid;

    public String getPhonenumber() {
        return phonenumber;
    }

    public void setPhonenumber(String phonenumber) {
        this.phonenumber = phonenumber;
    }

    public String getUsername()
    {
        return username;
    }

    public void setUsername(String username)
    {
        this.username = username;
    }

    public String getPassword()
    {
        return password;
    }

    public void setPassword(String password)
    {
        this.password = password;
    }

    public String getCode()
    {
        return code;
    }

    public void setCode(String code)
    {
        this.code = code;
    }

    public String getUuid()
    {
        return uuid;
    }

    public void setUuid(String uuid)
    {
        this.uuid = uuid;
    }
}

 在其中添加了phonenumber属性

3.4 修改SysUserServiceImpl

修改校验手机号是否唯一的方法

3.5 修改SysRegisterService

package com.ruoyi.framework.web.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import com.ruoyi.common.constant.CacheConstants;
import com.ruoyi.common.constant.Constants;
import com.ruoyi.common.constant.UserConstants;
import com.ruoyi.common.core.domain.entity.SysUser;
import com.ruoyi.common.core.domain.model.RegisterBody;
import com.ruoyi.common.core.redis.RedisCache;
import com.ruoyi.common.exception.user.CaptchaException;
import com.ruoyi.common.exception.user.CaptchaExpireException;
import com.ruoyi.common.utils.MessageUtils;
import com.ruoyi.common.utils.SecurityUtils;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.framework.manager.AsyncManager;
import com.ruoyi.framework.manager.factory.AsyncFactory;
import com.ruoyi.system.service.ISysConfigService;
import com.ruoyi.system.service.ISysUserService;

/**
 * 注册校验方法
 * 
 * @author ruoyi
 */
@Component
public class SysRegisterService
{
    @Autowired
    private ISysUserService userService;

    @Autowired
    private ISysConfigService configService;

    @Autowired
    private RedisCache redisCache;

    /**
     * 注册
     */
    public String register(RegisterBody registerBody)
    {
        String msg = "", username = registerBody.getUsername(), password = registerBody.getPassword();
        SysUser sysUser = new SysUser();
        sysUser.setUserName(username);
        String phonenumber = registerBody.getPhonenumber();
        sysUser.setPhonenumber(phonenumber);
        String check = codeCheck(phonenumber, registerBody.getCode());

        if (StringUtils.isEmpty(username))
        {
            msg = "用户名不能为空";
        }
        else if (StringUtils.isEmpty(password))
        {
            msg = "用户密码不能为空";
        }
        else if (username.length() < UserConstants.USERNAME_MIN_LENGTH
                || username.length() > UserConstants.USERNAME_MAX_LENGTH)
        {
            msg = "账户长度必须在2到20个字符之间";
        }
        else if (password.length() < UserConstants.PASSWORD_MIN_LENGTH
                || password.length() > UserConstants.PASSWORD_MAX_LENGTH)
        {
            msg = "密码长度必须在5到20个字符之间";
        }
        else if (!check.equals("success"))
        {
            msg = check;
        }
        else if (!userService.checkPhoneUnique(sysUser))
        {
            msg = "该手机号已被注册";
        }
        else
        {
            redisCache.deleteObject(phonenumber);
            sysUser.setNickName(username);
            sysUser.setPassword(SecurityUtils.encryptPassword(password));
            boolean regFlag = userService.registerUser(sysUser);
            if (!regFlag)
            {
                msg = "注册失败,请联系系统管理人员";
            }
            else
            {
                AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.REGISTER, MessageUtils.message("user.register.success")));
            }
        }
        return msg;
    }

    /**
     * 验证码校验
     * @param phonenumber 手机号
     * @param code 验证码
     * @return
     */
    public String codeCheck(String phonenumber, String code){
        Boolean bool = redisCache.hasKey(phonenumber);
        if (bool != null && bool) {
            String redisCode = redisCache.getCacheObject(phonenumber);
            if (redisCode.equals(code)){
                return "success";
            }else {
                return "验证码不匹配";
            }
        }else {
            return "验证码已过期";
        }
    }

    /**
     * 校验验证码
     * 
     * @param username 用户名
     * @param code 验证码
     * @param uuid 唯一标识
     * @return 结果
     */
    public void validateCaptcha(String username, String code, String uuid)
    {
        String verifyKey = CacheConstants.CAPTCHA_CODE_KEY + StringUtils.nvl(uuid, "");
        String captcha = redisCache.getCacheObject(verifyKey);
        redisCache.deleteObject(verifyKey);
        if (captcha == null)
        {
            throw new CaptchaExpireException();
        }
        if (!code.equalsIgnoreCase(captcha))
        {
            throw new CaptchaException();
        }
    }
}

 4. 前端修改

 在api/login.js下添加接口

// 发送验证码
export function sendCode(phoneNumber) {
  return request({
    url: '/sendVerificationCode?phoneNumber=' + phoneNumber,
    headers: {
      isToken: false
    },
    method: 'get'
  })
}

在login.vue登录页面中打开注册开关

修改register.vue注册页面

<template>
  <div class="register">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
      <h3 class="title">自由人后台管理系统</h3>
      <el-form-item prop="username">
        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="registerForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input
          v-model="registerForm.confirmPassword"
          type="password"
          auto-complete="off"
          placeholder="确认密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="phonenumber">
        <el-input
          v-model="registerForm.phonenumber"
          auto-complete="off"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          v-model="registerForm.code"
          auto-complete="off"
          placeholder="请输入验证码"
          style="width: 63%"
        />
        <div class="register-code">
          <el-button @click="send" :disabled="exTime !== 60">{{exText}}</el-button>
        </div>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleRegister"
        >
          <span v-if="!loading">注 册</span>
          <span v-else>注 册 中...</span>
        </el-button>
        <div style="float: right;">
          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
        </div>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-register-footer">
      <span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
import { getCodeImg, register, sendCode } from "@/api/login";

export default {
  name: "Register",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      codeUrl: "",
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: "",
        uuid: "",
        phonenumber: ""
      },
      registerRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
          { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      captchaEnabled: true,
      exText: '发送验证码',
      exTime: 60,
      timerId: null
    };
  },
  created() {
    //this.getCode();
  },
  methods: {
    send() {
      const telCheck = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (this.registerForm.phonenumber != null && telCheck.test(this.registerForm.phonenumber)) {
        this.countDown();
        sendCode(this.registerForm.phonenumber).then(res => {
          if (res.code === 200) {
            this.$message.success("短信发送成功！");
          }
          console.log(res);
        })
      }else {
          this.$message.error("手机号输入不正确！");
      }
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.registerForm.uuid = res.uuid;
        }
      });
    },
    countDown() {
      this.timerId = setInterval(() => {
        this.exTime--;
      }, 1000);
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          register(this.registerForm).then(res => {
            const username = this.registerForm.username;
            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.push("/login");
            }).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          })
        }
      });
    }
  },
  watch: {
    exTime: {
      handler(val) {
        if (val === 60 || val === 0) {
          if (this.timerId) clearInterval(this.timerId);
          this.exText = "发送验证码";
          this.exTime = 60;
        }else {
          this.exText = val + "秒后重试";
        }
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #1f2d3d;
  //background-image: url("../assets/images/login-background.jpg");
  //background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 38px;
}
</style>

5. 开放系统注册功能

在数据库中找到sys_config表并将config_value改为true

完结下机！ 

JokerPan12
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
若依添加手机号验证
m0_73429984的博客
07-04 1943
对若依添加手机短信验证进行讲解
RuoYi-Vue-Plus 是重写 RuoYi-Vue
03-07
由于这次升级是彻底的重构，因此它并不兼容 RuoYi-Vue 的原有功能，用户在迁移时需要注意这一点。 1. **Vue.js 框架的应用**： Vue.js 是一个轻量级的前端框架，以其简洁的API和高效的虚拟DOM著称。RuoYi-Vue-Plus...
若依实现第三方登录通用方法——手机号登录测试(思路可复用）
omnipotent_wang的博客
04-25 3397
若依实现第三方登录通用方法——手机号登录测试(思路可复用）
ruoyi 前后端分离 增加手机号登录
qq_29384639的博客
11-28 2380
ruoyi增加手机号登录
若依框架--开启注册功能
m0_52927044的博客
06-27 516
若前台显示系统接口500异常，需要在IDEA中重新编译运行代码。也可登陆后在系统管理中修改。
【前端必备技能java之若依框架认证(登录注册)模块梳理】
leleshuo
02-04 2549
必备技能java系列梳理的文章并不涉及造轮子，以若依框架为基础，分析微服务Spring Cloud的能力，并理清微服务在业务处理上搭建的应用层架构，不会追问技术实践的底层细节，目标是可以让有后端经验的非java相关的程序员可以使用Spring Cloud搭建属于自己的后端服务。
05 【若依框架解读】登录认证JWTtoken验证机制
热门推荐
kouryoushine的博客
12-06 2万+
背景 今天讲下若依框架对于登录认证方面的实现，这个方面若依做的不算太好，如果项目中想用的话需要参考其他框架的实现，做的更好一些。 我建议是前后端放在一起来看，单纯看后端会比较无趣。 后端部分 /login 接口 userName password code 验证码 前端获取上面三个要素后调用接口，整体改接口做了下面几件事情 验证用户身份（账号密码+验证码） 生成token 保存用户登录态到spring security中 安全配置：定义了基本的配置信息 framework.config.Securi
RUOYI集成手机短信登录
小米队长的博客
06-12 1068
通过实现不同的provider可以实现不同的登录验证方式，例如邮箱登录验证和扫码登录验证等。不同的provider需要实现对应的token类，将认证信息传递到security组件中，provider的实现类中实现对认证信息的校验。UserDetailsService接口的实现类，用来查询用户在系统中的信息，一些数据状态的验证可以在此接口的实现类中实现验证逻辑。
若依ruoyi ruoyi-vue ruoyi-cloud 微服务全网最全视频教程网盘资源
12-25
若依ruoyi ，ruoyi-vue， ruoyi-cloud， 微服务全网最全视频教程网盘资源 若依框架系列视频教程(RuoVi-Vue前后端分高版本) 01 项目概述,mp4 02 项目运行,mp4 03 构建发布到 RuoYi-Cloud 微服务版本视频课程目录 ├...
RuoYi-Vue-Plus 是重写 RuoYi-Vue 针对 分布式集群与多租户 场景全方位升级(不兼容原框架)
06-02
在分布式集群场景下，RuoYi-Vue-Plus 引入了服务发现和负载均衡机制，如使用 Consul 或 Eureka 进行服务注册与发现，Nginx 或者 Ribbon 进行负载均衡。这样的设计确保了系统的可扩展性和容错性，可以处理大量并发...
ruoyi-plus:RuoYi-plus开源后台管理系统（包含API接口服务）由java开发基于SpringBoot2.x，springcloud G的全新版本，架构更清晰，代码更整洁，页面更美观，非常适用于公司管理平台旧版本升级，新平台搭建快速整合，也是接私活利器，同时提供API接口服务（供APP，微端，h5等使用）
03-22
若一加 数据库脚本请加QQ群，在群文件下载。 【技术支持群】687672649 【技术交流群】751872263 通知！！！ RuoYi-plusv2.0版本重磅上线，该版本不在单一单一的后台管理框架，重点打造RuoYi-plus管理平台生态圈，增加API接口服务（供APP，微端，h5等使用），API接口服务概述： API接口服务与smp管理平台完全分离，只依赖通用dbean模块和统一父类。 服务提供者负责DB交互通用dbean模块。 服务消费者负对外开放包括APP，微端，h5等，不负责任的业务逻辑处理（后期增加【验签】保证API接口服务的安全性）。 API接口服务使用Eureka为注册中心，消费者负载使用Feign并使用Hystrix熔断器。 介绍 RuoYi-plus开源后台管理系统由java开发基于SpringBoot2.x，springcloud G的全新版本，架构更清晰，
若依框架ruoyi-vue-master(vue2版)
09-10
"若依框架ruoyi-vue-master(vue2版)"是一个基于Vue.js 2.x的前端框架，专门用于快速开发企业级Web应用。这个框架集成了多种功能和组件，为开发者提供了一站式的解决方案，旨在提升开发效率和代码质量。在软件架构...
RuoYi-Vue-fast-master_ruoyi项目_vuefast_若依前后端分离项目_
10-03
"RuoYi-Vue-fast-master" 是一个基于Vue.js框架的开源项目，名为"若依前后端分离项目"，其核心目标是提供一个高效、快速的开发环境，用于构建现代Web应用程序。该项目采用了Vue.js的最新版本，结合了现代化的前端...
对接阿里云短信服务
m0_49682301的博客
10-29 191
对接阿里云短信 对接阿里云短信的业务因为官方封装比较完整，整个需求做起来非常简单，就是照着一步一步的做就可以，然后复制下来代码改几个字段就可以； 直接引用链接地址 https://blog.csdn.net/qq_38225558/article/details/84954935 一步步做就可以非常简单 ...
【Ruoyi第三方登录】对Ruoyi添加手机登录和邮箱登录的功能
qq_63884430的博客
01-28 3701
对otherLoadUser(String username,int num)重载UserDetailsServiceImpl类的loadUserByUsername方法，通过设定开关值num使邮箱手机号这些无密码登录的方式不检验密码。实际上你会发现，principal就是username，credentials就是password，所以对于不需要密码登录的方式简单的不用credentials就行了吗？最后再把若依的SecurityConfig的白名单加上我们的接口路径就行了。
ruoyi源码学习-3 登录后端接口
tiandi0123的博客
07-19 2904
前言 经过之前两期，我们理解了ruoyi前端登录页面的流程。这期，我们开始分析后端对应的流程。主要分析获取验证码接口captchaImage和登录接口login。 若依后端结构 首先我们看一下ruoyi后端的模块组成。 admin——web服务入口 common——通用工具 framework——核心模块 generator——代码生成 quartz——定时任务 system——系统模块 ruoyi后端中是将controller文件统一放入admin模块中。 验证码接口 对应文件位置为ruoyi-ad.
11.动态标签页的一些优化和bug的解决
最新发布
qq_55121347的博客
08-16 300
动态标签页的一些优化和bug的解决
详细介绍 Vue3 的 watch 和 watchEffect
weixin_52648900的博客
08-15 974
非常详细介绍了vue3的watch和watchEffect区别和联系
若依ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码
02-01
ruoyi-vue3 是一个基于Vue3框架的后台管理系统快速开发模板，可以集成各种功能插件来增强系统的安全性和用户体验。要实现滑块、文字点选验证码，可以使用aj-captcha这个验证码插件。 aj-captcha是一个支持滑块、文字点选等多种验证码形式的验证码组件，可以与ruoyi-vue3很好地集成在一起。首先，我们需要在ruoyi-vue3的项目中引入aj-captcha的相关依赖，并注册它为Vue的全局组件。 接下来，在需要展示验证码的地方，我们可以直接使用aj-captcha组件，根据需要配置滑块或者文字点选的验证码形式。通过aj-captcha提供的参数和事件，我们可以自定义验证码的样式、验证规则和验证成功后的操作逻辑。 在后端方面，我们还需要编写相应的接口来处理验证码的验证请求，并在用户登录、注册等关键操作时加入验证码验证的逻辑。 通过这样的操作，就可以在ruoyi-vue3项目中集成aj-captcha实现滑块、文字点选验证码功能。这样可以有效防止恶意机器人的攻击，提高系统的安全性，同时也能提供更友好的验证码体验给用户，增强系统的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值