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. 数组复制的五种方式（遍历循环一一赋值、System.arraycopy、地址赋值、克隆clone()、Arrays.copyof()）

    package com.Summer_0424.cn; import java.util.Arrays; import java.util.concurrent.CopyOnWriteArrayLis ...

  2. AQS实现原理分析——ReentrantLock

    在Java并发包java.util.concurrent中可以看到,不少源码是基于AbstractQueuedSynchronizer(以下简写AQS)这个抽象类,因为它是Java并发包的基础工具类, ...

  3. Kafka 入门三问

    目录 1 Kafka 是什么? 1.1 背景 1.2 定位 1.3 产生的原因 1.4 Kafka 有哪些特征 消息和批次 模式 主题和分区 生产者和消费者 broker 和 集群 1.5 Kafka ...

  4. Linux查看端口

    1.lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000   2.netstat -tunlp |grep 端口号 用于查看指定的端口号的进程情况 ...

  5. Gym 101873F Plug It In（二分图匹配)

    题目链接:http://codeforces.com/gym/101873/problem/F 题意:有n个插孔,m个机器,和一个插板,一个插孔可以连接一个机器,插板可以使一个插孔连接三个机器,找到最 ...

  6. C. Prefixes and Suffixes

    链接 [https://codeforces.com/contest/1092/problem/C] 题意 给你某个字符串的长度n,再给你2*n-2个前缀或者后缀 让你判断那些是前缀那些是后缀 关键是 ...

  7. nginx 1.4.3能直接升到1.8.1吗

    nginx 1.4.3能直接升到1.8.1吗_百度知道https://zhidao.baidu.com/question/564529441847261484.html nginx-1.6.3平滑升级 ...

  8. MySQL之数据导入导出

    日常开发中,经常会涉及到对于数据库中数据的导入与导出操作,格式也有很多: TXT,CSV,XLS,SQL等格式,所以,在此总结一下,省的总是百度查询. 一 导出 1) 常用的方式就是使用现成的工具例如 ...

  9. SQLServer数据库分页

    以  项目表 PM_Project  为例. PM_Project 全部内容如下(共6条数据): 一.Top – Not In - Top 方式分页 直接的,原始的,不采用函数,纯手动挡. 分步探索过 ...

  10. vue实现双向数据绑定之Object.defineProperty()篇

    前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...