大数据发送验证码前后端编写 前端使用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);