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. Centos7 安装配置mysql5.6

    Centos7下完美安装并配置mysql5.6   Centos7将默认数据库mysql替换成了Mariadb,对于我们这些还想用mysql的人来说并不是一个好消息. 最近我搜罗了网上各种安装教程,各 ...

  2. 利用Oracle分析函数row_number和sys_connect_by_path实现多行数据合并为一行

    emo场景,以oracle自带库中的表emp为例: select ename,deptno from emp order by deptno; ENAME DEPTNO CLARK 10 KING 1 ...

  3. sklearn 数据预处理1: StandardScaler

    作用:去均值和方差归一化.且是针对每一个特征维度来做的,而不是针对样本. [注:] 并不是所有的标准化都能给estimator带来好处. “Standardization of a dataset i ...

  4. 单点登录SSO：可一键运行的完整代码

    单点登录方案不同于一个普通站点,它的部署比较繁琐:涉及到好几个站点,要改host.安装证书.配置HTTPS. 看到的不少这方面示例都是基于HTTP的,不认同这种简化: 1. 它体现不出混合HTTP/H ...

  5. Linux iostat 命令

    iostat 命令是 I/O statistics(输入/输出统计)的缩写,用来报告系统的 CPU 统计信息和块设备及其分区的 IO 统计信息.iostat 是 sysstat 工具集的一个工具,在 ...

  6. Ubuntu Server 18.04 修改网路配置

    新的Ubuntu 服务器采用netplan管理网络配置,跟以前的配置有很大的区别. 实际可行的办法是修改/etc/netplan/01-netcfg.yaml文件: sudo vim /etc/net ...

  7. Yii1.1框架实现PHP极光推送消息通知

    一.下载极光推送PHP SDK,解压后放在/protected/components/目录下,如下图所示: 二.完善修改下官方的demo例子,我这里复制一份demo,改为NotifyPush.php, ...

  8. UnderWater+SDN论文之五

    Underwater Sensor Networks with Mobile Agents: Experience from the Field Source: LNICST 2013 论文是来自两个 ...

  9. pandas数据清洗策略1

    Pandas常用的数据清洗5大策略如下: 1.删除 DataFrame 中的不必要 columns 2.改变 DataFrame 的 index 3.使用 .str() 方法来清洗 columns 4 ...

  10. JS典记

        var href = "";     //遍历a标签     $ ( "a"). each (function () {         href = ...