项目集合(分享经验)

实习项目(渠道集中管理平台)

登录页面

抖音APP

本项目是由本人从0-1独立开发而成,原型是当今热门的抖音短视频APP。

前端

技术难点:

1.实现抖音视频播放界面推荐、直播、关注等视频种类的切换效果。
<template>
    <div class="testsw">
        <!-- 显示当前的X位置、起始位置以及是否正在拖动的状态 -->
        <p>current: {{ currentX }}</p>
        <p>start: {{ startX }}</p>
        <p>isDragging: {{ isDragging }}</p>

        <ul ref="ul" class="nav-list">
            <li @click="go(index)" v-for="(box, index) in boxes" :key="index" :class="{ active: activeIndex === index }">
                {{ box.boxtest }}
            </li>
        </ul>

        <!-- 容器div,包含鼠标和触摸事件监听 -->
        <div class="container" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="drag" @mouseleave="stopDrag"
            @touchstart="startDrag" @touchend="stopDrag" @touchmove="drag"
            :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
            <!-- 循环渲染每个box,设置样式 -->
            <div v-for="( box, index ) in  boxes " :key="index" class="box"
                :style="{ left: box.left + 'px', backgroundColor: box.color, width: boxWidth + 'px', height: boxHeight + 'px' }">
               
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isDragging: false, // 是否正在拖动的标志
            startX: 0, // 拖动的起始X位置
            currentX: 0, // 当前的X位置
            boxWidth: 400, // 每个box的宽度
            activeIndex: null, // 当前被点击的li索引
            boxHeight: 800,
            boxes: [

            ] // box的数据,包括颜色和左边距
        };
    },
 
    created() {
        // 初始化 boxes 的数据,包括颜色和左边距
        this.boxes = [
            { color: "red", left: 0, boxtest: "推荐" },
            { color: "blue", left: this.boxWidth, boxtest: "直播" },
            { color: "yellow", left: 2 * this.boxWidth, boxtest: "关注" },
            { color: "pink", left: 3 * this.boxWidth, boxtest: "同城" },
        ];
    },
    methods: {
        startDrag(event) {
            event.preventDefault();
            this.isDragging = true;
            this.startX = this.getEventClientX(event) - this.currentX;
        },
        stopDrag(event) {
            event.preventDefault();
            this.isDragging = false;
            this.updateBoxPositionBasedOnCurrentX();
        },
        drag(event) {
            if (this.isDragging) {
                let newX = this.getEventClientX(event) - this.startX;
                newX = Math.max(-(this.boxWidth * (this.boxes.length - 1)), Math.min(newX, 0));
                this.currentX = newX;
                this.updateBoxesPosition();
                this.updateLiPosition();
            }
        },
        getEventClientX(event) {
            return event.type.startsWith("touch") ? event.touches[0].clientX : event.clientX;
        },
        updateBoxesPosition() {
            this.boxes.forEach((box, index) => {
                box.left = this.currentX + index * this.boxWidth;
            });
        },
        updateBoxPositionBasedOnCurrentX() {
            const nearestIndex = Math.round(Math.abs(this.currentX) / this.boxWidth);
            this.currentX = -nearestIndex * this.boxWidth;
            this.updateBoxesPosition();
            this.updateLiPosition();
        },
        updateLiPosition() {
            const ul = this.$refs.ul;
            const lis = ul.querySelectorAll('li');
            lis.forEach((li, index) => {
                const liWidth = li.offsetWidth;
                const boxLeft = this.currentX + index * this.boxWidth;
                li.style.transform = `translateX(${boxLeft}px)`;
            });
        },
        go(index) {
            this.activeIndex = index;
            const newX = -index * this.boxWidth;
            this.currentX = newX;
            this.updateBoxesPosition();
            this.updateLiPosition();
        },
    }
};
</script>

<style scoped>
/* 去掉li前面的黑点 */
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* 使用flex布局 */
    overflow: hidden;
    /* 隐藏溢出部分 */
    width: 100%;
    /* ul宽度 */
}

/* 横向排列li */
.nav-list {
    display: flex;
    /* 使用flex布局 */
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    margin-right: 8px;
    /* 可选:为每个li元素添加间距 */
    white-space: nowrap;
    /* 确保文本不换行 */
    cursor: pointer;
    /* 添加鼠标手型指示 */
    padding: 6px;
    /* 为li添加内边距 */
    transition: transform 0.3s ease;
    /* 位置变化的过渡效果 */
}

/* 被点击的li的样式 */
li.active {
    font-weight: bold;
    color: red;
    /* 可自定义为你想要的颜色 */
    text-decoration: underline;
    /* 添加下划线 */
    border-bottom: 2px solid red;
    /* 可选:为active状态添加下边框 */
}

.container {
    display: flex;
    /* 使用flex布局 */

    position: relative;
    /* 相对定位 */
    overflow: hidden;
    /* 隐藏溢出部分 */
}

.box {

    position: absolute;
    /* 绝对定位 */
    transition: left 0.3s ease;
    /* 位置变化的过渡效果 */
}
</style>
2.实现视频无限滑动播放的效果
<template>
    <div class="testsw">
        <div class="container" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="drag" @mouseleave="stopDrag"
            @touchstart="startDrag" @touchend="stopDrag" @touchmove="drag"
            :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
            <div v-for="(box, index) in boxes" :key="index" class="box"
                :style="{ top: box.top + 'px', backgroundColor: box.color, width: boxWidth + 'px', height: boxHeight + 'px' }">
                <video ref="videos" class="videoone" :src="videonum[index]" preload="true" loop
                    x5-video-player-type="h5-page" x5-video-player-fullscreen="false" webkit-playsinline="true"
                    x5-playsinline="true" playsinline="true">
                    <p>您的浏览器不支持 video 标签。</p>
                </video>
            </div>
        </div>
    </div>
</template>

<script>
import oneImg from '@/assets/one.mp4';
import twoImg from '@/assets/two.mp4';
import threeImg from '@/assets/three.mp4';
import fourImg from '@/assets/four.mp4';

export default {
    data() {
        return {
            isDragging: false,
            startY: 0,
            currentY: 0,
            boxWidth: 400,
            activeIndex: null,
            boxHeight: 800,
            boxes: [],
            videonum: [oneImg, twoImg, threeImg, fourImg],
        };
    },
    created() {
        this.boxes = [
            { color: "red", top: 0, boxtest: "推荐" },
            { color: "blue", top: 1 * this.boxHeight, boxtest: "直播" },
            { color: "yellow", top: 2 * this.boxHeight, boxtest: "关注" },
            { color: "pink", top: 3 * this.boxHeight, boxtest: "同城" },
        ];
    },
    mounted() {
        this.updateVideoPlayback();
    },
    methods: {
        startDrag(event) {
            event.preventDefault();
            this.isDragging = true;
            this.startY = this.getEventClientY(event) - this.currentY;
        },
        stopDrag(event) {
            event.preventDefault();
            this.isDragging = false;
            this.updateBoxPositionBasedOnCurrentY();
            this.updateVideoPlayback();
        },
        drag(event) {
            if (this.isDragging) {
                let newY = this.getEventClientY(event) - this.startY;
                newY = Math.max(-(this.boxHeight * (this.boxes.length - 1)), Math.min(newY, 0));
                this.currentY = newY;
                this.updateBoxesPosition();
            }
        },
        getEventClientY(event) {
            return event.type.startsWith("touch") ? event.touches[0].clientY : event.clientY;
        },
        updateBoxesPosition() {
            this.boxes.forEach((box, index) => {
                box.top = this.currentY + index * this.boxHeight;
            });
        },
        updateBoxPositionBasedOnCurrentY() {
            const nearestIndex = Math.round(Math.abs(this.currentY) / this.boxHeight);
            this.currentY = -nearestIndex * this.boxHeight;
            this.updateBoxesPosition();
        },
        updateVideoPlayback() {
            this.$refs.videos.forEach((video, index) => {
                const box = this.boxes[index];
                const boxTop = box.top;
                const boxBottom = boxTop + this.boxHeight;
                const containerHeight = this.boxHeight;

                // 如果视频盒子完全在视口内,播放视频,否则暂停
                if (boxTop >= 0 && boxBottom <= containerHeight) {
                    video.play();
                } else {
                    video.pause();
                }
            });
        },
        go(index) {
            this.activeIndex = index;
            const newY = -index * this.boxHeight;
            this.currentY = newY;
            this.updateBoxesPosition();
            this.updateVideoPlayback();
        },
    },
};
</script>

<style scoped>
.videoone {
    display: block;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.box {
    position: absolute;
    transition: top 0.3s ease;
}
</style>
3.二者组合而成就是抖音的视频播放界面
<template>
    <div class="testsw">
        <!-- 显示当前的X位置、起始位置以及是否正在拖动的状态 -->
        <p>current: {{ currentX }}</p>
        <p>start: {{ startX }}</p>
        <p>isDragging: {{ isDragging }}</p>

        <ul ref="ul" class="nav-list">
            <li @click="go(index)" v-for="(box, index) in boxes" :key="index" :class="{ active: activeIndex === index }">
                {{ box.boxtest }}
            </li>
        </ul>

        <!-- 容器div,包含鼠标和触摸事件监听 -->
        <div class="container" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="drag" @mouseleave="stopDrag"
            @touchstart="startDrag" @touchend="stopDrag" @touchmove="drag"
            :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
            <!-- 循环渲染每个box,设置样式 -->
            <div v-for="( box, index ) in  boxes " :key="index" class="box"
                :style="{ left: box.left + 'px', backgroundColor: box.color, width: boxWidth + 'px', height: boxHeight + 'px' }">
                <shi-ping></shi-ping>
            </div>
        </div>
    </div>
</template>

<script>
import ShiPing from '../components/shiping.vue';
export default {
    data() {
        return {
            isDragging: false, // 是否正在拖动的标志
            startX: 0, // 拖动的起始X位置
            currentX: 0, // 当前的X位置
            boxWidth: 400, // 每个box的宽度
            activeIndex: null, // 当前被点击的li索引
            boxHeight: 800,
            boxes: [

            ] // box的数据,包括颜色和左边距
        };
    },
    components: {
        ShiPing

    },

    created() {
        // 初始化 boxes 的数据,包括颜色和左边距
        this.boxes = [
            { color: "red", left: 0, boxtest: "推荐" },
            { color: "blue", left: this.boxWidth, boxtest: "直播" },
            { color: "yellow", left: 2 * this.boxWidth, boxtest: "关注" },
            { color: "pink", left: 3 * this.boxWidth, boxtest: "同城" },
        ];
    },
    methods: {
        startDrag(event) {
            event.preventDefault();
            this.isDragging = true;
            this.startX = this.getEventClientX(event) - this.currentX;
        },
        stopDrag(event) {
            event.preventDefault();
            this.isDragging = false;
            this.updateBoxPositionBasedOnCurrentX();
        },
        drag(event) {
            if (this.isDragging) {
                let newX = this.getEventClientX(event) - this.startX;
                newX = Math.max(-(this.boxWidth * (this.boxes.length - 1)), Math.min(newX, 0));
                this.currentX = newX;
                this.updateBoxesPosition();
                this.updateLiPosition();
            }
        },
        getEventClientX(event) {
            return event.type.startsWith("touch") ? event.touches[0].clientX : event.clientX;
        },
        updateBoxesPosition() {
            this.boxes.forEach((box, index) => {
                box.left = this.currentX + index * this.boxWidth;
            });
        },
        updateBoxPositionBasedOnCurrentX() {
            const nearestIndex = Math.round(Math.abs(this.currentX) / this.boxWidth);
            this.currentX = -nearestIndex * this.boxWidth;
            this.updateBoxesPosition();
            this.updateLiPosition();
        },
        updateLiPosition() {
            const ul = this.$refs.ul;
            const lis = ul.querySelectorAll('li');
            lis.forEach((li, index) => {
                const liWidth = li.offsetWidth;
                const boxLeft = this.currentX + index * this.boxWidth;
                li.style.transform = `translateX(${boxLeft}px)`;
            });
        },
        go(index) {
            this.activeIndex = index;
            const newX = -index * this.boxWidth;
            this.currentX = newX;
            this.updateBoxesPosition();
            this.updateLiPosition();
        },
    }
};
</script>

<style scoped>
/* 去掉li前面的黑点 */
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* 使用flex布局 */
    overflow: hidden;
    /* 隐藏溢出部分 */
    width: 100%;
    /* ul宽度 */
}

/* 横向排列li */
.nav-list {
    display: flex;
    /* 使用flex布局 */
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    margin-right: 8px;
    /* 可选:为每个li元素添加间距 */
    white-space: nowrap;
    /* 确保文本不换行 */
    cursor: pointer;
    /* 添加鼠标手型指示 */
    padding: 6px;
    /* 为li添加内边距 */
    transition: transform 0.3s ease;
    /* 位置变化的过渡效果 */
}

/* 被点击的li的样式 */
li.active {
    font-weight: bold;
    color: red;
    /* 可自定义为你想要的颜色 */
    text-decoration: underline;
    /* 添加下划线 */
    border-bottom: 2px solid red;
    /* 可选:为active状态添加下边框 */
}

.container {
    display: flex;
    /* 使用flex布局 */

    position: relative;
    /* 相对定位 */
    overflow: hidden;
    /* 隐藏溢出部分 */
}

.box {

    position: absolute;
    /* 绝对定位 */
    transition: left 0.3s ease;
    /* 位置变化的过渡效果 */
}
</style>

一些知识

瑞吉外卖

晨旭头条

1

2.

3.

4.

蘑菇博客

使用rabbitmq发送邮件

package com.bruce.tanyunblog.xo.utils;

import com.bruce.tanyunblog.commons.entity.User;
import com.bruce.tanyunblog.xo.global.SysConf;
import lombok.extern.slf4j.Slf4j;
import org.springframework.amqp.rabbit.core.RabbitTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.cloud.context.config.annotation.RefreshScope;
import org.springframework.stereotype.Component;

import java.util.HashMap;
import java.util.Map;

/**
 * 用于RabbitMQ发送消息
 *
 * @author 陌溪
 * @date 2020年4月29日11:56:10
 */
@Slf4j
@RefreshScope
@Component
public class RabbitMqUtil {

    public static final String EXCHANGE_DIRECT = "exchange.direct";
    public static final String ROUTING_KEY_EMAIL = "tanyun.email";
    @Autowired
    private RabbitTemplate rabbitTemplate;
    @Value(value = "${data.web.url}")
    private String dataWebUrl;
    @Value(value = "${data.website.url}")
    private String dataWebsiteUrl;

    /**
     * 网站英文名
     */
    @Value(value = "${data.web.project_name_en}")
    private String PROJECT_NAME_EN;
    /**
     * 网站中文名
     */
    @Value(value = "${data.web.project_name}")
    private String PROJECT_NAME;
    /**
     * 网站LOGO
     */
    @Value(value = "${data.web.logo}")
    private String LOGO;

    /**
     * 发送邮件
     *
     * @param email
     * @param text
     */
    private void sendEmail(String email, String text) {
        Map<String, Object> result = new HashMap<>();
        result.put(SysConf.SUBJECT, PROJECT_NAME);
        result.put(SysConf.RECEIVER, email);
        result.put(SysConf.TEXT, text);
        //发送到RabbitMq
        rabbitTemplate.convertAndSend(EXCHANGE_DIRECT, ROUTING_KEY_EMAIL, result);
    }

    /**
     * 发送评论邮件
     */
    public void sendCommentEmail(Map<String, String> map) {
        String email = map.get(SysConf.EMAIL);
        String text = map.get(SysConf.TEXT);
        String toText = map.get(SysConf.TO_TEXT);
        String nickName = map.get(SysConf.NICKNAME);
        String toUserNickName = map.get(SysConf.TO_NICKNAME);
        String userUid = map.get(SysConf.USER_UID);
        String url = map.get(SysConf.URL);
        String content =
                "<html>\r\n" +
                        " <head>\r\n" +
                        "  <title> " + PROJECT_NAME + "</title>\r\n" +
                        " </head>\r\n" +
                        " <body>\r\n" +
                        "  <div id=\"contentDiv\" onmouseover=\"getTop().stopPropagation(event);\" onclick=\"getTop().preSwapLink(event, 'spam', 'ZC1222-PrLAp4T0Z7Z7UUMYzqLkb8a');\" style=\"position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7;\" class=\"body\">    \r\n" +
                        "  <div id=\"qm_con_body\"><div id=\"mailContentContainer\" class=\"qmbox qm_con_body_content qqmail_webmail_only\" style=\"\">\r\n" +
                        "<style>\r\n" +
                        "  .qmbox .email-body{color:#40485B;font-size:14px;font-family:-apple-system, \"Helvetica Neue\", Helvetica, \"Nimbus Sans L\", \"Segoe UI\", Arial, \"Liberation Sans\", \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Wenquanyi Micro Hei\", \"WenQuanYi Zen Hei\", \"ST Heiti\", SimHei, \"WenQuanYi Zen Hei Sharp\", sans-serif;background:#f8f8f8;}.qmbox .pull-right{float:right;}.qmbox a{color:#FE7300;text-decoration:underline;}.qmbox a:hover{color:#fe9d4c;}.qmbox a:active{color:#b15000;}.qmbox .logo{text-align:center;margin-bottom:20px;}.qmbox .panel{background:#fff;border:1px solid #E3E9ED;margin-bottom:10px;}.qmbox .panel-header{font-size:18px;line-height:30px;padding:10px 20px;background:#fcfcfc;border-bottom:1px solid #E3E9ED;}.qmbox .panel-body{padding:20px;}.qmbox .container{width:50%;min-width:300px;padding:20px;margin:0 auto;}.qmbox .text-center{text-align:center;}.qmbox .thumbnail{padding:4px;max-width:100%;border:1px solid #E3E9ED;}.qmbox .btn-primary{color:#fff;font-size:16px;padding:8px 14px;line-height:20px;border-radius:2px;display:inline-block;background:#FE7300;text-decoration:none;}.qmbox .btn-primary:hover,.qmbox .btn-primary:active{color:#fff;}.qmbox .footer{color:#9B9B9B;font-size:12px;margin-top:40px;}.qmbox .footer a{color:#9B9B9B;}.qmbox .footer a:hover{color:#fe9d4c;}.qmbox .footer a:active{color:#b15000;}.qmbox .email-body#mail_to_teacher{line-height:26px;color:#40485B;font-size:16px;padding:0px;}.qmbox .email-body#mail_to_teacher .container,.qmbox .email-body#mail_to_teacher .panel-body{padding:0px;}.qmbox .email-body#mail_to_teacher .container{padding-top:20px;}.qmbox .email-body#mail_to_teacher .textarea{padding:32px;}.qmbox .email-body#mail_to_teacher .say-hi{font-weight:500;}.qmbox .email-body#mail_to_teacher .paragraph{margin-top:24px;}.qmbox .email-body#mail_to_teacher .paragraph .pro-name{color:#000000;}.qmbox .email-body#mail_to_teacher .paragraph.link{margin-top:32px;text-align:center;}.qmbox .email-body#mail_to_teacher .paragraph.link .button{background:#4A90E2;border-radius:2px;color:#FFFFFF;text-decoration:none;padding:11px 17px;line-height:14px;display:inline-block;}.qmbox .email-body#mail_to_teacher ul.pro-desc{list-style-type:none;margin:0px;padding:0px;padding-left:16px;}.qmbox .email-body#mail_to_teacher ul.pro-desc li{position:relative;}.qmbox .email-body#mail_to_teacher ul.pro-desc li::before{content:'';width:3px;height:3px;border-radius:50%;background:red;position:absolute;left:-15px;top:11px;background:#40485B;}.qmbox .email-body#mail_to_teacher .blackboard-area{height:600px;padding:40px;background-image:url();color:#FFFFFF;}.qmbox .email-body#mail_to_teacher .blackboard-area .big-title{font-size:32px;line-height:45px;text-align:center;}.qmbox .email-body#mail_to_teacher .blackboard-area .desc{margin-top:8px;}.qmbox .email-body#mail_to_teacher .blackboard-area .desc p{margin:0px;text-align:center;line-height:28px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card:nth-child(odd){float:left;margin-top:45px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card:nth-child(even){float:right;margin-top:45px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card .title{font-size:18px;text-align:center;margin-bottom:10px;}\r\n" +
                        "</style>\r\n" +
                        "<meta>\r\n" +
                        "<div class=\"email-body\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        "<div class=\"container\">\r\n" +
                        "<div class=\"logo\">\r\n" +
                        "<img src=\"" + LOGO + "\",height=\"100\" width=\"100\">\r\n" +
                        "</div>\r\n" +
                        "<div class=\"panel\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        "<div class=\"panel-header\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        "评论提醒\r\n" +
                        "\r\n" +
                        "</div>\r\n" +
                        "<div class=\"panel-body\">\r\n" +
                        "<p>您好 <a href=\"mailto:" + email + "\" rel=\"noopener\" target=\"_blank\">" + toUserNickName + "<wbr></a>!</p>\r\n" +
                        "<p>" + nickName + " 对您的评论:" + "<a href=\"" + url + "\">" + toText + "</a>" + "   进行了回复</p>\r\n" +
                        "\r\n" +
                        "<p>回复内容为:" + "<a href=\"" + url + "\">" + text + "</a>" + "</p>\r\n" +
                        "\r\n" +
                        "<p>如果邮件通知干扰了您,可以点击右侧链接关闭通知:" + "<a href=\"" + dataWebUrl + "/web/comment/closeEmailNotification/" + userUid + "\">点击这里</a>" + "</p>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "<div class=\"footer\">\r\n" +
                        "<a href=\" " + dataWebsiteUrl + "\">@" + PROJECT_NAME_EN + "</a>\n" +
                        "<div class=\"pull-right\"></div>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "<style type=\"text/css\">.qmbox style, .qmbox script, .qmbox head, .qmbox link, .qmbox meta {display: none !important;}</style></div></div><!-- --><style>#mailContentContainer .txt {height:auto;}</style>  </div>\r\n" +
                        " </body>\r\n" +
                        "</html>";
        sendEmail(email, content);
    }

    /**
     * 发送简单邮件
     *
     * @param email
     * @param text
     */
    public void sendSimpleEmail(String email, String text) {
        String content =
                "<html>\r\n" +
                        " <head>\r\n" +
                        "  <title> " + PROJECT_NAME + "</title>\r\n" +
                        " </head>\r\n" +
                        " <body>\r\n" +
                        "  <div id=\"contentDiv\" onmouseover=\"getTop().stopPropagation(event);\" onclick=\"getTop().preSwapLink(event, 'spam', 'ZC1222-PrLAp4T0Z7Z7UUMYzqLkb8a');\" style=\"position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7;\" class=\"body\">    \r\n" +
                        "  <div id=\"qm_con_body\"><div id=\"mailContentContainer\" class=\"qmbox qm_con_body_content qqmail_webmail_only\" style=\"\">\r\n" +
                        "<style>\r\n" +
                        "  .qmbox .email-body{color:#40485B;font-size:14px;font-family:-apple-system, \"Helvetica Neue\", Helvetica, \"Nimbus Sans L\", \"Segoe UI\", Arial, \"Liberation Sans\", \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Wenquanyi Micro Hei\", \"WenQuanYi Zen Hei\", \"ST Heiti\", SimHei, \"WenQuanYi Zen Hei Sharp\", sans-serif;background:#f8f8f8;}.qmbox .pull-right{float:right;}.qmbox a{color:#FE7300;text-decoration:underline;}.qmbox a:hover{color:#fe9d4c;}.qmbox a:active{color:#b15000;}.qmbox .logo{text-align:center;margin-bottom:20px;}.qmbox .panel{background:#fff;border:1px solid #E3E9ED;margin-bottom:10px;}.qmbox .panel-header{font-size:18px;line-height:30px;padding:10px 20px;background:#fcfcfc;border-bottom:1px solid #E3E9ED;}.qmbox .panel-body{padding:20px;}.qmbox .container{width:50%;min-width:300px;padding:20px;margin:0 auto;}.qmbox .text-center{text-align:center;}.qmbox .thumbnail{padding:4px;max-width:100%;border:1px solid #E3E9ED;}.qmbox .btn-primary{color:#fff;font-size:16px;padding:8px 14px;line-height:20px;border-radius:2px;display:inline-block;background:#FE7300;text-decoration:none;}.qmbox .btn-primary:hover,.qmbox .btn-primary:active{color:#fff;}.qmbox .footer{color:#9B9B9B;font-size:12px;margin-top:40px;}.qmbox .footer a{color:#9B9B9B;}.qmbox .footer a:hover{color:#fe9d4c;}.qmbox .footer a:active{color:#b15000;}.qmbox .email-body#mail_to_teacher{line-height:26px;color:#40485B;font-size:16px;padding:0px;}.qmbox .email-body#mail_to_teacher .container,.qmbox .email-body#mail_to_teacher .panel-body{padding:0px;}.qmbox .email-body#mail_to_teacher .container{padding-top:20px;}.qmbox .email-body#mail_to_teacher .textarea{padding:32px;}.qmbox .email-body#mail_to_teacher .say-hi{font-weight:500;}.qmbox .email-body#mail_to_teacher .paragraph{margin-top:24px;}.qmbox .email-body#mail_to_teacher .paragraph .pro-name{color:#000000;}.qmbox .email-body#mail_to_teacher .paragraph.link{margin-top:32px;text-align:center;}.qmbox .email-body#mail_to_teacher .paragraph.link .button{background:#4A90E2;border-radius:2px;color:#FFFFFF;text-decoration:none;padding:11px 17px;line-height:14px;display:inline-block;}.qmbox .email-body#mail_to_teacher ul.pro-desc{list-style-type:none;margin:0px;padding:0px;padding-left:16px;}.qmbox .email-body#mail_to_teacher ul.pro-desc li{position:relative;}.qmbox .email-body#mail_to_teacher ul.pro-desc li::before{content:'';width:3px;height:3px;border-radius:50%;background:red;position:absolute;left:-15px;top:11px;background:#40485B;}.qmbox .email-body#mail_to_teacher .blackboard-area{height:600px;padding:40px;background-image:url();color:#FFFFFF;}.qmbox .email-body#mail_to_teacher .blackboard-area .big-title{font-size:32px;line-height:45px;text-align:center;}.qmbox .email-body#mail_to_teacher .blackboard-area .desc{margin-top:8px;}.qmbox .email-body#mail_to_teacher .blackboard-area .desc p{margin:0px;text-align:center;line-height:28px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card:nth-child(odd){float:left;margin-top:45px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card:nth-child(even){float:right;margin-top:45px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card .title{font-size:18px;text-align:center;margin-bottom:10px;}\r\n" +
                        "</style>\r\n" +
                        "<meta>\r\n" +
                        "<div class=\"email-body\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        "<div class=\"container\">\r\n" +
                        "<div class=\"logo\">\r\n" +
                        "<img src=\"" + LOGO + "\",height=\"100\" width=\"100\">\r\n" +
                        "</div>\r\n" +
                        "<div class=\"panel\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        "<div class=\"panel-header\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        PROJECT_NAME + "邮件提醒\r\n" +
                        "\r\n" +
                        "</div>\r\n" +
                        "<div class=\"panel-body\">\r\n" +
                        "<p>" + text + "</p>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "<div class=\"footer\">\r\n" +
                        "<a href=\" " + dataWebsiteUrl + "\">@" + PROJECT_NAME_EN + "</a>\n" +
                        "<div class=\"pull-right\"></div>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "<style type=\"text/css\">.qmbox style, .qmbox script, .qmbox head, .qmbox link, .qmbox meta {display: none !important;}</style></div></div><!-- --><style>#mailContentContainer .txt {height:auto;}</style>  </div>\r\n" +
                        " </body>\r\n" +
                        "</html>";

        sendEmail(email, content);
    }

    /**
     * 发送激活邮件
     *
     * @param user
     * @param token
     */
    public void sendActivateEmail(User user, String token) {
        String text =
                "<html>\r\n" +
                        " <head>\r\n" +
                        "  <title>" + PROJECT_NAME + "</title>\r\n" +
                        " </head>\r\n" +
                        " <body>\r\n" +
                        "  <div id=\"contentDiv\" onmouseover=\"getTop().stopPropagation(event);\" onclick=\"getTop().preSwapLink(event, 'spam', 'ZC1222-PrLAp4T0Z7Z7UUMYzqLkb8a');\" style=\"position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7;\" class=\"body\">    \r\n" +
                        "  <div id=\"qm_con_body\"><div id=\"mailContentContainer\" class=\"qmbox qm_con_body_content qqmail_webmail_only\" style=\"\">\r\n" +
                        "<style>\r\n" +
                        "  .qmbox .email-body{color:#40485B;font-size:14px;font-family:-apple-system, \"Helvetica Neue\", Helvetica, \"Nimbus Sans L\", \"Segoe UI\", Arial, \"Liberation Sans\", \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Wenquanyi Micro Hei\", \"WenQuanYi Zen Hei\", \"ST Heiti\", SimHei, \"WenQuanYi Zen Hei Sharp\", sans-serif;background:#f8f8f8;}.qmbox .pull-right{float:right;}.qmbox a{color:#FE7300;text-decoration:underline;}.qmbox a:hover{color:#fe9d4c;}.qmbox a:active{color:#b15000;}.qmbox .logo{text-align:center;margin-bottom:20px;}.qmbox .panel{background:#fff;border:1px solid #E3E9ED;margin-bottom:10px;}.qmbox .panel-header{font-size:18px;line-height:30px;padding:10px 20px;background:#fcfcfc;border-bottom:1px solid #E3E9ED;}.qmbox .panel-body{padding:20px;}.qmbox .container{width:50%;min-width:300px;padding:20px;margin:0 auto;}.qmbox .text-center{text-align:center;}.qmbox .thumbnail{padding:4px;max-width:100%;border:1px solid #E3E9ED;}.qmbox .btn-primary{color:#fff;font-size:16px;padding:8px 14px;line-height:20px;border-radius:2px;display:inline-block;background:#FE7300;text-decoration:none;}.qmbox .btn-primary:hover,.qmbox .btn-primary:active{color:#fff;}.qmbox .footer{color:#9B9B9B;font-size:12px;margin-top:40px;}.qmbox .footer a{color:#9B9B9B;}.qmbox .footer a:hover{color:#fe9d4c;}.qmbox .footer a:active{color:#b15000;}.qmbox .email-body#mail_to_teacher{line-height:26px;color:#40485B;font-size:16px;padding:0px;}.qmbox .email-body#mail_to_teacher .container,.qmbox .email-body#mail_to_teacher .panel-body{padding:0px;}.qmbox .email-body#mail_to_teacher .container{padding-top:20px;}.qmbox .email-body#mail_to_teacher .textarea{padding:32px;}.qmbox .email-body#mail_to_teacher .say-hi{font-weight:500;}.qmbox .email-body#mail_to_teacher .paragraph{margin-top:24px;}.qmbox .email-body#mail_to_teacher .paragraph .pro-name{color:#000000;}.qmbox .email-body#mail_to_teacher .paragraph.link{margin-top:32px;text-align:center;}.qmbox .email-body#mail_to_teacher .paragraph.link .button{background:#4A90E2;border-radius:2px;color:#FFFFFF;text-decoration:none;padding:11px 17px;line-height:14px;display:inline-block;}.qmbox .email-body#mail_to_teacher ul.pro-desc{list-style-type:none;margin:0px;padding:0px;padding-left:16px;}.qmbox .email-body#mail_to_teacher ul.pro-desc li{position:relative;}.qmbox .email-body#mail_to_teacher ul.pro-desc li::before{content:'';width:3px;height:3px;border-radius:50%;background:red;position:absolute;left:-15px;top:11px;background:#40485B;}.qmbox .email-body#mail_to_teacher .blackboard-area{height:600px;padding:40px;background-image:url();color:#FFFFFF;}.qmbox .email-body#mail_to_teacher .blackboard-area .big-title{font-size:32px;line-height:45px;text-align:center;}.qmbox .email-body#mail_to_teacher .blackboard-area .desc{margin-top:8px;}.qmbox .email-body#mail_to_teacher .blackboard-area .desc p{margin:0px;text-align:center;line-height:28px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card:nth-child(odd){float:left;margin-top:45px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card:nth-child(even){float:right;margin-top:45px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card .title{font-size:18px;text-align:center;margin-bottom:10px;}\r\n" +
                        "</style>\r\n" +
                        "<meta>\r\n" +
                        "<div class=\"email-body\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        "<div class=\"container\">\r\n" +
                        "<div class=\"logo\">\r\n" +
                        "<img src=\"" + LOGO + "\",height=\"100\" width=\"100\">\r\n" +
                        "</div>\r\n" +
                        "<div class=\"panel\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        "<div class=\"panel-header\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        PROJECT_NAME + "账号激活\r\n" +
                        "\r\n" +
                        "</div>\r\n" +
                        "<div class=\"panel-body\">\r\n" +
                        "<p>您好 <a href=\"mailto:" + user.getEmail() + "\" rel=\"noopener\" target=\"_blank\">" + user.getNickName() + "<wbr></a>!</p>\r\n" +
                        "<p>欢迎您注册" + PROJECT_NAME + "账号,请点击下方链接进行账号激活</p>\r\n" +
                        "<p>地址:" + "<a href=\"" + dataWebUrl + "/login/activeUser/" + token + "\">点击这里</a>" + "</p>\r\n" +
                        "\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "<div class=\"footer\">\r\n" +
                        "<a href=\" " + dataWebsiteUrl + "\">@" + PROJECT_NAME_EN + "</a>\n" +
                        "<div class=\"pull-right\"></div>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "<style type=\"text/css\">.qmbox style, .qmbox script, .qmbox head, .qmbox link, .qmbox meta {display: none !important;}</style></div></div><!-- --><style>#mailContentContainer .txt {height:auto;}</style>  </div>\r\n" +
                        " </body>\r\n" +
                        "</html>";
        sendEmail(user.getEmail(), text);
    }

    /**
     * 发送注册邮件
     *
     * @param user
     * @param token
     */
    public void sendRegisterEmail(User user, String token) {
        String text =
                "<html>\r\n" +
                        " <head>\r\n" +
                        "  <title>" + PROJECT_NAME + "</title>\r\n" +
                        " </head>\r\n" +
                        " <body>\r\n" +
                        "  <div id=\"contentDiv\" onmouseover=\"getTop().stopPropagation(event);\" onclick=\"getTop().preSwapLink(event, 'spam', 'ZC1222-PrLAp4T0Z7Z7UUMYzqLkb8a');\" style=\"position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7;\" class=\"body\">    \r\n" +
                        "  <div id=\"qm_con_body\"><div id=\"mailContentContainer\" class=\"qmbox qm_con_body_content qqmail_webmail_only\" style=\"\">\r\n" +
                        "<style>\r\n" +
                        "  .qmbox .email-body{color:#40485B;font-size:14px;font-family:-apple-system, \"Helvetica Neue\", Helvetica, \"Nimbus Sans L\", \"Segoe UI\", Arial, \"Liberation Sans\", \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Wenquanyi Micro Hei\", \"WenQuanYi Zen Hei\", \"ST Heiti\", SimHei, \"WenQuanYi Zen Hei Sharp\", sans-serif;background:#f8f8f8;}.qmbox .pull-right{float:right;}.qmbox a{color:#FE7300;text-decoration:underline;}.qmbox a:hover{color:#fe9d4c;}.qmbox a:active{color:#b15000;}.qmbox .logo{text-align:center;margin-bottom:20px;}.qmbox .panel{background:#fff;border:1px solid #E3E9ED;margin-bottom:10px;}.qmbox .panel-header{font-size:18px;line-height:30px;padding:10px 20px;background:#fcfcfc;border-bottom:1px solid #E3E9ED;}.qmbox .panel-body{padding:20px;}.qmbox .container{width:50%;min-width:600px;padding:20px;margin:0 auto;}.qmbox .text-center{text-align:center;}.qmbox .thumbnail{padding:4px;max-width:100%;border:1px solid #E3E9ED;}.qmbox .btn-primary{color:#fff;font-size:16px;padding:8px 14px;line-height:20px;border-radius:2px;display:inline-block;background:#FE7300;text-decoration:none;}.qmbox .btn-primary:hover,.qmbox .btn-primary:active{color:#fff;}.qmbox .footer{color:#9B9B9B;font-size:12px;margin-top:40px;}.qmbox .footer a{color:#9B9B9B;}.qmbox .footer a:hover{color:#fe9d4c;}.qmbox .footer a:active{color:#b15000;}.qmbox .email-body#mail_to_teacher{line-height:26px;color:#40485B;font-size:16px;padding:0px;}.qmbox .email-body#mail_to_teacher .container,.qmbox .email-body#mail_to_teacher .panel-body{padding:0px;}.qmbox .email-body#mail_to_teacher .container{padding-top:20px;}.qmbox .email-body#mail_to_teacher .textarea{padding:32px;}.qmbox .email-body#mail_to_teacher .say-hi{font-weight:500;}.qmbox .email-body#mail_to_teacher .paragraph{margin-top:24px;}.qmbox .email-body#mail_to_teacher .paragraph .pro-name{color:#000000;}.qmbox .email-body#mail_to_teacher .paragraph.link{margin-top:32px;text-align:center;}.qmbox .email-body#mail_to_teacher .paragraph.link .button{background:#4A90E2;border-radius:2px;color:#FFFFFF;text-decoration:none;padding:11px 17px;line-height:14px;display:inline-block;}.qmbox .email-body#mail_to_teacher ul.pro-desc{list-style-type:none;margin:0px;padding:0px;padding-left:16px;}.qmbox .email-body#mail_to_teacher ul.pro-desc li{position:relative;}.qmbox .email-body#mail_to_teacher ul.pro-desc li::before{content:'';width:3px;height:3px;border-radius:50%;background:red;position:absolute;left:-15px;top:11px;background:#40485B;}.qmbox .email-body#mail_to_teacher .blackboard-area{height:600px;padding:40px;background-image:url();color:#FFFFFF;}.qmbox .email-body#mail_to_teacher .blackboard-area .big-title{font-size:32px;line-height:45px;text-align:center;}.qmbox .email-body#mail_to_teacher .blackboard-area .desc{margin-top:8px;}.qmbox .email-body#mail_to_teacher .blackboard-area .desc p{margin:0px;text-align:center;line-height:28px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card:nth-child(odd){float:left;margin-top:45px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card:nth-child(even){float:right;margin-top:45px;}.qmbox .email-body#mail_to_teacher .blackboard-area .card .title{font-size:18px;text-align:center;margin-bottom:10px;}\r\n" +
                        "</style>\r\n" +
                        "<meta>\r\n" +
                        "<div class=\"email-body\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        "<div class=\"container\">\r\n" +
                        "<div class=\"logo\">\r\n" +
                        "<img src=\"" + LOGO + "\",height=\"100\" width=\"100\">\r\n" +
                        "</div>\r\n" +
                        "<div class=\"panel\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        "<div class=\"panel-header\" style=\"background-color: rgb(246, 244, 236);\">\r\n" +
                        PROJECT_NAME + "邮箱绑定\r\n" +
                        "\r\n" +
                        "</div>\r\n" +
                        "<div class=\"panel-body\">\r\n" +
                        "<p>您好 <a href=\"mailto:" + user.getEmail() + "\" rel=\"noopener\" target=\"_blank\">" + user.getNickName() + "<wbr></a>!</p>\r\n" +
                        "<p>欢迎您给" + PROJECT_NAME + "账号绑定邮箱,请点击下方链接进行绑定</p>\r\n" +
                        "<p>地址:" + "<a href=\"" + dataWebUrl + "/oauth/bindUserEmail/" + token + "/" + user.getValidCode() + "\">点击这里</a>" + "</p>\r\n" +
                        "\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "<div class=\"footer\">\r\n" +
                        "<a href=\" " + dataWebsiteUrl + "\">@" + PROJECT_NAME_EN + "</a>\n" +
                        "<div class=\"pull-right\"></div>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "</div>\r\n" +
                        "<style type=\"text/css\">.qmbox style, .qmbox script, .qmbox head, .qmbox link, .qmbox meta {display: none !important;}</style></div></div><!-- --><style>#mailContentContainer .txt {height:auto;}</style>  </div>\r\n" +
                        " </body>\r\n" +
                        "</html>";
        sendEmail(user.getEmail(), text);
    }


}

web微服务接口分析

login

register

第三方登录认证

render

搜索微服务

BIGEVENT大事件

项目列表简历用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值