目录
创建springboot项目
目录结构：
启动类
测试类
idea建表
pom文件
编写yml文件
qq邮箱设置
登陆注册代码
编写持久层(Dao)
注册代码
业务层
业务实现类
mapper
控制层
前端代码
注册页面
邮件正文：
登录代码
控制层
业务层：
业务实现类：
前端代码
自动登录
创建springboot项目
Maven类型+
Lombok依赖+spring web依赖+MySQL driver依赖+mybatis framework依赖+java Mail Sender依赖
目录结构：
有些类是自己写的不用看，看一下结构就可以
启动类
@SpringBootApplication
@MapperScan("com.example.mapper")//将mapper路径下自动注册映射器接口为spring Bean
public class SpringBootDemo1Application {
public static void main(String[] args) {
SpringApplication.run(SpringBootDemo1Application.class,args);
}
}
测试类
@SpringBootTest
@RunWith(SpringRunner.class)
class SpringBootTestApplicationTests {
}
idea建表
use `数据库名`;
create table `user`(
`id` int primary key auto_increment comment '主键id',
`email` varchar(255) comment '用户邮箱',
`password` varchar(255) comment '用户密码',
`salt` varchar(255) comment '盐',
`confirm_code` varchar(255) comment '确认码',
`activation_time` datetime comment '激活时间',
`is_valid` tinyint comment '账号状态'
)default charset=utf8 comment '用户表';pom文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>springBoot-Test</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springBoot-Test</name>
<description>springBoot-Test</description>
<properties>
<java.version>1.8</java.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<spring-boot.version>2.6.13</spring-boot.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<version>8.2.0</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--导入Mybatis坐标-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.2</version>
</dependency>
<!--导入mybatis-plus坐标-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.1</version>
</dependency>
<!--mybatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.13</version>
</dependency>
<!--导入数据库druid坐标-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.22</version>
</dependency>
<!--简略get,set方法-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.10</version>
</dependency>
<!--模版引擎-->
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity-engine-core</artifactId>
<version>2.3</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
</dependency>
<!--swagger-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.9.2</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.9.2</version>
</dependency>
<!--添加事务管理-->
<!-- 支持使用 Spring AOP 和 AspectJ 进行切面编程。 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
</dependency>
<!-- SpringBoot集成FreeMarker的依赖 :模版引擎,生成输出文本-->
<!--<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>-->
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--邮箱发送-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
</dependency>
<!--工具包：雪花算法：生成确认码-->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.8.25</version>
</dependency>
</dependencies>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>${spring-boot.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>${spring-boot.version}</version>
<configuration>
<mainClass>com.example.springboottest.SpringBootTestApplication</mainClass>
<skip>true</skip>
</configuration>
<executions>
<execution>
<id>repackage</id>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
编写yml文件
server:
port: 8088
spring:
datasource:
druid:
driver-class-name: com.mysql.cj.jdbc.Driver # 配置数据库驱动程序，用于数据库通信和执行sql语句
url: jdbc:mysql://localhost:3306/表名?autoReconnect=true&useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8 # 加数据库名
username: root
password:
mvc: # 处理springboot与swagger2冲突
pathmatch:
matching-strategy: ant_path_matcher
freemarker:
expose-session-attributes: true # 暴露session对象的属性
settings:
classic_compatible: true # 配置为传统模式，控制自动处理
suffix: .ftl # 指定模版文件后缀
mail:
protocol: smtp # 邮箱协议
host: smtp.qq.com # qq邮箱，如果用网易将qq改成163
port: 25
username: # 发送人邮件名（这个地方可能出错，可能是由于名字问题）
password: # 授权码
default-encoding: utf-8
properties:
mail:
debug: true # 开启debug模式会打印邮件发送过程的日志
mybatis-plus:
# mybatis映射器XML文件位置 作用：定义sql语句和结果映射
mapper-location: classpath:mapper/*.xml
# 开启mybatis-plus的运行日志（建议）
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
qq邮箱设置
点击第二列的账号：开启服务，发送邮件，记下授权码 ok !
登陆注册代码
编写持久层(Dao)
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName(value = "user")
public class User {
@TableId(value = "id",type = IdType.AUTO)
private Integer id;
@TableField(value = "email")
private String email;
@TableField(value = "password") // 密码，使用md5+盐加密
private String password;
@TableField(value = "salt")
private String salt; // 盐
@TableField(value = "confirm_code") // 确认码
private String confirmCode;
@TableField(value = "activation_time") // 激活失效时间
private LocalDateTime activationTime;
@TableField(value = "is_valid") // 账号状态
private Byte isValid;
}注册代码
业务层
public interface UserService extends IService<User> {
// 创建账号
Map<String,Object> createAccount(User user);
// 创建账号过程中，用于激活账号的确认码，没有激活不可以登录账号
Map<String, Object> activation(String confirmCode);
// 将用户信息录入数据库
int insertUser(User user);
// 通过确认码查找用户,不用担心确认码重复
User selectUserByConfirmCode(String confirmCode);
// 通过邮箱激活账号
int updateUserByConfirmCode(String confirmCode);
// 通过邮箱名查找用户（如果没有进行注册查重，那么将这个修改成List<User>有多个用户报异常）
User selectUserByEmail(String email);
}
业务实现类
@Service
public class UserServiceImpl implements UserService {
@Resource
private UserMapper um;
@Value("${spring.mail.username}")
private String mailUsername;
@Resource //发送邮件,实现邮箱验证
private JavaMailSender javaMailSender;
@Resource // 模版引擎
private TemplateEngine templateEngine;
@Override
@Transactional // 事务管理
/*
* 创建账号：接收发送过来的邮件账号和密码，利用雪花算法生成确认码用于激活账号，使用MD5将密码进行加密
* 设置激活时间和激活状态为未激活后添加到数据库，发送邮件领取激活码，激活账号*/
public Map<String, Object> createAccount(User user) {
// 检验账号是否重复
// 雪花算法生成确认码
String confirmCode = IdUtil.getSnowflake(1,1).nextIdStr();
// 生成盐 随机数
String salt = RandomUtil.randomString(6);
// 加密密码：原始密码+盐
String md5Pwd = SecureUtil.md5(user.getPassword()+salt);
// 激活时间 有效时间
LocalDateTime ldt = LocalDateTime.now().plusDays(1);
user.setConfirmCode(confirmCode);
user.setSalt(salt);
user.setPassword(md5Pwd);
user.setActivationTime(ldt);
user.setIsValid((byte)0);
// 新增账号
int result = um.insert(user);
HashMap<String, Object> hm = new HashMap<>();
if(result > 0){
// 发送邮件:前端会调用该路径下的方法并传递确认码参数
String activationUrl = "http://localhost:8088/user/activation?confirmCode=" + confirmCode;
sendMailForActivationAccount(activationUrl,user.getEmail());
hm.put("code",200);
hm.put("message","注册成功。请前往邮件进行账号激活");
}else {
hm.put("code",400);
hm.put("message","注册失败");
}
return hm;
}
@Override
@Transactional
/*发送邮件申请激活账号：创建邮件，设置主题、发送者、接受者、发送日期、创建上下文环境（编写在
html）*/
public void sendMailForActivationAccount(String activationUrl, String email) {
// 创建邮件对象
MimeMessage mimeMessage = javaMailSender.createMimeMessage();
try {
MimeMessageHelper message = new MimeMessageHelper(mimeMessage, true);
// 设置邮箱主题
message.setSubject("抖音账号激活");
// 设置邮件发送者
message.setFrom(mailUsername);
// 设置邮件接受者（可以设置多个)
message.setTo(email);
// 设置邮件发送日期
message.setSentDate(new Date());
// 创建上下文环境(正文) 用thymeleaf
Context context = new Context();
// 将url注入html中，在html中直接用
// 当在页面点击链接时，会直接执行路径中方法
context.setVariable("activationUrl",activationUrl);
String text = templateEngine.process("activation-account.html",context);
message.setText(text,true);
} catch (MessagingException e) {
throw new RuntimeException(e);
}
// 发送邮件
javaMailSender.send(mimeMessage);
}
@Override
/*在注册阶段会调用该方法实现账号激活：根据注册阶段传递过来的确认码查询用户，调取用户信息
判断是否是有效激活时间，返回结果*/
public Map<String, Object> activation(String confirmCode) {
Map<String, Object> hm = new HashMap<>();
// 根据确认码查询用户
User user = um.selectUserByConfirmCode(confirmCode);
// 判断激活时间是否失效:现在时间是在激活时间之后吗
boolean after = LocalDateTime.now().isAfter(user.getActivationTime());
if(after){
hm.put("code",400);
hm.put("message","激活失效，请重启注册");
return hm;
}
// 修改状态值
int result = um.updateUserByConfirmCode(confirmCode);
if(result > 0){
hm.put("code",200);
hm.put("message","激活成功");
return hm;
}else {
hm.put("code",400);
hm.put("message","激活失效,请联系管理员");
return hm;
}
}
@Override
public int insertUser(User user) {
return um.insert(user);
}
@Override
public User selectUserByConfirmCode(String confirmCode) {
return um.selectUserByConfirmCode(confirmCode);
}
@Override
public int updateUserByConfirmCode(String confirmCode) {
return um.updateUserByConfirmCode(confirmCode);
}
@Override
public User selectUserByEmail(String email) {
return um.selectUserByEmail(email);
}
}mapper
public interface UserMapper extends BaseMapper<User> {
/*
* 根据确认码查询用户*/
@Select("SELECT email,activation_time FROM user WHERE confirm_code = #{confirmCode} AND is_valid = 0")
User selectUserByConfirmCode(@Param("confirmCode") String confirmCode);
/*
* 根据确认码查询用户并修改状态码为1*/
@Update("UPDATE user SET is_valid = 1 WHERE confirm_code = #{confirmCode}")
int updateUserByConfirmCode(@Param("confirmCode") String confirmCode);
/*
* 根据邮箱查询用户*/
@Select("SELECT * FROM user WHERE email = #{email} AND is_valid = 1")
User selectUserByEmail(@Param("email") String email);
}控制层
@Api("用户界面")
@RestController
@RequestMapping("user")
public class UserController {
@Resource
private UserService us;
@ApiOperation(value = "注册账号")
@PostMapping("create")
public Map<String,Object> createAccount(@RequestBody User user){
return us.createAccount(user);
}
@ApiOperation(value = "激活账号")
@GetMapping("activation")
/*通过邮件激活相当于网页传递数据。因为路径中追加了confirmCode所以会自动传参*/
public Map<String,Object> activation(String confirmCode){
return us.activation(confirmCode);
}
}前端代码
因为用的是thymeleaf写的所以目录结构如下（记得写在templates中）
注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
background-size: 100% 130%;
}
#login_box {
width: 20%;
height: 400px;
background-color: #00000060;
margin: auto;
margin-top: 10%;
text-align: center;
border-radius: 10px;
padding: 50px 50px;
}
h2 {
color: #ffffff90;
margin-top: 5%;
}
#input-box {
margin-top: 5%;
}
span {
color: #fff;
}
input {
border: 0;
width: 60%;
font-size: 15px;
color: #fff;
background: transparent;
border-bottom: 2px solid #fff;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
button {
margin-top: 50px;
width: 60%;
height: 30px;
border-radius: 10px;
border: 0;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 15px;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
#sign_up {
margin-top: 45%;
margin-left: 60%;
}
a {
color: #b94648;
}
</style>
</head>
<body>
<div id="login_box">
<h2>REGISTRY</h2>
<div id="input_box">
<input type="text" id = "email" name="email" placeholder="请输入用户名">
</div>
<div class="input_box">
<input type="password" id = "password" name="password" placeholder="请输入密码">
</div>
<button id = "registry">注册</button><br><br>
<p>Come to us ? <a href="login">Login</a></p>
</div>
/*当id:registry发生点击行为thymeleaf会接受相应过来的数据并转换成json格式，然后调用url路径下的方法创建账号
* result接收控制层返回的数据(Map)在网页提示创建成功或创建失败*/
<script type="text/javascript" charset="UTF-8">
$("#registry").on("click",function (){
$.ajax({
url:"/user/create",
type: "POST",
contentType: "application/json",
data: JSON.stringify({
email: $("#email").val(),
password: $("#password").val()
}),
dataType: "json",
success: function(result){
alert(result.message);
},
error: function(result){
alert("发生错误");
}
});
});
</script>
</body>
</html>
邮件正文：
<html>
<body>
<!--根据自己需要编写，-->
<div>
<p>Email 地址验证</p> <!--target:新的窗口打开超链接-->
<p>这封信是由<a href="https://www.douyin.com" target = "_blank">抖音</a>发送的</p>
<p>
由于你在抖音进行了新用户注册或用户修改，如果你没有进行过此操作，请忽略这封邮件。如果你是新用户或者修改你的账号
请点击下方链接：
</p>
<p>
<a th:href="@{${activationUrl}}"><span th:text="${activationUrl}"></span></a>
感谢你的访问，祝你生活愉快。
</p>
</div>
</body>
</html>登录代码
控制层
登录界面：http://localhost:8088/gameLogin/login
@Api(value = "登录页面")
@Controller
@RequestMapping("gameLogin")
public class LoginController {
@Resource
private UserService us;
@GetMapping("login")
public String login(){
return "login";
}
@GetMapping("registry")
public String registry(){
return "registry";
}
@PostMapping("loginAccount")
@ResponseBody
public Map<String,Object> loginAccount(@RequestBody User user){
return us.loginAccount(user);
}
}
业务层：
public interface UserService extends IService<User> {
Map<String,Object> loginAccount(User user);
}业务实现类：
@Override
/*
* 登录账号*/
public Map<String, Object> loginAccount(User user) {
Map<String, Object> hm = new HashMap<>();
User user1 = um.selectUserByEmail(user.getEmail());
// 如果账号不存在或未激活
if(user1 == null || user1.getIsValid() == (byte)0){
hm.put("code",400);
hm.put("message","该账户不存在或未激活");
return hm;
}
// 进行密码比对
String md5Pwd = SecureUtil.md5(user.getPassword()+user1.getSalt());
if(!md5Pwd.equals(user1.getPassword())){
hm.put("code",400);
hm.put("message","用户名或密码错误");
return hm;
}
hm.put("code",200);
hm.put("message","登陆成功");
return hm;
}前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
background-size: 100% 130%;
}
#login_box {
width: 20%;
height: 400px;
background-color: #00000060;
margin: auto;
margin-top: 10%;
text-align: center;
border-radius: 10px;
padding: 50px 50px;
}
h2 {
color: #ffffff90;
margin-top: 5%;
}
#input-box {
margin-top: 5%;
}
span {
color: #fff;
}
input {
border: 0;
width: 60%;
font-size: 15px;
color: #fff;
background: transparent;
border-bottom: 2px solid #fff;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
button {
margin-top: 50px;
width: 60%;
height: 30px;
border-radius: 10px;
border: 0;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 15px;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
#sign_up {
margin-top: 45%;
margin-left: 60%;
}
a {
color: #b94648;
}
</style>
</head>
<body>
<div id="login_box">
<h2>LOGIN</h2>
<div id="input_box">
<input type="text" id="email" name="email" placeholder="请输入用户名">
</div>
<div class="input_box">
<input type="password" id="password" name="password" placeholder="请输入密码">
</div>
<button id = "login">登录</button><br><br>
<p>New to us ? <a href="registry">Registry</a></p>
</div>
<script type="text/javascript" charset="UTF-8">
$("#login").on("click",function (){
$.ajax({
url:"/gameLogin/loginAccount",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ // 将对象转化为json格式
email: $("#email").val(),
password: $("#password").val()
}),
dataType: "json",
success: function(result){
alert(result.message);
if(200 == result.code) {
window.location.href = "https://www.douyin.com"
}
},
error: function(result){
alert("发生错误");
}
});
});
</script>
</body>
</html>
自动登录
package com.example.utils;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringBootConfiguration;
@SpringBootConfiguration
public class AutoStartLogin implements CommandLineRunner {
@Override
public void run(String ... args) {
try {
Runtime.getRuntime().exec("cmd /c start http://localhost:8088/gameLogin/login");
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
