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. 浅谈SQL注入

    先看一个sql语句: select * from admin where username='(此处为用户输入的数据)'; 在没有任何过滤的情况下,如果用户输入:' or 1=1 -- 这条语句就为: ...

  2. c++中vector类的用法

    概括:向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象.可以简单的认为,向量是一个能够存放任意类型的动态 ...

  3. WebBench压力测试工具（详细源码注释+分析）

    本文适合人群:对WebBench实现感兴趣的人 WebBench原理: Linux下使用的服务器压力测试工具,利用fork建立多个子进程,每个子进程在测试时间内不断发送请求报文,建立多个连接,然后由父 ...

  4. Eclipse 设置保存代码时自动格式化

    在码代码或者优化的时候,经常需要使用到ctrl+shift+F来格式化代码,但其实ecilpse已经自带自动格式化功能了,只是没有默认开启. 正确的打开方式:windows-->Preferen ...

  5. 读写分离子系统 - C# SQL分发子系统（目前只支持ADO.NET）

    这次介绍的这个框架只适用于中小项目,并且各个读写数据库结构是一致的情况,还要并且是写入数据库只有1台情况. 我们来看看这个子系统适用的场景: 我们来看这个子系统的配置文件: <?xml vers ...

  6. Python 学习 第十三篇：数据的读写-文件、DataFrame、json

    Python的文件是一个重要的对象,使用open()函数来打开文件,创建文件对象,进行文件的读写操作.当数据用于交换信息时,通常需要把数据保存为有格式的文本数据,可以保存为有特定的行分隔符和列分隔符的 ...

  7. JAVA验证身份证格式及合法性

    旅游电子商务中,预订酒店或订购门票时会以身份证作为消费凭证,为了防止客户误填身份证带来不必要麻烦,需要验证码格式及合法性,代码如下: /** * 判断身份证格式 * * @param idNum * ...

  8. Linq中比较字符串类型的日期

    一.在使用Linq时,想要比较字符串类型的日期时,参考以下: SQL语句: )select * from TableName where StartTime > '2015-04-08' )se ...

  9. 求n!中含有某个因子个数的方法

    链接 [https://www.cnblogs.com/dolphin0520/archive/2011/04/11/2012891.html]

  10. iptables的增删改查

    iptables是linux系统自带的防火墙,功能强大,学习起来需要一段时间,下面是一些习iptables的时候的记录.如果iptables不熟悉的话可以用apf,是一款基于iptables的防火墙, ...