说明

pc端的后台管理我们剩下有订单明细还没有进行开发，由于订单这边需要移动端下单后才可以看到订单，所以我们需要去先在移动端开发一些功能后，再回过头让订单这边进行一个展示。

首先移动端开发的话，我们首先遇到的应该就是登录的问题。移动端登录这边我们验证码发送的话我们这边采用qq邮箱的验证码进行登录。

既然是用户登录这里的话，其实我们还需要这样对应的数据模型。我们先看前端页面代码
这里给到的登录页面这里，其实我们可以稍微修改一下，之前这里是提示的输入的手机号码，我们这里要用qq邮箱验证登录的话，其实我们可以要求输入邮箱。

然后的话，其实自己可以找一个邮箱验证的方式，看看邮箱格式是否正确。
下面这个标准是不统一的，可以按照规则去规定这一段正则。

我们去引入数据模型。User对象。这里就不给出来了。这都是课程前给到的数据模型实体类。

我记得我后来用这个数据模型，但是发现其实这个数据模型里面的一些字段还没有用到。

不过我们需要把这样的数据模型设计出来。

用qq邮箱进行验证码发送

如何使用qq邮箱进行这样的操作呢？首先我们登录进qq邮箱点击设置，然后点到账户这里。

这里要开启，开启的话，会让你发一个提示，让你去开启这个服务，按照这个流程去做。

然后我们就会收到一个授权码，这个授权码要复制下来，我们需要去用。

我们打开我们的项目，在pom中导入这样的依赖。

  <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId></dependency>

然后我们在yml配置当中写一些信息。这些配置有好多种写法，我们这样去写就可以。

 mail:host: smtp.qq.comusername: 你的用户名，就是发送者的邮箱地址password: 你的授权码port: 587default-encoding: UTF-8properties:mail:smtp:socketFactoryClass: javax.net.ssl.SSLSocketFactory
#          开启debug以后，邮件发送过程的日志会在控制台上打印出来debug: true

这样配置好后，我们基本就可以使用了。
从这里开始，找到这个按钮绑定的方法

然后就是下面这里

在这里呢，我进行了一个判断，改变了一下。
下面这主要就是对后端返回值的进行了一个处理，发送失败和成功我们都要提示。

   getCode(){this.form.code = ''//这里改为了邮箱的正则表达验证const regex = /^([\w\.\-]+)\@(\w+)(\.([\w^\_]+)){1,2}$/;if (regex.test(this.form.phone)) {this.msgFlag = false//this.form.code = (Math.random()*1000000).toFixed(0)sendMsgApi({phone:this.form.phone}).then((res)=>{if (res.code === 1){this.$message({message: "^-^验证码已经发送，请注意查收",type: 'success'})}else {this.$message({message: "验证码发送失败,请输入正确邮箱",type: 'failed'})}});}else{this.msgFlag = true}},

所以我们要点到这个里面去看具体的请求路径。

ok,基本就是这样的一个逻辑。
那么我们就直接去后端接收处理提交过来的这些数据。这里是发送验证码，

用户输入邮箱，点击获取验证码，然后这个前端就会给后端发送请求。

public class UserController {@Autowiredprivate UserService userService;@Resourceprivate JavaMailSender javaMailSender;//我们需要用这个进行邮件发送//注意这里我们将发送者从配置文件注入进来@Value("${spring.mail.username}")private String from;@PostMapping("/sendMsg")private R_<String> sendMsg(@RequestBody User user, HttpSession session) {//        这里用qq邮箱去发送验证码
//获取到前端提交过来的qq号String phone = user.getPhone();//这里工具类判是否为空if (StringUtils.isNotEmpty(phone)) {//            这里用到生成验证码的工具类String code = ValidateCodeUtils.generateValidateCode(4).toString();//生成四位的验证码log.info("code={}", code);
//            构建一个邮件的对象SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
//          设置邮件发件者simpleMailMessage.setFrom(from);
//            设置邮件接受者simpleMailMessage.setTo(phone);
//            设置有纪念的主题simpleMailMessage.setSubject("登录验证码");
//            设置邮件的征文String text = "^-^道哥（兰舟千帆）给您的验证码为" + code + "请勿泄露";simpleMailMessage.setText(text);//将生成的验证码保存到Session
//            将我们生成的手机号和验证码放到session里面，我们后面用户填入验证码之后，我们验证的时候就从这里去取然后进行比对
//这里我们需要一个异常捕获session.setAttribute(phone, code);
//            return R_.success("手机验证码短信发送成功");try {javaMailSender.send(simpleMailMessage);return R_.success("手机验证码短信发送成功");} catch (MailException e) {e.printStackTrace();}}}return R_.error("手机验证码发送失败");}

然后这样验证码就发送完成了，验证码发送成功后，用户邮箱就会收到验证码，然后就会在前端将这个数据填入。这样就又是另外的一次请求。

然后这里又是一个按钮，同样是绑定了方法。

我们走到这个方法,这个方法里面也有一些处理逻辑。然后我们关注到这里面主要的请求方法

然后点进去这个方法

然后我们后端这样去写就好了。

 //    移动应用登录端@PostMapping("/login")
//    这里使用map来接收前端传过来的值private R_<User> login(@RequestBody Map map, HttpSession session) {log.info(map.toString());
//        使用map来接收参数,接收键值参数、
//        编写处理逻辑
//        获取到手机号
//        获取到验证码
//        从Session中获取到保存的验证码
//     将session中获取到的验证码和前端提交过来的验证码进行比较，这样就可以实现一个验证的方式
//        比对页面提交的验证码和session中
//判断当前的手机号在数据库查询是否有记录，如果没有记录，说明是一个新的用户，然后自动将这个手机号进行注册String phone = map.get("phone").toString();String code = map.get("code").toString();
//获取session中phone字段对应的验证码Object codeInSession = session.getAttribute(phone);
//        下面进行比对if (codeInSession != null && codeInSession.equals(code)) {LambdaQueryWrapper<User> userLambdaQueryWrapper = new LambdaQueryWrapper<>();
//            在表中根据号码来查询是否存在该邮箱用户userLambdaQueryWrapper.eq(User::getPhone, phone);User user = userService.getOne(userLambdaQueryWrapper);if(user == null){//判断当前手机号对应的用户是否为新用户，如果是新用户就自动完成注册user = new User();user.setPhone(phone);user.setStatus(1);userService.save(user);}
//            这里我们将user存储进去，后面各项操作，我们会用，其中拦截器那边会判断用户是否登录，所以我们将这个存储进去，session.setAttribute("user",user.getId());return R_.success(user);}return R_.error("验证失败");}

这样怎么验证码发送给已经验证登录的功能就开发完成了。

后端这里成功返回数据后，然后我们就可以跳转到主页面了。

后续待更。。

黑马瑞吉外卖之移动端验证码登录使用qq邮箱相关推荐

黑马瑞吉外卖之菜品的启售停售
黑马瑞吉外卖值菜品的启售卖.和停售这一部分功能是课程没有去完成的,但是其实是比较简单的,我们需要去完成菜品的启售和停售. 执行之前的项目,我们要完成的就是这里的这个售卖的状态的更改. 我们先去看一下 ...
黑马瑞吉外卖之文件上传和下载
黑马瑞吉外卖之文件上传和下载文件上传的前端页面我们使用到的是spring-web对上传代码的一个封装. 我们采用到一个上传的前端页面这里采用到的前端页面主要部分就是 ---- <body&g ...
黑马瑞吉外卖项目之订单明细的查询，分页，派送功能
黑马瑞吉外卖项目之订单明细的查询,分页,派送功能 /*** 后台管理订单信息分页查询* @param page* @param pageSize* @return*/@GetMapping(" ...
瑞吉外卖之移动端菜品数据的展示
瑞吉外卖之移动端菜品数据的展示界面分析界面分析上篇我们主要完成了了瑞吉外卖移动端界面登录的功能.完成界面登录自然要进入主界面. 我们和前面的登录界面进行衔接上. 于是我们跳转到这个界面,也就是我 ...
黑马瑞吉外卖之购物车功能开发（添加购物车和购物车数据展示）
黑马瑞吉外卖之购物车功能前端界面分析后台购物车功能逻辑实现前端界面分析当我们点击选择规格的时候,数据参数item会传入按钮绑定的方法中我们点击到这个按钮的时候,那么就会绑定到这个方法.这个方 ...
黑马-瑞吉外卖 day5 套餐管理+手机验证码登录
目录 1. 套餐管理 1.1 新增套餐 1.2 套餐信息分页查询 1.3 删除套餐(可批量) 1.4 修改套餐状态(可批量) 2.手机验证码登录 2.1 短信发送 2.2 手机验证码登录 1. 套餐管 ...
黑马瑞吉外卖项目开发笔记
目录软件开发整体介绍开发流程角色分工软件环境瑞吉外卖项目介绍项目介绍产品原型展示技术选型功能架构角色开发环境搭建数据库环境搭建 Maven环境搭建 1.直接创建maven项目( ...
黑马瑞吉外卖、菩提阁学习总结
一.项目基础技术选型: 用户层:H5.Vue.js.ElementUI.微信小程序网关层:Nginx 应用层:SpringBoot.SpringMVC.SpringSession.Spring.S ...
黑马瑞吉外卖用户端顾客手机端页面展示
八.顾客手机端页面展示 0.地址管理需求分析: 一个用户可以有多个地址一个用户只能设置一个默认地址设置默认地址时,先将该用户下所有的地址都设置为不默认.再设置默认地址. 将AdressBook相 ...

黑马瑞吉外卖之移动端验证码登录使用qq邮箱

黑马瑞吉外卖之移动端验证码登录

说明

用qq邮箱进行验证码发送

黑马瑞吉外卖之移动端验证码登录使用qq邮箱相关推荐

最新文章

热门文章