hi,我是兰舟千帆,本次更文还是将瑞吉外卖的笔记完善一下。每一篇都写得很认真哦,希望需要的人可以得到帮助,谢谢你们的阅读。
pc端的后台管理我们剩下有订单明细还没有进行开发,由于订单这边需要移动端下单后才可以看到订单,所以我们需要去先在移动端开发一些功能后,再回过头让订单这边进行一个展示。
首先移动端开发的话,我们首先遇到的应该就是登录的问题。移动端登录这边我们验证码发送的话我们这边采用qq邮箱的验证码进行登录。
既然是用户登录这里的话,其实我们还需要这样对应的数据模型。我们先看前端页面代码 这里给到的登录页面这里,其实我们可以稍微修改一下,之前这里是提示的输入的手机号码,我们这里要用qq邮箱验证登录的话,其实我们可以要求输入邮箱。
然后的话,其实自己可以找一个邮箱验证的方式,看看邮箱格式是否正确。 下面这个标准是不统一的,可以按照规则去规定这一段正则。
我们去引入数据模型。User对象。这里就不给出来了。这都是课程前给到的数据模型实体类。
我记得我后来用这个数据模型,但是发现其实这个数据模型里面的一些字段还没有用到。
不过我们需要把这样的数据模型设计出来。
如何使用qq邮箱进行这样的操作呢?首先我们登录进qq邮箱点击设置,然后点到账户这里。
这里要开启,开启的话,会让你发一个提示,让你去开启这个服务,按照这个流程去做。
然后我们就会收到一个授权码,这个授权码要复制下来,我们需要去用。
我们打开我们的项目,在pom中导入这样的依赖。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
</dependency>
然后我们在yml配置当中写一些信息。这些配置有好多种写法,我们这样去写就可以。
mail:
host: smtp.qq.com
username: 你的用户名,就是发送者的邮箱地址
password: 你的授权码
port: 587
default-encoding: UTF-8
properties:
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 {
@Autowired
private UserService userService;
@Resource
private 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("验证失败");
}
这样怎么验证码发送给已经验证登录的功能就开发完成了。
后端这里成功返回数据后,然后我们就可以跳转到主页面了。
后续待更。。