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

最新推荐文章于 2023-11-25 23:43:09 发布
最新推荐文章于 2023-11-25 23:43:09 发布
阅读量380 收藏
点赞数
分类专栏： spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wlison_wong/article/details/98532398
版权

 

 

参考网站

https://www.cnblogs.com/victorbu/tag/Spring%20Boot/default.html?page=2 【我的页面代码使用这个人的】

提示

为了方便，定义了一个基类controller---BaseController。

public class BaseController {

    public static final String CONTENT_TYPE_FORMED = "application/x-www-form-urlencoded";
    
    //异常处理
    //ExceptionHandler解决未被controller层吸收的exception
    @ExceptionHandler(Exception.class)
    @ResponseStatus(HttpStatus.OK)
    @ResponseBody
    public Object handleException(HttpServletRequest request, Exception ex){
        Map<String, Object> responseData = new HashMap<>();
        if(ex instanceof BusinessException){
            BusinessException businessException = (BusinessException) ex;
            responseData = new HashMap<>();
            responseData.put("errCode",businessException.getErrorCode());
            responseData.put("errMsg",businessException.getErrMsg());
        }else{
            responseData.put("errCode", EmBusinessError.UNKNOWN_ERROR.getErrorCode());
            responseData.put("errMsg",EmBusinessError.UNKNOWN_ERROR.getErrMsg());
        }
        return CommonReturnType.create(responseData,"fail");

    }
}

后面的每个controller都继承它即可

验证码功能

在这个视频中，主要讲解了如何生成验证码，以及如何进行检验。（因为这门课程是基础课程，视频中没用到Redis什么的，只是简单的把验证码放到了session中。）代码如下

//用户获取短信接口
    @RequestMapping(value = "/getotp", method = {RequestMethod.POST})
    @ResponseBody
    public CommonReturnType getOtp(@RequestParam(name = "telphone") String telephone) {
        //按照一定规则生成验证码
        Random random = new Random();
        int randonInt = random.nextInt(99999);   //生成0~99999的数字
        randonInt += 10000;
        String otpCode = String.valueOf(randonInt);
        //将OTP验证码通对应手机号关联。这里利用session
        httpServletRequest.getSession().setAttribute(telephone, otpCode);
        //发送短信
        System.out.println("手机--->" + telephone + "    验证码---->：" + randonInt);
        return CommonReturnType.create(null);
    }

页面的话。我是用了别人写的页面。他是用vue + element UI来实现的。发送请求用的是基于vue的axios。不像原课程使用的boostrap和jQuery

<html>
    <head>
        <meta charset="UTF-8">
        <title>获取验证码</title>
        <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('手机号不能为空');
                        alert('手机号不能为空')
                        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>

注册功能

页面绘制 register.html 

在这里。我对属性名进行了修改。与controller代码对应，属性更好的完成封装

<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>用户注册</h3>
                    <el-form ref="user" :model="user" label-width="80px">
                        <el-form-item label="手机号">
                            <el-input v-model="user.telphone"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码">
                            <el-input v-model="user.otpCode"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="user.name"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-switch
                                v-model="user.gender"
                                active-color="#ff4949"
                                inactive-color="#13ce66"
                                active-value="2"
                                inactive-value="1"
                                active-text="女"
                                inactive-text="男"></el-switch>
                        </el-form-item>
                        <el-form-item label="年龄">
                            <el-input v-model="user.age"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="user.encrptPassword" show-password></el-input>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">注册</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: {
                user: {
                    telphone: '',
                    otpCode: '',
                    name: '',
                    gender: 1,
                    age: 0,
                    encrptPassword: '',
                }
            },
            methods: {
                onSubmit(){
                
                    if(this.user.telphone == null || this.user.telphone == ''){
                        this.$message({
                            message: '手机号不能为空',
                            type: 'warning'
                        });
                        return;
                    }
                
                    // https://www.cnblogs.com/yesyes/p/8432101.html
                    axios({
                        method: 'post',
                        url: 'http://localhost:8080/user/register',
                        data: this.user, 
                        params: this.user,
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        withCredentials: true,
                    })
                    .then(resp=>{
                        if(resp.data.status == 'success'){
                            this.$message({
                                message: '注册成功',
                                type: 'success'
                            });
                        }else{
                            this.$message.error('注册失败，原因为：' + resp.data.data.errMsg);
                        }
                    })
                    .catch(err =>{
                        this.$message.error('注册失败，原因为：' + err.status + ', ' + err.statusText);
                    });
                },
            },
            
        });
    </script>

</html>

pom.xml增加一个依赖。用他的StringUils方便判空

<dependency>

             <groupId>org.apache.commons</groupId>

             <artifactId>commons-lang3</artifactId>

              <version>3.7</version>

</dependency>

Controller对应的代码

//用户注册接口
    //这里修改了部分代码
    @RequestMapping(value = "/register", method = {RequestMethod.POST})
    @ResponseBody
    public CommonReturnType register(UserModel user, @RequestParam(name = "otpCode") String otpCode) throws BusinessException, UnsupportedEncodingException, NoSuchAlgorithmException {
        //验证手机号和对应的otpcode相符合
        String inSessionOtpCode = (String) this.httpServletRequest.getSession().getAttribute(user.getTelphone());
        if (StringUtils.equals(otpCode, inSessionOtpCode)) {
            throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR, "短信验证码错误");
        }
        //注册流程
        user.setRegisterMode("byPhone");
        user.setEncrptPassword(EncodeNyMd5(user.getEncrptPassword()));
        userService.register(user);
        return CommonReturnType.create(null);
    }

密码需要加密，加密的方法如下：

一开始视频使用自带的加密的，但是应该是自带的有点问题，所以重新封装了。

//md5加密
    public String EncodeNyMd5(String str) throws NoSuchAlgorithmException, UnsupportedEncodingException {
        //确定计算方法
        MessageDigest md5 = MessageDigest.getInstance("MD5");
        BASE64Encoder base64en = new BASE64Encoder();
        //加密字符串
        String newStr = base64en.encode(md5.digest(str.getBytes("utf-8")));
        return newStr;
    }

UserService接口增加方法

    void register(UserModel userModel) throws BusinessException;

实现如下。

在这里，用insertSelective是因为有些数据是可以为空的。另外需要注意，手机不能重复。需要对数据库进行修改。由于我是用图形化界面，因此直接修改即可。

@Override
    public void register(UserModel userModel) throws BusinessException {
        if (userModel == null) {
            throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR);
        }
        if (StringUtils.isEmpty(userModel.getName())
                || userModel.getGender() == null
                || userModel.getAge() == null
                || StringUtils.isEmpty(userModel.getTelphone())) {
            throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR);
        }
        //实现 model -> dataobject方法
        UserDO userDo = convertFromModel(userModel);
        //这里手机号设置了不能重复。如果重复会有异常
        try {
            userDOMapper.insertSelective(userDo);
        } catch (DuplicateKeyException e) {
            throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR, "手机号码已注册");
        }
        userModel.setId(userDo.getId()); // 获取自增 id
        UserPasswordDO userPasswordDO = convertPasswordFromModel(userModel);
        userPasswordDOMapper.insertSelective(userPasswordDO);
    }

由于注册是对2张表进行修改，所以要有事务处理。另外，mapper语句也要进行修改，方便获取自增后的主键

  <insert id="insertSelective" parameterType="com.gpnu.miaoshaproject.dataobject.UserDO" keyProperty="id" useGeneratedKeys="true">

在注册时，会进行验证码的比对。但是由于跨域访问，session内容不共享，因此需要进行修改。前端页面也要做对应修改。但是我前端页面是用别人的，因此修改略。

跨域注解：

@CrossOrigin(allowCredentials = "true", allowedHeaders = "*") // 解决跨域问题

登录操作

页面绘制 Login.html

<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>用户登陆</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 label="密码">
                            <el-input v-model="form.password" show-password></el-input>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">登陆</el-button>
                            <el-button @click="register">注册</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: '',
                    password: '',
                }
            },
            methods: {
                onSubmit(){
                
                    if(this.form.telphone == null || this.form.telphone == ''){
                        this.$message({
                            message: '手机号不能为空',
                            type: 'warning'
                        });
                        return;
                    }
                
                    // https://www.cnblogs.com/yesyes/p/8432101.html
                    axios({
                        method: 'post',
                        url: 'http://localhost:8080/user/login',
                        data: this.form, 
                        params: this.form,
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        withCredentials: true,
                    })
                    .then(resp=>{
                        if(resp.data.status == 'success'){
                            this.$message({
                                message: '登陆成功',
                                type: 'success'
                            });
                        }else{
                            this.$message.error('登陆失败，原因为：' + resp.data.data.errMsg);
                        }
                    })
                    .catch(err =>{
                        this.$message.error('登陆失败，原因为：' + err.status + ', ' + err.statusText);
                    });
                },

                register(){
                    window.location.href='getotp.html';
                },

            },
            
        });
    </script>

</html>

userService接口添加方法

    UserModel validateLogin(String telphone, String encrptPassword) throws BusinessException;

实现如下：

 @Override
    public UserModel validateLogin(String telphone, String encrptPassword) throws BusinessException {
        //先查出该用户信息
        UserDO userDO = userDOMapper.selectByTelphone(telphone);
        if (userDO == null) {
            throw new BusinessException(EmBusinessError.USER_LOGIN_FAIL);
        }
        //查找密码
        UserPasswordDO userPasswordDO = userPasswordDOMapper.selectByUserId(userDO.getId());

        UserModel userModel = convertFromDataObject(userDO, userPasswordDO);

        System.out.println(userModel.getEncrptPassword());
        //检查是否相等
        if (!StringUtils.equals(encrptPassword, userModel.getEncrptPassword())) {
            throw new BusinessException(EmBusinessError.USER_LOGIN_FAIL);
        }

        return userModel;
    }

大体思路：根据传过来的电话号码，来查出用户的信息。如果信息为空，则提示用户。如果信息不为空，则对用户输入的密码与数据库密码进行比对。

 

由于根据电话号码查找出id，再查找密码。因此需要在UserDOMapper增加方法

UserDO selectByTelphone(String telphone);

sql代码如下：

 <select id="selectByTelphone" parameterType="java.lang.String" resultMap="BaseResultMap">
    select
    <include refid="Base_Column_List" />
    from user_info
    where telphone = #{telphone,jdbcType=VARCHAR}
  </select>

Controller代码

//登录
    @RequestMapping(value = "/login", method = {RequestMethod.POST})
    @ResponseBody
    public CommonReturnType checkLogin(@RequestParam(name = "telphone") String telphone,@RequestParam(name = "password") String password) throws BusinessException, UnsupportedEncodingException, NoSuchAlgorithmException {
        //判空
        if(StringUtils.isEmpty(telphone) || StringUtils.isEmpty(password)){
            throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR);
        }
        //将用户输入的密码进行加密并传过去验证
        UserModel userModel = userService.validateLogin(telphone, EncodeNyMd5(password));
        //保存登录状态
        httpServletRequest.getSession().setAttribute("LOGIN", true);
        httpServletRequest.getSession().setAttribute("LOGIN_USER", userModel);

        return CommonReturnType.create(null);

    }

总结

在写的过程中，遇到了一个问题，总是登录失败，而且信息提示未知错误。后面debug才发现是之前的sql语句错了，查不出对应的人的密码。导致封装失败，因此报未知错误。

在这几个视频中，学会了解决跨域访问。

Springboot实现用户登录校验等功能
qq_37828633的博客
02-08 4500
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- UserService.java ---------...
mybatis自动生成Mapper映射文件时，映射文件中的包名出现错误
baidu_38769016的博客
10-10 1193
mybatis自动生成Mapper映射文件后，在service层自动注入dao层中的mapper,却得到如下报错: 很明显，这是UserDOMapper这个接口并未被置入spring容器中，导致service层无法自动注入userDOMapper。 下面是UserDOMapper和UserService的代码： package com.miaoshaproject.dao; import co...
Spring Boot 构建电商基础秒杀项目 (十二) 总结 (完结)
weixin_33796205的博客
03-24 340
SpringBoot构建电商基础秒杀项目 学习笔记 系统架构 存在问题 如何发现容量问题 如何使得系统水平扩展 查询效率低下 活动开始前页面被疯狂刷新 库存行锁问题 下单操作步骤多，缓慢 浪涌流量如何解决 源码：spring-boot-seckill 转载于:https://www.cnblogs.com/victorbu/p/10590661.html...
秒杀项目（三）用户管理
qq_45955954的博客
10-14 294
用户获取otp短信接口 @Autowired private HttpServletRequest httpServletRequest; //用户获取otp短信接口 @RequestMapping("/gettotp") @ResponseBody public CommonReturnType getOtp(@RequestParam(name = "telphone")String telphone){ //需要按照一定的规则生成OTP验证码
SpringBoot构建电商基础秒杀项目-----学习笔记5
Wlison_wong的博客
08-10 272
交易模块的实现 创建模型OrderModel @Data public class OrderModel { private String id; private Integer userId; private Integer itemId; private BigDecimal itemPrice; private Integer amount; ...
SpringBoot构建电商秒杀项目
realwongp的博客
06-14 888
一、前言 这个项目主要是使用SpringBoot实现一个电商的秒杀功能，项目很简单，服务器使用的也是本地电脑，因为是使用了SpringBoot，其实对于想要学习SpringMVC或其他基础的同学来说其实并不合适。该项目的主要收获是从业务层面理解一下MVC的架构思想， 还有就是体会一下一些业务常见问题的解决方法。 课程地址：SpringBoot构建电商秒杀项目 仓库地址：SpringBoot构建电商...
SpringBoot构建电商秒杀项目(三) 商品模块开发
安东尼的小不二的博客
03-13 508
第三章 商品模块开发 3.1 商品创建 我们在进行模块开发的过程中应遵循先设计领域模型，再设计数据库的过程。因为领域模型中经常存在有级联关系(比如商品模型与销售模型之间)，所以数据库的设计应该在领域模型设计之后。 1.创建ItemModel领域模型 商品模型主要包含有商品名，价格，库存，描述信息，图片url属性。为了减少在代码上对属性的一一判空，我们采用上节课学习到的validator来判空 pu...
基于SpringBoot的秒杀系统设计与实现论文
q_q1262330535的博客
11-25 1232
社会发展日新月异，用计算机应用实现数据管理功能已经算是很完善的了，但是随着移动互联网的到来，处理信息不再受制于地理位置的限制，处理信息及时高效，备受人们的喜爱。本次开发一套基于Spring Boot的秒杀系统，管理员功能有个人中心，用户管理，商品类型管理，商品信息管理，订单管理，系统管理。用户可以注册登录，查看商品信息，对秒杀商品购买，秒杀活动结束的商品不可以购买，可以可以查看订单。基于Spring Boot的秒杀系统服务端用Java开发，用Spring Boot框架开发的网站后台，数据库用到了MySQL数
基于《狂神说Java》Redis--学习笔记
wudidahuanggua的博客
06-19 1719
本笔记仅做学习与复习使用，不存在刻意抄袭。给各位学友强烈推荐《遇见狂神说》他的整套Java学习路线使我获益匪浅！！!
success && success(res.data)的实质
weixin_45172119的博客
09-24 3598
刚入公司不久，看到大佬封装了要给get请求，里面代码设计到了： success && success(res.data)。这句话的意思，需要调用的代码中，如果存在success，那就执行组件的success方法，这里的success跟全局封装中，wx.request的success的方法并不是同一个。 刚入门，初步见解，有错误，还请大佬指教。 具体代码是这样写的： 在全局js中封装了get请求： /** * get请求 */ _get: function (url, da
SpringBoot构建电商基础秒杀项目
松生的博客
06-16 504
慕课网——SpringBoot构建电商基础秒杀项目 第一章 课程介绍 第二章 应用SpringBoot完成基础项目搭建 2.1 使用IDEA创建maven项目 2.2 引入SpringBoot依赖包实现简单的Web项目 2.3 Mybatis接入SpringBoot项目 2.4 Mybatis自动生成器的使用方式 第三章 用户模块开发 3.1 使用SpringMVC方式开发用户信息 3.2 定义通用的返回对象——返回正确信息 3.3 定义通用的返回对象——返回错误信息 3.4 定义通用的返回对象——异常处理
vue-cli 本地运行http://localhost:8080报404错误
热门推荐
清风明月的博客
11-05 1万+
查看config/index.js里面的文件， dev: { assetsPublicPath: '/', host: 'localhost', port: 8080, } 确保dev下面这三项正确，就可以正确运行http://localhost:8080
注册功能验证码两台应用程序导致的session不一致问题
qq_41412663的博客
10-06 213
解决方案: #getOtp() #生成Token String uuidToken = UUID.randomUUID().toString(); uuidToken = uuidToken.replace("-",""); //建立token和验证码之间的联系，存入Redis redisTemplate.opsForValue().set(uuidToken,otpCode); //设定token过期时间 redisTemplate.expire(uuidToken,1, TimeUni..
SpringBoot构建电商基础秒杀项目-----学习笔记4
Wlison_wong的博客
08-07 378
商品模型 在视频的一开始，视频说应该先设计领域模型。（我一般都是先设计数据库的，这里涨知识了） 在这里，库存用了另外一张表。 ItemModel.java @Data public class ItemModel { private Integer id; @NotBlank(message = "商品名称不能为空") private String title...
SptingBoot构建电商基础秒杀项目时遇到的问题
Michael_fchou的博客
03-25 338
一、应用SpringBoot完成基础项目搭建 2-3 Mybatis接入SpringBoot项目 2-4 Mybatis自动生成器使用方式 在使用Maven自动生成接口UserDOMapper和UserPasswordDoMapper后，需要在接口文件上加上@Mapper注解，让DemoMapper能够让别的类进行引用。 使用@Mapper注解的缺点： ·直接在Mapper类上面添加注解@Mapper，这种方式要求每一个mapper类都需要添加此注解，麻烦。 改进方法：使用@MapperScan注解 此
vue在使用element组件出现＜el-input ＞标签无法输入，解决方案
JinYi_CSDN的博客
12-03 6714
在使用element组件出现<el-input >标签无法输入，苦恼了好久、头发也掉了好几根(脑补掉头发的情景????????????????......)，终于在灵光一闪的情况下解决了这个”大问题“。 话不多说直接上代码： 错误代码： <el-form size="mini" :label-position="labelPosition" label-width="80px" :model="user"> <el-form-item label="姓名:"&
ARCore（Android的增强现实）：ARCore性能优化与调试技巧.docx
最新发布
11-01
ARCore（Android的增强现实）：ARCore性能优化与调试技巧
停止维护 基于 ReactNative、Redux 的漫画.zip
11-01
停止维护 基于 ReactNative、Redux 的漫画
cocos2d-x手机游戏编程学习笔记与环境配置
这份学习笔记涵盖了cocos2d-x的基本介绍、开发环境的配置、项目构建与运行，以及作者的学习心得，对于想要涉足cocos2d-x游戏开发的初学者来说，是一份宝贵的参考资料。通过阅读和实践，读者可以掌握cocos2d-x的基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值