大数据发送验证码前后端编写 前端使用Vue

<script src="js/vue.min.js"></script>

<script src="js/index.js"></script>

<script src="js/echarts.min.js"></script>

<script src="js/axios.min.js"></script>

<link rel="stylesheet" href="css/index.css">

vue的框架

我使用的是Element的组件  组件 | Element

<div id="app">

   <el-form ref="form"  label-width="80px">

       <el-form-item label="手机号">

           <el-input v-model="phone"></el-input>

       </el-form-item>

       <el-form-item label="验证码">

           <el-input v-model="code"></el-input>

           <el-button type="success" @click="sendCode()" >发动验证码</el-button>

       </el-form-item>

       <el-form-item>

           <el-button type="primary" @click="">立即创建</el-button>

       </el-form-item>

   </el-form>

</div>

<script>

   new Vue({

       el:"#app",

       data:{

           phone:'',

           code:''

       },

       created(){},

       methods:{

           sendCode(){

               axios.get('user/sendCode',{params: {phone: this.phone}}).then(res=>{

                   this.$message(res.data.message)

               })

           }

       }

   })

</script>

前端页面

后端使用的是SpringMvc  + springBoot技术

注入Redis

@Autowired

RedisTemplate<String,String> redisTemplate;

String s = RandomUtil.randomNumbers(6);//生成四位数验证码

System.out.println("手机号:"+phone+",验证码："+s);//后端打印一下

redisTemplate.opsForValue().set(phone,s);//将数据存入到Reduis中

一般公司会设置一下5分钟有效所以要在Redis中设置一个销毁时间

redisTemplate.opsForValue().set(phone,s,5, TimeUnit.MINUTES);