<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);
