Springboot+Vue实现团队邮箱邀请成员
Springboot+Vue实现团队邮箱邀请新成员
项目中还使用到了element-ui组件库和redis
- 效果展示
- 业务逻辑介绍
- 前端代码
- 后端代码
效果展示
这是团队信息界面
点击添加成员后，显示该页面,输入邮箱进行上传
业务逻辑介绍
前端功能
1、前端主要负责对邮箱获取，传递到后端，进行使用正则表达式进行一些邮箱规则的校验
2、在加载页面的时候我们需要去数据库中读出所有团队成员的信息，进行数据渲染
后端功能
1、在数据库中读取该项目对应的所有团队成员信息，返回给前端页面进行数据渲染；
2、判断输入的邮箱是否存在绑定的用户，如果不存在则返回信息，若存在才进行发送邮件
3、发送的邮件中附带有该用户的信息，使用redis缓存机制，维护一个唯一token标识，保存期限为30分钟
4、后端还要维护一个Controller用于通过邮件中的url来把新邀请到的队员信息保存在数据库中
后端主要业务流程图
前端代码
<template>
<div style="height:800px;width:600px;">
<div class="dialog-header">
<span class="header-title">开源社区span>
<el-button type="primary" @click="showAdd()" size="small" class="header-button">添加成员el-button>
div>
<div v-show="flag">
<div class="TeamHeader" >
<span>成员名称span>
<span>身份span>
<span>操作span>
div>
<div class="TeamItem" v-for="(member, index) in members" :key="index">
<div class="Item-avatar"><a-avatar shape="square" :size="32" icon="user" /> <span class="Item-name">{{member.username}}span>div>
<span class="Item-status">{{member.status}}span>
<a class="Item-options">删除a>
div>
div>
<div v-show="!flag">
<div class="Send-title">发送邮件邀请队友进入团队div>
<div class="Send-input">
<div><el-input v-model="email" placeholder="请输入内容">el-input>div>
div>
<div class="Send-bottom">
<el-button type="primary" size="small" @click="addMember()" class="header-button">确认邀请el-button>
<el-button size="small" @click="closeAdd()">返回上级el-button>
div>
div>
div>
template>
<script>
import qs from 'qs'
export default {
data() {
return {
activeName: 'second',
flag:true,
email:'',
members:[{
username:'tttttttttttt1',
status:'管理员',
},
{
username:'tt2',
status:'普通成员',
},{
username:'tt2',
status:'普通成员',
}],
selectprojectid:''
};
},
methods: {
//这里需要完成页面加载时，从数据库读取项目的团队成员信息进行显示
getProject(){
var _this = this;
this.axios.post('/',qs.stringify({
})
).then(function (response) {
if(response.data.code == 200){
}
}).catch(function (error) {
console.log(error);
});
},
showAdd(){
this.flag = false;
},
//点击添加成员，触发的方法
addMember(){
var _this = this;
this.axios.post("/index/sendemail",{
founder:this.$router.query.founder, //从url中获取到信息
project:this.$router.query.project,
email:this.email,
}).then(function(response){
if(response.data.code == 200){
_this.$message.info("发送邮件成功");
_this.email = '';
}
})
}
},
// created() {
// this.getProject();
// },
};
script>
<style scoped>
.tab-create{
position: absolute;
right: 80px;
top: 115px;
}
.Items{
margin: 0px;
padding: 0px;
}
.Item-Pagination{
margin: 25px;
}
.dialog-header{
width: 90%;
text-align: left;
padding: 3px 0px;
margin: 0px auto;
border-bottom: 1px solid rgb(245, 247, 250);
}
.header-title{
display: inline-block;
width: 80%;
font-size: 16px;
font-weight: 600;
}
.header-button{
text-align: center;
}
.TeamHeader{
width: 90%;
padding: 4px 20px;
border-bottom: 1px solid rgb(245, 247, 250);
margin: 0 auto;
text-align: left;
}
.TeamHeader span{
display: inline-block;
}
.TeamHeader span:nth-child(2){
margin-left: 200px;
}
.TeamHeader span:nth-child(3){
margin-left: 130px;
}
.TeamItem{
width: 90%;
padding: 4px 20px;
border-bottom: 1px solid rgb(245, 247, 250);
margin: 0 auto;
text-align: left;
height: 50px;
line-height: 42px;
}
.Item-avatar{
display: inline-block;
width: 242px;
height: 42px;
}
.Item-name{
display: inline-block;
margin-left: 10px;
width: 190px;
}
.Item-status{
display: inline-block;
width: 60px;
text-align: center;
}
.Item-options{
margin-left: 113px;
}
.Send-title{
width: 100%;
height: 50px;
font-size: 20px;
font-weight: 600;
line-height: 50px;
}
.Send-input{
text-align: center;
width: 100%;
margin-top: 20px;
}
.Send-input div{
width: 300px;
margin: 0 auto;
}
.Send-bottom{
margin-top: 20px;
}
style>
Controller层
controller层两个，一个用户发送，一个用户接收
import cn.hutool.http.HttpResponse;
import com.devplatform.entity.EmailMessage;
import com.devplatform.lang.Result;
import com.devplatform.service.ProjectService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
@RequestMapping("/index")
public class ProjectController {
@Autowired
ProjectService projectService;
@PostMapping("/sendemail") //这里是发送
@ResponseBody
public Result addMember(@RequestBody EmailMessage emailMessage){
return projectService.sendEmial(emailMessage);
}
@GetMapping("/lookCode/{token}") //这里是监听用户通过邮件中url访问
public Result lookCode(@PathVariable("token") String token){
System.out.println("访问了token");
System.out.println(token);
return projectService.lookCode(token);
}
}
Team实体类
package com.devplatform.entity;
public class Team {
private String teamid; //唯一标识
private String projectid; //标识该团队对应哪个项目
private String username; //用户名
private String status; //是否是团队管理员
public String getTeamid() {return teamid;}
public void setTeamid(String teamid) {this.teamid = teamid;}
public String getProjectid() {return projectid;}
public void setProjectid(String projectid) {this.projectid = projectid;}
public String getUsername() {return username;}
public void setUsername(String username) {this.username = username;}
public String getStatus() {return status;}
public void setStatus(String status) {this.status = status;}
}
Service层
package com.devplatform.service.impl;
import com.devplatform.email.CodeUtils;
import com.devplatform.entity.*;
import com.devplatform.lang.Result;
import com.devplatform.mapper.ProjectMapper;
import com.devplatform.service.ProjectService;
import com.devplatform.util.GenerateID;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class ProjectServiceImpl implements ProjectService {
@Autowired
ProjectMapper projectMapper;
@Autowired
CodeUtils codeUtils;
@Autowired
UserMapper userMapper;
@Override
public Result sendEmial(EmailMessage emailMessage) {
String username = userMapper.getUserNameByEmial(emailMessage.getEmail());
if (username == null){
return Result.fail("用户不存在");
}else {
try {
boolean flag = sendCode(emailMessage);
if (flag){
return Result.success("邮件发送成功");
}else {
return Result.fail("邮件发送失败");
}
}catch (Exception e){
System.out.println("出错了");
return Result.fail("邮件发送失败");
}
}
}
@Override
public Result lookCode(String token) {
boolean expire = eqToken(token);
if (!expire){
return Result.fail("凭证过期了");
}else {
try {
EmailMessage emailMessage = codeUtils.findEmailMessage(token);
Team team = new Team();
String teamid = "T"+GenerateID.getGeneratID();
team.setTeamid(teamid);
team.setProjectid(emailMessage.getProjectid());
String username = userMapper.getUserNameByEmial(emailMessage.getEmail());
team.setUsername(username);
team.setStatus("普通用户");
return addMember(team);
}catch (Exception e){
return Result.fail("失败");
}
}
}
//用户在规定时间内访问url了调用该方法
@Override
public Result addMember(Team team) {
try {
projectMapper.addMember(team);
return Result.success("验证成功");
}catch (Exception e){
return Result.fail("验证失败");
}
}
@Override
public boolean sendCode(EmailMessage emailMessage) {
if (codeUtils.sendCode(emailMessage))
return true;
else
return false;
}
//判断token是否相等的方法
@Override
public boolean eqToken(String token) {
boolean flag = codeUtils.eqToken(token);
if (flag){
return true;
}else {
return false;
}
}
}
工具类GenerateID和CodeUtils
package com.devplatform.email;
import com.devplatform.entity.EmailMessage;
import com.devplatform.redis.RedisUtil;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Component;
import javax.annotation.Resource;
import javax.mail.internet.MimeMessage;
import java.util.UUID;
@Component
public class CodeUtils {
@Resource
JavaMailSender mailSender;
@Resource
RedisUtil redisUtil;
//生成链接，并给接收的邮箱发送邮件
public boolean sendCode(EmailMessage emailMessage){
MimeMessage message = mailSender.createMimeMessage();
try {
MimeMessageHelper mimeMessageHelper = new MimeMessageHelper(message);
String token = UUID.randomUUID().toString(); // 生成UUID
redisUtil.set(token,emailMessage);
redisUtil.expire(token,1800);
mimeMessageHelper.setFrom("[email protected]"); //这里设置的是发送者的邮箱
mimeMessageHelper.setTo(emailMessage.getEmail()); //接受者邮箱
mimeMessageHelper.setSubject("加入团队"); //设置邮箱标题
String html = "\n"+ //设置邮箱内容
"\n"+
"请点击下发链接加入团队\n"
+
"+token+"\">http://localhost: 8080/lookCode/"+token+""+
"\n"+
"";
mimeMessageHelper.setText(html,true);
mailSender.send(message);
System.out.println("发送成功");
return true;
}catch (Exception e){
System.out.println("发送失败");
return false;
}
}
//判断token是否过期
public boolean eqToken(String token){
return redisUtil.hasKey(token);
}
//根据token查询用户信息
public EmailMessage findEmailMessage(String token){
return (EmailMessage) redisUtil.get(token);
}
}
package com.devplatform.util;
import java.text.SimpleDateFormat;
import java.util.Date;
public class GenerateID {
public GenerateID(){}
public static String getDate(String sformat) {
Date currentTime = new Date();
SimpleDateFormat formatter = new SimpleDateFormat(sformat);
String dateString = formatter.format(currentTime);
return dateString;
}
public static String getRandomNum(int num){
String numStr = "";
for(int i = 0; i < num; i++){
numStr += (int)(10*(Math.random()));
}
return numStr;
}
public static String getGeneratID(){
String sformat = "MMddhhmmssSSS";
int num = 3;
String idStr = getDate(sformat) + getRandomNum(num);
return idStr;
}
}
Mapper层
package com.devplatform.mapper;
import com.devplatform.entity.Team;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
@Repository
public interface ProjectMapper {
int addMember(Team team);
}
Mapper.xml
<insert id="addMember">
insert into team(teamid,projectid,username,status) values (#{teamid},#{projectid},#{username},#{status})
insert>
收到的邮件是这样的，当你点击链接的时候，就会再次请求后端的接口，把该成员的信息保存在数据库中
最后附上redis配置类和工具类
package com.devplatform.redis;
import com.fasterxml.jackson.annotation.JsonAutoDetect;
import com.fasterxml.jackson.annotation.PropertyAccessor;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.jsontype.impl.LaissezFaireSubTypeValidator;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.StringRedisSerializer;
@Configuration
public class RedisConfig {
//redis的固定模板，在真实开发中直接使用即可
//编写自己的redisTemplate
@Bean("SimpleRedisTemplate")
@SuppressWarnings("all")
public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory redisConnectionFactory) {
//为了开发方便，一般直接使用，
RedisTemplate<String, Object> template = new RedisTemplate();
//设置连接工厂，源码默认就可
template.setConnectionFactory(redisConnectionFactory);
//json序列化配置
Jackson2JsonRedisSerializer<Object> jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer<>(Object.class);
ObjectMapper om = new ObjectMapper();
om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
//om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL); //老版本的，现在不建议使用
om.activateDefaultTyping(LaissezFaireSubTypeValidator.instance, ObjectMapper.DefaultTyping.NON_FINAL);
jackson2JsonRedisSerializer.setObjectMapper(om);
//string的序列化
StringRedisSerializer stringRedisSerializer = new StringRedisSerializer();
//key采用String的序列化方式
template.setKeySerializer(stringRedisSerializer);
//hash的key采用String的序列化方式
template.setHashKeySerializer(stringRedisSerializer);
//value序列化方式采用jackson
template.setValueSerializer(jackson2JsonRedisSerializer);
//hash的value也采用jackson
template.setHashValueSerializer(jackson2JsonRedisSerializer);
//将所有配置set进配置文件中
template.afterPropertiesSet();
return template;
}
}
package com.devplatform.redis;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;
import java.util.Collection;
import java.util.Set;
import java.util.concurrent.TimeUnit;
import java.util.List;
import java.util.Map;
/**
* Redis工具类，使用之前请确保RedisTemplate成功注入
*
* @author ye17186
* @version 2019/2/22 10:48
*/
@Component
public final class RedisUtil {
@Autowired
@Qualifier("SimpleRedisTemplate")
private RedisTemplate<String, Object> redisTemplate;
// =============================common============================
/**
* 指定缓存失效时间
* @param key 键
* @param time 时间(秒)
*/
public boolean expire(String key, long time) {
try {
if (time > 0) {
redisTemplate.expire(key, time, TimeUnit.SECONDS);
}
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 根据key 获取过期时间
* @param key 键 不能为null
* @return 时间(秒) 返回0代表为永久有效
*/
public long getExpire(String key) {
return redisTemplate.getExpire(key, TimeUnit.SECONDS);
}
/**
* 判断key是否存在
* @param key 键
* @return true 存在 false不存在
*/
public boolean hasKey(String key) {
try {
return redisTemplate.hasKey(key);
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 删除缓存
* @param key 可以传一个值 或多个
*/
@SuppressWarnings("unchecked")
public void del(String... key) {
if (key != null && key.length > 0) {
if (key.length == 1) {
redisTemplate.delete(key[0]);
} else {
redisTemplate.delete((Collection<String>) CollectionUtils.arrayToList(key));
}
}
}
// ============================String=============================
/**
* 普通缓存获取
* @param key 键
* @return 值
*/
public Object get(String key) {
return key == null ? null : redisTemplate.opsForValue().get(key);
}
/**
* 普通缓存放入
* @param key 键
* @param value 值
* @return true成功 false失败
*/
public boolean set(String key, Object value) {
try {
redisTemplate.opsForValue().set(key, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 普通缓存放入并设置时间
* @param key 键
* @param value 值
* @param time 时间(秒) time要大于0 如果time小于等于0 将设置无限期
* @return true成功 false 失败
*/
public boolean set(String key, Object value, long time) {
try {
if (time > 0) {
redisTemplate.opsForValue().set(key, value, time, TimeUnit.SECONDS);
} else {
set(key, value);
}
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 递增
* @param key 键
* @param delta 要增加几(大于0)
*/
public long incr(String key, long delta) {
if (delta < 0) {
throw new RuntimeException("递增因子必须大于0");
}
return redisTemplate.opsForValue().increment(key, delta);
}
/**
* 递减
* @param key 键
* @param delta 要减少几(小于0)
*/
public long decr(String key, long delta) {
if (delta < 0) {
throw new RuntimeException("递减因子必须大于0");
}
return redisTemplate.opsForValue().increment(key, -delta);
}
// ================================Map=================================
/**
* HashGet
* @param key 键 不能为null
* @param item 项 不能为null
*/
public Object hget(String key, String item) {
return redisTemplate.opsForHash().get(key, item);
}
/**
* 获取hashKey对应的所有键值
* @param key 键
* @return 对应的多个键值
*/
public Map<Object, Object> hmget(String key) {
return redisTemplate.opsForHash().entries(key);
}
/**
* HashSet
* @param key 键
* @param map 对应多个键值
*/
public boolean hmset(String key, Map<String, Object> map) {
try {
redisTemplate.opsForHash().putAll(key, map);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* HashSet 并设置时间
* @param key 键
* @param map 对应多个键值
* @param time 时间(秒)
* @return true成功 false失败
*/
public boolean hmset(String key, Map<String, Object> map, long time) {
try {
redisTemplate.opsForHash().putAll(key, map);
if (time > 0) {
expire(key, time);
}
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 向一张hash表中放入数据,如果不存在将创建
*
* @param key 键
* @param item 项
* @param value 值
* @return true 成功 false失败
*/
public boolean hset(String key, String item, Object value) {
try {
redisTemplate.opsForHash().put(key, item, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 向一张hash表中放入数据,如果不存在将创建
*
* @param key 键
* @param item 项
* @param value 值
* @param time 时间(秒) 注意:如果已存在的hash表有时间,这里将会替换原有的时间
* @return true 成功 false失败
*/
public boolean hset(String key, String item, Object value, long time) {
try {
redisTemplate.opsForHash().put(key, item, value);
if (time > 0) {
expire(key, time);
}
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 删除hash表中的值
*
* @param key 键 不能为null
* @param item 项 可以使多个 不能为null
*/
public void hdel(String key, Object... item) {
redisTemplate.opsForHash().delete(key, item);
}
/**
* 判断hash表中是否有该项的值
*
* @param key 键 不能为null
* @param item 项 不能为null
* @return true 存在 false不存在
*/
public boolean hHasKey(String key, String item) {
return redisTemplate.opsForHash().hasKey(key, item);
}
/**
* hash递增 如果不存在,就会创建一个 并把新增后的值返回
*
* @param key 键
* @param item 项
* @param by 要增加几(大于0)
*/
public double hincr(String key, String item, double by) {
return redisTemplate.opsForHash().increment(key, item, by);
}
/**
* hash递减
*
* @param key 键
* @param item 项
* @param by 要减少记(小于0)
*/
public double hdecr(String key, String item, double by) {
return redisTemplate.opsForHash().increment(key, item, -by);
}
// ============================set=============================
/**
* 根据key获取Set中的所有值
* @param key 键
*/
public Set<Object> sGet(String key) {
try {
return redisTemplate.opsForSet().members(key);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 根据value从一个set中查询,是否存在
*
* @param key 键
* @param value 值
* @return true 存在 false不存在
*/
public boolean sHasKey(String key, Object value) {
try {
return redisTemplate.opsForSet().isMember(key, value);
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 将数据放入set缓存
*
* @param key 键
* @param values 值 可以是多个
* @return 成功个数
*/
public long sSet(String key, Object... values) {
try {
return redisTemplate.opsForSet().add(key, values);
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
/**
* 将set数据放入缓存
*
* @param key 键
* @param time 时间(秒)
* @param values 值 可以是多个
* @return 成功个数
*/
public long sSetAndTime(String key, long time, Object... values) {
try {
Long count = redisTemplate.opsForSet().add(key, values);
if (time > 0)
expire(key, time);
return count;
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
/**
* 获取set缓存的长度
*
* @param key 键
*/
public long sGetSetSize(String key) {
try {
return redisTemplate.opsForSet().size(key);
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
/**
* 移除值为value的
*
* @param key 键
* @param values 值 可以是多个
* @return 移除的个数
*/
public long setRemove(String key, Object... values) {
try {
Long count = redisTemplate.opsForSet().remove(key, values);
return count;
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
// ===============================list=================================
/**
* 获取list缓存的内容
*
* @param key 键
* @param start 开始
* @param end 结束 0 到 -1代表所有值
*/
public List<Object> lGet(String key, long start, long end) {
try {
return redisTemplate.opsForList().range(key, start, end);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 获取list缓存的长度
*
* @param key 键
*/
public long lGetListSize(String key) {
try {
return redisTemplate.opsForList().size(key);
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
/**
* 通过索引 获取list中的值
*
* @param key 键
* @param index 索引 index>=0时， 0 表头，1 第二个元素，依次类推；index<0时，-1，表尾，-2倒数第二个元素，依次类推
*/
public Object lGetIndex(String key, long index) {
try {
return redisTemplate.opsForList().index(key, index);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 将list放入缓存
*
* @param key 键
* @param value 值
*/
public boolean lSet(String key, Object value) {
try {
redisTemplate.opsForList().rightPush(key, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 将list放入缓存
* @param key 键
* @param value 值
* @param time 时间(秒)
*/
public boolean lSet(String key, Object value, long time) {
try {
redisTemplate.opsForList().rightPush(key, value);
if (time > 0)
expire(key, time);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 将list放入缓存
*
* @param key 键
* @param value 值
* @return
*/
public boolean lSet(String key, List<Object> value) {
try {
redisTemplate.opsForList().rightPushAll(key, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 将list放入缓存
*
* @param key 键
* @param value 值
* @param time 时间(秒)
* @return
*/
public boolean lSet(String key, List<Object> value, long time) {
try {
redisTemplate.opsForList().rightPushAll(key, value);
if (time > 0)
expire(key, time);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 根据索引修改list中的某条数据
*
* @param key 键
* @param index 索引
* @param value 值
* @return
*/
public boolean lUpdateIndex(String key, long index, Object value) {
try {
redisTemplate.opsForList().set(key, index, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 移除N个值为value
*
* @param key 键
* @param count 移除多少个
* @param value 值
* @return 移除的个数
*/
public long lRemove(String key, long count, Object value) {
try {
Long remove = redisTemplate.opsForList().remove(key, count, value);
return remove;
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
}