• 阿里云短信业务 登入功能 Gitee源码分享 vue3+springboot

    目录

    🚒登入功能展示🚒

    🛺项目代码介绍🛺

    🚗前端目录🚗

    🚓后端目录🚓

    🚔部分核心代码演示🚔

    🚘前端:登入页面🚘

    🚖后端 🚖

    🧰项目功能介绍🧰

    🚒登入功能展示🚒

    🛺项目代码介绍🛺

    🚗前端目录🚗

    🚓后端目录🚓

    🚔部分核心代码演示🚔

    🚘前端:登入页面🚘

    1. <script setup lang="ts">
    2. import { reactive } from 'vue';
    3. import { toSendMessage ,toCheckLogin} from './request/api';
    4.  
    5. //数据定义
    6. const data=reactive({
    7.   //提示框信息
    8.   content:"发送验证码",
    9.   //倒计时秒数
    10.   totalTime:60,
    11.   //输入电话号码
    12.   phoneNumber:"",
    13.   //输入验证码
    14.   code:"",
    15. })
    16. //请求发送验证码
    17. const toCountdown=()=>{
    18.   //发送验证码接口
    19.   toSendMessage(data.phoneNumber).then((res)=>{
    20.     console.log(res.data);
    21.   })
    22.   //点击倒计时
    23.   let clock =  window.setInterval(() => {
    24.                 data.content = data.totalTime + 's';
    25.                 data.totalTime --;
    26.                 if( data.totalTime < 0){
    27.                     data.totalTime = 60;
    28.                     data.content = "发送验证码";
    29.                     window.clearInterval(clock);
    30.                 }
    31.             }, 1000);
    32. }
    33. //用户登入
    34. const toLogin=()=>{
    35.   toCheckLogin(data.phoneNumber,data.code).then(res=>{
    36.     console.log(res.data);  
    37.   })
    38. }
    39. script>
    40.  
    41. <template>
    42.   <div class="login-bg">
    43.     <div class="content">
    44.       <div class="title">
    45.         <h2>LOGINh2>
    46.       div>
    47.       <div class="form-box">
    48.         <div class="login-center">
    49.           <span class="t-name">手机号：
    50.           ><input
    51.             type="text"
    52.             name=""
    53.             id="tel_num"
    54.             class="inp phone-inp"
    55.             placeholder="请输入您的手机号"
    56.             v-model="data.phoneNumber"
    57.           />
    58.         div>
    59.         <div class="login-center">
    60.           <span class="t-name">验证码：
    61.           ><input
    62.             type="text"
    63.             name=""
    64.             id="code_num"
    65.             class="inp code-inp"
    66.             v-model="data.code"
    67.             placeholder="请输入您的验证码"
    68.           />
    69.           <div class="get-code ">
    70.             
    71.             <span class="code-btn" :class="{ 'code-stop' : data.totalTime!=60}" @click="toCountdown">{{data.content}}span>
    72.           div>
    73.         div>
    74.         <div class="login-button" @click="toLogin">登陆div>
    75.       div>
    76.     div>
    77.   div>
    78. template>
    79.  
    80. <style lang="scss" scoped>
    81. .content {
    82.   position: absolute;
    83.   width: 500px;
    84.   height: 450px;
    85.   background-color: #00000060;
    86.   border-radius: 10px;
    87.   top: 50%;
    88.   left: 50%;
    89.   margin-left: -240px;
    90.   margin-top: -240px;
    91.   padding: 10px 20px;
    92.   box-sizing: border-box;
    93.   text-align: center;
    94. }
    95. .title h2 {
    96.   font-size: 45px;
    97.   line-height: 60px;
    98.   color: #ffffff90;
    99.   font-weight: bold;
    100.   text-align: center;
    101. }
    102. .login-center {
    103.   height: 50px;
    104.   border-radius: 5px;
    105.   border: 1px solid #00aced;
    106.   margin-bottom: 30px;
    107.   line-height: 50px;
    108.   padding: 0 10px;
    109.   box-sizing: border-box;
    110.   color: #fff;
    111.   input {
    112.     color: #fff;
    113.   }
    114. }
    115. .login-center .t-name {
    116.   font-size: 20px;
    117.   float: left;
    118.   height: 100%;
    119.   width: 85px;
    120. }
    121. .login-center .inp {
    122.   font-size: 24px;
    123.   float: left;
    124.   border: none;
    125.   background: transparent;
    126.   height: 100%;
    127.   outline: none;
    128. }
    129. .login-center .inp.code-inp {
    130.   width: 220px;
    131. }
    132. .login-center .get-code {
    133.   float: right;
    134.   width: 100px;
    135.   height: 100%;
    136. }
    137. .login-center .get-code .code-btn {
    138.   color: gold;
    139.   font-size: 16px;
    140.   width: 100%;
    141.   border: 1px solid gold;
    142.   border-radius: 5px;
    143.   padding: 5px;
    144.   box-sizing: border-box;
    145.   cursor: pointer;
    146. }
    147. .code-stop{
    148.   //禁止点击
    149.    pointer-events: none; 
    150. }
    151. .login-button {
    152.   background-image: linear-gradient(to right, #30cfd0, #330867);
    153.   height: 50px;
    154.   border-radius: 5px;
    155.   font-size: 18px;
    156.   color: #fff;
    157.   text-align: center;
    158.   line-height: 50px;
    159.   cursor: pointer;
    160. }
    161. style>

    🚖后端 🚖

    1. /**
    2.  * @Description 用户接口实现
    3.  * @Author 小乌龟
    4.  * @Date 2022/9/14 9:50
    5.  */
    6. @Service
    7. public class UserServiceImpl implements UserService {
    8.     @Resource
    9.     private RedisTemplate redisTemplate;
    10.  
    11.     @Override
    12.     public String toSendMessage(String phoneNumber) {
    13.         //扩展 可以验证该电话号码是否注册
    14.         //1.判定验证码是否过期
    15.         String code = redisTemplate.opsForValue().get(phoneNumber);
    16.         if (!StringUtils.isEmpty(code)){
    17.             return phoneNumber+":"+"验证码未过期";
    18.         }
    19.         //2.已过期/无验证码 生成验证码
    20.         //随机生成字符串 做验证码
    21.         int toCode = (int) (Math.random() * (50000 - 40000) + 40000);
    22.         code=Integer.toString(toCode);
    23.         String toSendMes = SmsUtil.toSendMes(phoneNumber, code);
    24.         if (Constant.OK.equals(toSendMes)){
    25.             //redis 中存放 5分钟过期
    26.             redisTemplate.opsForValue().set(phoneNumber,code,Constant.NUM_FIVE, TimeUnit.MINUTES);
    27.             //3.发送短信
    28.             return "短信发送成功";
    29.         }
    30.       return "短信发送异常";
    31.     }
    32.  
    33.     @Override
    34.     public String checkLogin(String phoneNumber, String code) {
    35.         //1.redis 验证码校验
    36.         String redisCode = redisTemplate.opsForValue().get(phoneNumber);
    37.         if (code.equals(redisCode)){
    38.             return "登入成功";
    39.         }
    40.         return "登入失败";
    41.     }
    42. }

    🏀项目jar包🏀

    2.         
    3.             org.springframework.boot
    4.             spring-boot-starter-web
    5.         
    6.         
    7.         
    8.             com.aliyun
    9.             aliyun-java-sdk-core
    10.             4.6.0
    11.         
    12.         
    13.             com.aliyun
    14.             aliyun-java-sdk-dysmsapi
    15.             1.1.0
    16.         
    17.         
    18.         
    19.             com.alibaba
    20.             fastjson
    21.             1.2.76
    22.         
    23.         
    24.         
    25.             org.springframework.boot
    26.             spring-boot-starter-data-redis
    27.         
    28.         
    29.             org.projectlombok
    30.             lombok
    31.             true
    32.         
    33.         
    34.             org.springframework.boot
    35.             spring-boot-starter-test
    36.             test
    37.         
    38.

    🏐redis配置🏐

    1. /**
    2.  * @author 小乌龟 redis配置
    3.  */
    4. @Configuration
    5. public class RedisConfig extends CachingConfigurerSupport {
    6.  
    7.     //操纵缓存的模板
    8.     @Bean
    9.     @SuppressWarnings("all")
    10.     @ConditionalOnMissingBean(name = "redisTemplate")
    11.     public RedisTemplate redisTemplate(RedisConnectionFactory factory) {
    12.         RedisTemplate template = new RedisTemplate();
    13.         template.setConnectionFactory(factory);
    14.         // Json序列化配置
    15.         Jackson2JsonRedisSerializer jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer(Object.class);
    16.         ObjectMapper om = new ObjectMapper();
    17.         //日期格式化
    18.         om.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
    19.         // 日期序列化处理
    20.         om.disable(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS);
    21.         om.registerModule(new Jdk8Module())
    22.                 .registerModule(new JavaTimeModule())
    23.                 .registerModule(new ParameterNamesModule());
    24.         om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
    25.         om.activateDefaultTyping(LaissezFaireSubTypeValidator.instance, ObjectMapper.DefaultTyping.NON_FINAL, JsonTypeInfo.As.WRAPPER_ARRAY);
    26.         jackson2JsonRedisSerializer.setObjectMapper(om);
    27.         // String 的序列化
    28.         StringRedisSerializer stringRedisSerializer = new StringRedisSerializer();
    29.         // key采用String的序列化方式
    30.         template.setKeySerializer(stringRedisSerializer);
    31.         // hash的key也采用String的序列化方式
    32.         template.setHashKeySerializer(stringRedisSerializer);
    33.         // value序列化方式采用jackson
    34.         template.setValueSerializer(jackson2JsonRedisSerializer);
    35.         // hash的value序列化方式采用jackson
    36.         template.setHashValueSerializer(jackson2JsonRedisSerializer);
    37.         //将默认的序列化方式改成StringRedisSerializer
    38.         template.setDefaultSerializer(stringRedisSerializer);
    39.         template.afterPropertiesSet();
    40.         return template;
    41.     }
    42.  
    43. }

    🧰项目功能介绍🧰

    🥰短信登入功能实现🥰

         🍳前端 vue3+axios🍳      

    🥨 后端 springboot+redis🥨

    🥐项目精简 不引入过多框架🥐

    🌯登入功能实现🌯

    🥙具体功能演示🥙

    🍵B站视频🍵

    🐎源码的分享🐎

    🦌视频简介中🦌

    🦬前后端gitee🦬

    🫖感谢大家的三连支持🫖

     

  • 相关阅读:
    9步打造个人ip
    picoctf_2018_got_shell
    分享下我的tmux配置
    Python武器库开发-flask篇之URL重定向(二十三)
    keepalived+nginx高可用 脑裂监控
    ABAP SLG1/SLG0 应用日志 自己封装类 记录
    【UE】刀光粒子效果——part1
    XML外部实体漏洞 (XXE)简介
    软信天成：如何做好数据治理？这三点必不可少
    在Ubuntu系统上实现免费电脑IP更改
  • 原文地址：https://blog.csdn.net/Little___Turtle/article/details/126896823