SpringBoot构建电商基础秒杀项目 学习笔记

BaseController 添加

public static final String CONTENT_TYPE_FORMED = "application/x-www-form-urlencoded";

UserController 添加

需添加 @CrossOrigin 注解，解决跨域问题

    @Autowired

    private HttpServletRequest httpServletRequest;

    @RequestMapping(value = "/getotp", method = {RequestMethod.POST}, consumes = {CONTENT_TYPE_FORMED})

    @ResponseBody

    public CommonReturnType getOtp(@RequestParam(name="telphone") String telphone){

        // 生成 otp 验证码

        Random random = new Random();

        int randomInt = random.nextInt(99999);

        randomInt += 10000;

        String otpCode = String.valueOf(randomInt);

        // 将 otp 验证码同对应的用户关联 (暂时使用 httpsession 的方式绑定 otp 与手机号)

        httpServletRequest.getSession().setAttribute(telphone, otpCode);

        // 将 otp 验证码通过短信通道发送给用户 (省略，使用控制台输出代替)

        System.out.println(String.format("telphone = %s & otpCode = %s", telphone, otpCode));

        return CommonReturnType.create(null);

    }

新增 getotp 页面

<html>

    <head>

        <meta charset="UTF-8">

        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    </head>

    <body>

        <div id="app">

            <el-row>

                <el-col :span="8" :offset="8">

                    <h3>获取 otp 信息</h3>

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

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

                            <el-input v-model="form.telphone"></el-input>

                        </el-form-item>

                        <el-form-item>

                            <el-button type="primary" @click="onSubmit">获取 otp 短信</el-button>

                        </el-form-item>

                    </el-form>

                </el-col>

            </el-row>

        </div>

    </body>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>

        var app = new Vue({

            el: '#app',

            data: {

                form: {

                    telphone: '',

                }

            },

            methods: {

                onSubmit(){

                    if(this.form.telphone == null || this.form.telphone == ''){

                        console.log('手机号不能为空');

                        return;

                    }

                    // https://www.cnblogs.com/yesyes/p/8432101.html

                    axios({

                        method: 'post',

                        url: 'http://localhost:8080/user/getotp',

                        data: this.form,

                        params: this.form,

                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}

                    })

                    .then(resp=>{

                        if(resp.data.status == 'success'){

                            this.$message({

                                message: 'otp 已经发送到了您的手机上，请注意查收',

                                type: 'success'

                            });

                        }else{

                            this.$message.error('otp 发送失败，原因为：' + resp.data.data.errMsg);

                        }

                    })

                    .catch(err =>{

                        console.log();

                        this.$message.error('otp 发送失败，原因为：' + err.status + ', ' + err.statusText);

                    });

                },

            },

        });

    </script>

</html>

源码：spring-boot-seckill

Spring Boot 构建电商基础秒杀项目 (四) getotp 页面的更多相关文章

  1. Spring Boot 构建电商基础秒杀项目 (一) 项目搭建

    SpringBoot构建电商基础秒杀项目 学习笔记 Spring Boot 其实不是什么新的框架,它默认配置了很多框架的使用方式,就像 maven 整合了所有的 jar 包, Spring Boot ...

  2. Spring Boot 构建电商基础秒杀项目 (十二) 总结 (完结)

    SpringBoot构建电商基础秒杀项目 学习笔记 系统架构 存在问题 如何发现容量问题 如何使得系统水平扩展 查询效率低下 活动开始前页面被疯狂刷新 库存行锁问题 下单操作步骤多,缓慢 浪涌流量如何 ...

  3. Spring Boot 构建电商基础秒杀项目 (十一) 秒杀

    SpringBoot构建电商基础秒杀项目 学习笔记 新建表 create table if not exists promo ( id int not null auto_increment, pro ...

  4. Spring Boot 构建电商基础秒杀项目 (十) 交易下单

    SpringBoot构建电商基础秒杀项目 学习笔记 新建表 create table if not exists order_info ( id varchar(32) not null defaul ...

  5. Spring Boot 构建电商基础秒杀项目 (九) 商品列表 & 详情

    SpringBoot构建电商基础秒杀项目 学习笔记 ItemDOMapper.xml 添加 <select id="listItem" resultMap="Bas ...

  6. Spring Boot 构建电商基础秒杀项目 (八) 商品创建

    SpringBoot构建电商基础秒杀项目 学习笔记 新建数据表 create table if not exists item ( id int not null auto_increment, ti ...

  7. Spring Boot 构建电商基础秒杀项目 (七) 自动校验

    SpringBoot构建电商基础秒杀项目 学习笔记 修改 UserModel 添加注解 public class UserModel { private Integer id; @NotBlank(m ...

  8. Spring Boot 构建电商基础秒杀项目 (六) 用户登陆

    SpringBoot构建电商基础秒杀项目 学习笔记 userDOMapper.xml 添加 <select id="selectByTelphone" resultMap=& ...

  9. Spring Boot 构建电商基础秒杀项目 (五) 用户注册

    SpringBoot构建电商基础秒杀项目 学习笔记 UserService 添加 void register(UserModel userModel) throws BusinessException ...

随机推荐

  1. echart自定义浮窗 增加点击事件

    一:情景 做一个柱状图,需要在柱状图显示lable,并且浮窗上每个条目可以被点击或者跳转. 我使用的做图插件是echarts,但是echart的浮窗是图片,而且不可以被点击,不能识别html,而且这个 ...

  2. Spring和SpringMvc详细讲解

    转载自:https://www.cnblogs.com/doudouxiaoye/p/5693399.html 1. 为什么使用Spring ? 1). 方便解耦,简化开发 通过Spring提供的Io ...

  3. Java线程和线程池

    Android中创建线程的方式有,new Thread,new Thread(Runnable),new Thread(Callable)的形式. A. 直接new Thread简单方便. B. ne ...

  4. [SHOI2006]color 有色图[群论、组合计数]

    题意 用 \(m\) 种颜色,给 \(n\) 个点的无向完全图的 \(\frac{n(n-1)}{2}\) 条边染色,两种方案相同当且仅当一种方案交换一些点的编号后可以变成另一种方案.问有多少本质不同 ...

  5. .NET-记一次架构优化实战与方案-底层服务优化

    目录 .NET-记一次架构优化实战与方案-梳理篇 .NET-记一次架构优化实战与方案-前端优化 .NET-记一次架构优化实战与方案-底层服务优化 前言 经过上一篇<.NET-记一次架构优化实战与 ...

  6. .Net高级进阶,教你如何构建企业模型数据拦截层，动态控制字段验证

    现在,你有一个MVC架构的web项目,你要完成一个注册功能. 前台传了3个值到你的控制器,分别是账号.密码.邮箱. 如图:现在你要在控制器里面判断,账号名称.密码.邮箱不能为空,并且名称和密码不超过1 ...

  7. 01 前言/基础设施 - DevOps之路

    01 前言/基础设施 - DevOps之路 文章Github地址,欢迎start:https://github.com/li-keli/DevOps-WiKi 简介 基础架构采用DevOps设计思想, ...

  8. WCF系列教程之WCF服务配置工具

    本文参考自http://www.cnblogs.com/wangweimutou/p/4367905.html Visual studio 针对服务配置提供了一个可视化的配置界面(Microsoft ...

  9. base64编码解码原理

    计算机只能处理数字,所以要处理任何文本,只能先将文本转化为数字才行. Bit(bit)(b) 位或比特,是计算机运行的基础,属于二进制的范畴.数据传输大多是以[位]为单位,一个位即代表一个0或者1(即 ...

  10. HTTP请求中的Keep-Alive模式，是怎么区分多个请求的？

    Keep-Alive模式 我们都知道HTTP是基于TCP的,每一个HTTP请求都需要进行三步握手.如果一个页面对某一个域名有多个请求,就会进行频繁的建立连接和断开连接.所以HTTP 1.0中出现了Co ...