记录毕业设计前后端搭建

理解归理解

已于 2024-05-13 15:33:59 修改

阅读量216

点赞数 1

分类专栏： springboot vue 文章标签：课程设计 vue.js 前端 spring boot

于 2023-04-14 10:36:43 首次发布

本文链接：https://blog.csdn.net/qq_61398236/article/details/130146719

版权

springboot 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

该文章介绍了使用ElementUI快速搭建前端页面，通过监听鼠标移动实现图片动态效果。后端使用SpringBoot，集成GoogleKaptcha生成验证码，并详细配置了其参数。注册功能采用邮箱验证，利用QQ邮箱的SMTP服务发送邮件，文章还展示了发送邮件的相关配置和代码实现。

摘要由CSDN通过智能技术生成

前端使用elementUI来快速搭建,后端采用springboot搭建

部署地址：徐闫东

放一些UI图，记录一下实现思路

 <div class="imageContainer"><!--首页图片布局-->
            <img src='../../assets/login_icon/login_1.png' class="images" data="-4" style="position: absolute;left: 70vw;top: 10vh"/>
            <img src='../../assets/login_icon/login_2.png' class="images" data="6" style="position: absolute;left: 55vw"/>
            <img src='../../assets/login_icon/login_3.png' class="images" data="4" style="position: absolute;left: 73vw;top: 40vh"/>
            <img src='../../assets/login_icon/login_4.png' class="images" data="-6" style="position: absolute;left: 40vw"/>
            <img src='../../assets/login_icon/login_5.png' class="images" data="8" style="position: absolute;left: 20vw;top: 10vh"/>
            <img src='../../assets/login_icon/login_6.png' class="images" data="-4"  style="position: absolute;left: 18vw;top: 40vh"/>
            <img src='../../assets/login_icon/login_7.png' class="images" data="5"  style="position: absolute;left: 30vw;top: 65vh"/>
            <img src='../../assets/login_icon/login_8.png' class="images" data="-9" style="position: absolute;left: 59vw;top: 70vh"/>
            <img src='../../assets/login_icon/login_9.png' class="images" data="8" style="position: absolute;left: 85vw;"/>
        </div>

 document.addEventListener("mousemove",parallax)//新增监听事件
            function parallax(e) {
                document.querySelectorAll(".images").forEach(function (move) {
                    let attribute = move.getAttribute('data');
            //每个图片给了个data属性，根据鼠标移动的像素进行对应偏移实现动画效果
                       let x =(e.clientX*attribute)/200;
                       let y =(e.clientY*attribute)/200;
                       move.style.transform="translateX("+x+"px)translateY("+y+"px)"
                })
            }

验证码使用的是谷歌的kaptcha

 <!--google kaptcha依赖 -->
        <dependency>
            <groupId>com.github.axet</groupId>
            <artifactId>kaptcha</artifactId>
            <version>0.0.9</version>
        </dependency>

kaptcha配置文件

package com.zzy.myweb.config;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

/**
 * @author zzy
 * @date 2022/12/5 9:14
 */
@Configuration
public class captchaConfig {
    @Bean
    public DefaultKaptcha defaultKaptcha(){
        //验证码生成器
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        //配置
        Properties properties = new Properties();
        //是否有边框
        properties.setProperty("kaptcha.border","no");
        //设置边框颜色
        //properties.setProperty("kaptcha.border.color","105,179,90");
        //验证码
        properties.setProperty("kaptcha.session.key","code");
        //验证码文本字符颜色，默认黑色
        properties.setProperty("kaptcha.textproducer.font.color","blue");
        //设置字体样式
        properties.setProperty("kaptcha.textproducer.font.names","Arial,Courier");
        //字体大小，默认40
        properties.setProperty("kaptcha.textproducer.font.size","40");
        //验证码文本字符内容范围 默认为abced2345678gfynmnpwx
        properties.setProperty("kaptcha.textproducer.char.string","abcdefgjkm3456789pqrstwxy");
        //字符默认长度为5
        properties.setProperty("kaptcha.textproducer.char.length","4");
        //字符间距，默认为2
        properties.setProperty("kaptcha.textproducer.char.space","2");
        //验证码图片宽度，默认为200
        properties.setProperty("kaptcha.image.width","150");
        //验证码图片高度，默认为40
        properties.setProperty("kaptcha.image.height","50");
        Config config=new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

接口测试

package com.zzy.myweb.controller;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

import static com.zzy.myweb.utils.RedisConstant.captcha;
import static com.zzy.myweb.utils.RedisConstant.captcha_timing;

/**
 * @author zzy
 * @date 2022/12/5 9:36
 */
@RestController
@RequestMapping()
public class captchaController {
    @Autowired
    private DefaultKaptcha defaultKaptcha;
    @Autowired
    private RedisTemplate redisTemplate;

    @GetMapping(value = "/captcha",produces = "image/jpeg")
    public void getCaptcha(HttpServletRequest request, HttpServletResponse response){
        //定义response输出类型为image/jpeg类型
        response.setDateHeader("Expires", 0);
        //Set standard HTTP/1.1 no-cache headers.
        response.setHeader("Cache-Control", "no-store,no-cache,must-revalidate");
        //Set IE extended HTTP/1.1 no-cache headers(use addHeader)
        response.addHeader("Cache-Control", "post-check=0,pre-check=0");
        //Set standard HTTP/1.0 no-cache header.
        response.setHeader("Pragma", "no-cache");
        //return a jpeg
        response.setContentType("image/jpeg");
        //-------------------生成验证码 begin----------------
        //获取验证码文本内容
        String text = defaultKaptcha.createText();
        //将文本存入session
        //将文本存入redis
        redisTemplate.opsForValue().set(text,text,captcha_timing, TimeUnit.MINUTES);
        //根据文本验证码内容创建图形验证码
        BufferedImage image = defaultKaptcha.createImage(text);

        ServletOutputStream outputStream = null;

        try {
            outputStream=response.getOutputStream();
            //输出格式jpg
            ImageIO.write(image,"jpg",outputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if(outputStream!=null){
                try {
                    outputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

注册

注册采用邮箱注册方式，前后端分别对其进行表单验证，记录下springboot如何实现发送邮件

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

我采用的是QQ邮箱发送邮件，首先登录qq邮箱开启SMTP服务，拿到授权码。

#mail配置
##qq邮件服务器地址
spring.mail.host=smtp.qq.com
spring.mail.name="徐闫东"
#自己的邮箱名
spring.mail.username=2854819829@qq.com
#授权码
spring.mail.password=你的授权码
#smtp服务端口号465或者587
spring.mail.port=465
# SSL 连接配置
spring.mail.properties.mail.smtp.socketFactory.class=javax.net.ssl.SSLSocketFactory
# 配置默认编码
spring.mail.default-encoding=UTF-8
# 开启 debug，这样方便开发者查看邮件发送日志
spring.mail.properties.mail.debug=true

package com.zzy.myweb.email;

import cn.hutool.core.util.RandomUtil;
import com.zzy.myweb.utils.response;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Component;

import java.util.concurrent.TimeUnit;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import static com.zzy.myweb.utils.RedisConstant.MAIL;
import static com.zzy.myweb.utils.RedisConstant.MAIL_TIME;

/**
 * @author : zzy
 * @date : 2023/4/13 16:26
 */
@Component
public class MailService {

    // JavaMailSender 在Mail 自动配置类 MailSenderAutoConfiguration 中已经导入，这里直接注入使用即可
    @Autowired
    private JavaMailSender javaMailSender;
    @Autowired
    private RedisTemplate redisTemplate;
    @Value("${spring.mail.username}")
    private String from;
    private String subject = "注册验证码";

    //方法5个参数分别表示：邮件发送者、收件人、抄送人、邮件主题以及邮件内容
    public response sendSimpleMail(String to) {
        if(checkEmail(to)){
        // 简单邮件直接构建一个 SimpleMailMessage 对象进行配置并发送即可
        SimpleMailMessage simpMsg = new SimpleMailMessage();
        simpMsg.setFrom(from);//从哪发送
        simpMsg.setTo(to);//发给谁
        simpMsg.setCc(from);//抄送人
        simpMsg.setSubject(subject);//主题
        String content = RandomUtil.randomString(6);
        redisTemplate.opsForValue().set(MAIL+content,content,MAIL_TIME, TimeUnit.MINUTES);//设置验证码过期时间
        simpMsg.setText("您的注册验证码为"+content+",请注意查收，有效期为五分钟!");//发送验证码
        javaMailSender.send(simpMsg);
        return response.success("邮件已经发送,注意查收!");
        }//发送
        else{
            return response.error("无效邮箱,清检查后重试!");
        }
    }

    public static boolean checkEmail(String email) {
        String check = "^([a-z0-9A-Z]+[-|\\.|_]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-zA-Z]{2,}$";
        Pattern regex = Pattern.compile(check);
        Matcher matcher = regex.matcher(email);
        return matcher.matches();
    }
}

package com.zzy.myweb.controller;

import com.zzy.myweb.email.MailService;
import com.zzy.myweb.utils.response;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author : zzy
 * @date : 2023/4/13 16:27
 */
@RestController()
@RequestMapping("/mail")
public class mailController {
    @Autowired
    private MailService mailService;

    @GetMapping("/mailInfo")
    public response mailInfo(String mail) {
        return mailService.sendSimpleMail(mail);
    }
}

一些逻辑处理的就不放出来了,内容过多，剩下的在下一篇帖子记录