精华内容
下载资源
问答
  • 2020-09-28 15:00:02

    附件上传

    附件上传:
    前端使用layui框架
    后端使用SpringBoot

    1、前端:Layui

    官网传送门

    2、绑定事件

    HTML:

    1) layui 模板引擎设置 附件上传按钮

        <script type="text/html" id="dataDemo">
            <a class="layui-btn layui-btn-xs" lay-event="uploadFile" id="upload{{d.index}}">上传</a>
        </script>
    

    2)附件表单:

        <div style="width: 100%;height: 500px;">
            <table id="applyTable" lay-filter="applyTable" lay-size="sm"></table>
        </div>
    

    3)表单渲染:

            layui.table.render({
                elem: '#applyTable',
                even: true,
                cols: [[
                    {title: "序号", type: 'numbers', align: "center", width: 60},
                    {field: "name", title: "名称", align: "center"},
                    {field: "format", title: "格式", align: "center", width: 100},
                    {field: "", title: "操作", align: "center", toolbar: "#dataDemo", width: 120}
                ]],
                //表单展示数据
                data: [{
                    "name": "Layui前端应用"
                    , "format": "pdf"
                    ,"index": 1
                }, {
                    "name": "springboot菜鸟教程"
                    , "format": "pdf"
                    ,"index": 2
                }, {
                    "name": "SQL数据库入门"
                    , "format": "pdf"
                    ,"index": 3
                }
                done: function () {
                    // 上传按钮绑定事件
                    var num= 3;
                    for (var i = 1; i <= num; i++) {
                        //初始化 渲染上传按钮事件(核心代码)
                        uploadIns("#upload" + i);
                    }
                }
            });
            layui.table.on('tool(applyTable)', function (obj) {
                var datas = obj.data;
                var layEvent = obj.event;
                if (layEvent == 'preview') {
                    //预览
                } else if (layEvent == 'uploadFile') {
                    //上传
                    that.fileName= datas[1];
                }
            });
    

    绑定事件:
    js:

    function uploadIns(elem) {
        layui.upload.render({
            elem: elem //绑定元素
            , url: app.config.serverUrl + 'serverUpload/uploadFile'
            , method: 'post'
            , accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: elem
            , choose: function (obj) {
                //模拟点击
                $(elem).trigger("click");
            },
            before: function () {
                //后端参数
                this.data = {
                    "id": id,
                    "fileName": fileName
                }
            }
            , done: function (res) {
                layer.msg('上传成功');
            }
        });
    }
    

    注:app.config.serverUrl:为服务地址(localhost:8080)

    3、后端: SpringBoot

    官网传送门

    4、java:

    post请求:

        @RequestMapping("/uploadFile")
        @ResponseBody
        public boolean uploadFile(@RequestParam MultipartFile file, HttpServletRequest  data) {
    		//前端参数接收
    		String pipeproid = data.getParameter("id").toString();
    		//业务逻辑。。。。。
            return true;
    }
    

    5、声明

    1)文章来源于项目实践,文章存在任何问题请留言,感谢您的阅读!
    2)原创文章,转载请标注来源
    更多相关内容
  • 先上效果图 直接干货 前端发送ajax请求: $("#subQuestion").click(function () { layer.prompt({ formType: 2, value: '您有什么问题都可以向我们反馈,我们会尽快处理!', title: '问题提...

    先上效果图
    在这里插入图片描述
    在这里插入图片描述

    直接干货

    前端发送ajax请求:

        $("#subQuestion").click(function () {
                layer.prompt({
                    formType: 2,
                    value: '您有什么问题都可以向我们反馈,我们会尽快处理!',
                    title: '问题提交'
                }, function (question, index, elem) {
                    var loadindex = layer.load(1, {
                        shade: [0.3, '#000000'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: "/sendQuestion?question=" + question,
                        type: "GET",
                        success: function () {
                            layer.close(loadindex);
                            layer.msg("提交成功,感谢您的反馈,我们会尽快处理相关问题。", {icon: 1});
                            layer.close(index);
                        }
                    });
                });
            })
    

    maven引入jar包(pom.xml):

     <!--邮箱验证-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-mail</artifactId>
            </dependency>
    

    application.yml:

    spring:
      mail:  #邮箱
        default-encoding: UTF-8
        host: smtp.qq.com
        username: XXXX@qq.com			#发送邮件的邮箱
        password: xxxxxxmxyswdfbh		#发送邮件邮箱的KEY,可以去百度一下邮箱如何开启stmp 就知道了
        port: 465
        auth: true
        properties:
          mail.smtp.socketFactory.fallback: false
          mail.smtp.socketFactory.port: 465
          mail.smtp.socketFactory.class: javax.net.ssl.SSLSocketFactory
    

    后端Controller层:

    package com.protectzaizai.schoolcardoa.controller;
    
    import com.protectzaizai.schoolcardoa.entity.User;
    import com.protectzaizai.schoolcardoa.service.EmailService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.bind.annotation.SessionAttribute;
    
    import javax.servlet.http.HttpServletRequest;
    
    /**
     * @Author: 动感小⑦
     * @Date:2020/2/17 16:47
     */
    @RestController
    public class EmailController {
    
        @Autowired
        EmailService emailService;
    
        @GetMapping("/sendQuestion")
        public void verifyEmail(HttpServletRequest request, @SessionAttribute("user") User user, String question) {
            String content = "提交人:" + user.getUName() + "     学号或工号:" + user.getUAccount();
            content += "     问题内容:" + question;
            emailService.sendSimpleMail("xxxxxx@qq.com", "校园卡申请系统问题邮件", content);			//这里邮箱是发送的目的邮箱
        }
    }
    

    EmailService 接口层:

    package com.protectzaizai.wxtext_mp.service;
    
    import org.apache.poi.ss.usermodel.Workbook;
    
    import java.io.InputStream;
    import java.util.List;
    
    /**
     * @Author : qipin
     * @DATE : 2019/12/15 0015 13:28
     */
    public interface EmailService {
        void sendSimpleMail(String toEmail, String title, String content);
    }
    

    EmailServiceImpl 实现类:

    package com.protectzaizai.wxtext_mp.service.impl;
    
    import com.protectzaizai.wxtext_mp.service.EmailService;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.mail.SimpleMailMessage;
    import org.springframework.mail.javamail.JavaMailSender;
    import org.springframework.stereotype.Service;
    
    /**
     * @Author : 动感小⑦
     * @DATE : 2019/10/15 0015 20:20
     */
    @Service
    public class EmailServiceImpl implements EmailService {
    
        @Value("${spring.mail.username}")
        private String username;
    
        @Autowired
        JavaMailSender mailSender;
    
        Logger LOGGER = LoggerFactory.getLogger(this.getClass());
    
    
        @Override
        public void sendSimpleMail(String toEmail, String title, String content) {
            SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
            //设置寄件人
            simpleMailMessage.setFrom(username);
            //设置收件人
            simpleMailMessage.setTo(toEmail);
            //设置标题
            simpleMailMessage.setSubject(title);
            //设置内容
            simpleMailMessage.setText(content);
    
            //发送邮件
            mailSender.send(simpleMailMessage);
    
            LOGGER.info("邮件发送成功");
        }
    }
    

    大功告成!

    展开全文
  • jsp实现邮件发送

    2017-09-13 10:10:40
    这个是jsp开发的两个页面,一个是邮件信息:发件人、密码、收件人、主题、内容等相关的信息。相关的接口可实现多个收件人及抄送人。
  • 基于layui邮件写信界面,包含附件上传部分的PHP后台...针对于使用layui作为前端所做的邮件发送界面,能够对附件实现上传与数据的回调,有上传状态(上传等待、上传完成等)或者可以加上进度条(这个我没弄完) ...
                                                                    ——Gerhard
    

    - 针对于使用layui作为前端所做的邮件发送界面,能够对附件实现上传与数据的回调,有上传状态(上传等待、上传完成等)或者可以加上进度条(这个我没弄完)

    upload.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="layui/layui.js" ></script> 
    
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="css/upload.css">
    <title>邮件</title>
    
    </head>
    <body>
    <div class="container" id="container">
        <!--左侧菜单-->
        <div id="left" class="left_body"></div>
        <!--右侧内容-->
        <div id="content" class="right_body">
    
    
    <form action="" name="form2" class="layui-form" lay-filter="example">
        <div class="content_bigbox">
            <!--按钮工具栏-->
            <div class="tool_bar">
                <div class="title">
                    <h2 class="styleFontColor"><span class="fe-font icon-489 styleFontColor"></span><i class="icon iconfont icon-xie"></i>新建邮件</h2>
                </div>
                <ul style="float:right;">
                    <li class="left">
                        <ul>
                            <li class="last_btn">
                                <a onclick="Submits('send')"  class="auto_btn">发送</a>
                            </li>
                            <li>
                                <a onclick="Submits('save')" class="auto_btn">存草稿</a>
                            </li>
                            <li>
                                <a onclick="newMail()" class="auto_btn btn_danger">清空</a>
                            </li>
                            <li>
                                <a href="index.html" class="auto_btn btn_primary">关闭</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--写邮件-->
            <div class="readmailinfo">
                <div class="left_area">
                    <div id="msgshow" style="display: none;">收件人不能空</div>
                    <ul class="nmail">
                        <li class="pad-t8">
                            <label class="tit styleFontColor">收件人</label>
                            <div class="right">
                                <div class="orang"><input class="input" type="text" name="to2" id="to2" value="" ><i class="icon iconfont icon-structure"></i></div>
                            </div>
                        </li>
                        <li id="cch" style="display:none;">
                            <label class="tit styleFontColor ">抄送人</label>
                            <div class="right">
                                <div class="orang2"><input class="input" type="text" name="cc2" id="cc2" value="" ><i class="icon iconfont icon-structure"></i></div>
                            </div>
                        </li>
                        <li id="bcch" style="display:none;">
                            <label class="tit styleFontColor">密送人</label>
                            <div class="right">
                                <div class="orang2"><input class="input" type="text" name="bcc2" id="bcc2" value="" ><i class="icon iconfont icon-structure"></i></div>
                            </div>
                        </li>
                        <li>
                                <div class="cb_ch" style="margin-left:110px;">
                                    <span id="addcc" class="styleFontColor">添加抄送</span>
                                    <span>|</span>
                                    <span id="addbcc" class="styleFontColor">添加密送</span>
                                </div>
                        </li>
                        <li>
                            <label class="tit styleFontColor">主题</label>
                            <div class="right">
                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入主题" class="layui-input">
                            </div>
                        </li>
    
                        <li>
                            <label class="tit styleFontColor">附件</label>
                            <div class="right2">
                                <div style="position:relative;">
                                    <div class="layui-upload-drag" id="attachment">
                                      <i class="layui-icon"></i>
                                      <p id="hidp1" class="hidp1">上传附件</p>
                                      <p id="hidp2">点击上传附件,或将文件拖拽到此处</p>
                                      <span id="hidp2" class="hidp2">* 单文件大小不能超过 10 MB</span>
                                    </div>
                                    <span id="hidspan" class="outspan hidspan">* 单文件大小不能超过 10 MB</span>
                                    <a id="dragbtn">
                                        <i id="hidicon1" class="layui-icon layui-icon-triangle-r hidicon1" title="拖拽文件"></i>
                                        <i id="hidicon2" class="layui-icon layui-icon-close-fill" title="取消拖拽"></i>
                                    </a>
                                </div>
                                <div class="ath_box clearfix" id="ath_box">
                                    <ul id="athList">
                                        <!--<li class="fj" >
                                             <dl>
                                                  <dd class="uping">
                                                        <i class="icon iconfont icon-zip"></i>
                                                        <p title="附件一.zip">附件一.zip</p>
                                                        <em>666k</em>
                                                  </dd>
                                                  <dd class="state"><span style="color: #5FB878; font-weight:700;">上传成功</span></dd>
                                                  <dd class="reUp"><span class="layui-btn layui-btn-xs demo-reload layui-hide">重传</span></dd>
                                                  <dd class="layui-progress" lay-showpercent="true" lay-filter="demo">
                                                      <div class="layui-progress-bar" lay-percent="0%"></div>
                                                  </dd>
                                             </dl>
                                             <a class="demo-delete" title="删除附件"><i class="layui-icon layui-icon-close"></i></a>
                                        </li>-->
                                    </ul>   
                                </div>
    
    
                            </div>
                        </li>
                        <li class="clearfix">
                            <label class="tit styleFontColor">已读回执</label>
                            <div class="layui-input-block">
                               <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
                            </div>
                        </li>
                        <li>
                            <div style="width:99.8%; margin:auto">
                                <img src="images/a.jpg" width="100%" />
                                <!--<textarea id="editor" name="editor" rows="5" style="display: none;"></textarea>-->
                            </div>
                        </li>
                        <li>
                            <label class="tit styleFontColor">发件人</label>
                            <div class="send_id">
                                <span> 
                                    <input name="mailname1" id="mailname1" type="text" value="Gerhard" class="input_nob">
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
    
    <input type="hidden" name="_token" class="tag_token" value="" />
    <button type="button" class="layui-btn layui-hide" id="autoAction">上传附件</button>
    <button type="button" class="layui-btn site-demo-active layui-hide" data-type="loading"></button>
        </div>
    
    </div>
    </body>
    
    <script>
    $(function(){
      $('#dragbtn').click(function(){  //给dragbtn'绑定一个点击事件;
            $("#attachment").toggleClass("narrow");
            /*控制图标*/
            $("#hidicon1").toggleClass("hidicon1");
            $("#hidicon2").toggleClass("hidicon2");
    
            /*控制文字*/
            $("#hidp1").toggleClass("hidp1");
            $("#hidp2").toggleClass("hidp2");
            $("#hidspan").toggleClass("hidspan");
      });
    });
    
      $().ready(function () {
        $("#addcc").toggle(function () {
          $(this).html("删除抄送");
          $("#cch").show();
          $("#cc3").focus();
    
        }, function () {
          $(this).html("添加抄送");
          $("#cch").hide();
          $("#cc").val("");
          $("#cc2").val("");
          jQuery.each($(".addr"), function () {
            if ($(this).attr("id") == 'tcc3') {
              $(this).remove();
            }
          });
    
        });
        $("#addbcc").toggle(function () {
          $(this).html("删除密送");
          $("#bcch").show();
          $("#bcc3").focus();
        }, function () {
          $(this).html("添加密送");
          $("#bcch").hide();
          $("#bcc").val("");
          $("#bcc2").val("");
          jQuery.each($(".addr"), function () {
            if ($(this).attr("id") == 'tbcc3') {
              $(this).remove();
            }
          });
        });
      });
     setTimeout("document.getElementById('ath_box').style.display='none'",0000);
    
    </script>
    <script>
    layui.use(['element','layer','form'], function(){
      var form = layui.form
      var element = layui.element;
      var layer = layui.layer;
    
      //表单初始赋值
      form.val('example', {
      })
    });               
    
    /*文件上传*/
    layui.use('upload', function(){
      var $ = layui.jquery;
      var upload = layui.upload;
      var tag_token = $(".tag_token").val();
      //多文件列表示例
      var athListView = $('#athList')  
    
      var uploadListIns = upload.render({
        elem: '#attachment'
        ,auto:false         //选择是否直接上传
        //,bindAction: '#autoAction'
        ,accept: 'file'
        ,multiple: true
        //,size:10240
        ,url: 'up.php'
        ,drag: true         //是否允许拖拽上
        ,data:{'_token':tag_token}
        ,choose: function(obj){
            setTimeout("document.getElementById('ath_box').style.display='table'",0000);
            //预读本地文件示例,不支持ie8
            obj.preview(function(index, file, result){
                delete files;
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 
                console.log('预读:');console.log(files);
                var name=file.name;   
                var arr = name.split('.');          //通过.分隔字符串,成字符串数组
                var suffix = arr[arr.length-1]      //取最后一个,就是文件后缀名
                var icon='';
                if(suffix=='zip'||suffix=='rar'||suffix=='jar'||suffix=='7z'||suffix=='tar'){ icon='icon-zip'}
                else if(suffix=='jpg'||suffix=='jpeg'||suffix=='png'||suffix=='gif'||suffix=='psd'||suffix=='ai'||suffix=='webp'){ icon='icon-pic'}
                else if(suffix=='ppt'||suffix=='pptx'){ icon='icon-ppt'}
                else if(suffix=='doc'||suffix=='docx'){ icon='icon-doc'}
                else if(suffix=='txt'){ icon='icon-txt'}
                else if(suffix=='pdf'){ icon='icon-pdf'}
                else{ icon='icon-qita'}
    
                var li = $(['<li class="fj" id="upload-'+ index +'">'
                  ,'<dl>'
                      ,'<dd class="uping" id="uping-'+ index +'">'
                            ,'<i class="icon iconfont '+ icon +'"></i>'
                            ,'<p title="'+ file.name +'">'+ file.name +'</p>'
                            ,'<em>'+ (file.size/1014).toFixed(1) 
                            + 'kb</em>'
                      ,'</dd>'
                      ,'<dd id="state-'+ index +'" class="state">等待上传...</dd>'
                      ,'<dd class="reUp">'
                        ,'<span class="layui-btn layui-btn-xs demo-reload">重传</span>'
                      ,'</dd>'
                      ,'<dd class="layui-progress" id="progress-'+index+'" lay-showpercent="true" lay-filter="demo">'
                          ,'<div class="layui-progress-bar" lay-percent="0%"><span class="layui-progress-text"></span></div>'
                      ,'</dd><dd></dd>'
                  ,'</dl>'//***
                  ,'<a class="demo-delete" title="删除附件"><i class="layui-icon layui-icon-close"></i></a>'
                ,'</li>'].join(''));
    
                //重传
                li.find('.demo-reload').on('click', function(){
                  obj.upload(index,file);
                  delete files;
                  console.log('重传后:');console.log(files);
                });
    
                //单个删除
               li.find('.demo-delete').on('click', function(){
                     delete files[index]; //删除对应的文件
                     li.remove();
                     console.log('删除后:');console.log(files);
                     uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 
    
                     /*是否隐藏*/
                     var ath = document.getElementById("athList");
                     var ath_li= ath.getElementsByTagName("li");
                     if(ath_li.length>0) {}
                     else {setTimeout("document.getElementById('ath_box').style.display='none'",0000);}
               });
                var bsd="#upload-"+index;
                if($(bsd).length>0){}
                else{ 
                    athListView.append(li); 
                } 
                obj.upload(index,file);   //单个上传
             });
        }
    
        ,done: function(res, index, upload){
            //如果上传成功
            if(res.status == 1){
                var li = athListView.find('li#upload-'+ index);
                dd=li.children().children();
                dd.eq(1).html('<span style="color: #5FB878;">上传成功</span>');
                dd.eq(2).find('.demo-reload').addClass('layui-hide'); //隐藏重传
                //dd.eq(2).html(''); //清空操作
                console.log('成功后:');console.log(res);
                setTimeout("document.getElementById('uping-"+ index +"').style.opacity='1'",3000);  //隐藏
                setTimeout("document.getElementById('state-"+ index +"').style.display='none'",3000);  //隐藏
                return layer.msg(files[index].name+' 上传成功');
                delete files[index]; //删除文件队列已经上传成功的文
            }
            else{//上传失败
                this.error(res,index, upload);
                return layer.msg('<span style="color: #FF5722;">'+files[index].name+'</span> 上传失败,请稍后再尝试');
            } 
        }
        //,allDone
        ,error: function(res,index, upload){
            //演示失败状态,并显示重传
            var li = athListView.find('li#upload-'+ index);
            dd=li.children().children();
            dd.eq(1).html('<span style="color: #FF5722;">上传失败</span>');
            dd.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
            console.log('失败后:');console.log(res)
        }
      });
    });
    
    </script>

    up.php

    <?php
    
    $status = 0;
    $message = '';
    
    if ($_POST) {
        //上传具体操作
        $file_name = iconv("UTF-8","GBK",$_FILES['file']['name']);
        //$file_type = $_FILES["file"]["type"];
        $file_tmp = $_FILES["file"]["tmp_name"];
        $file_error = $_FILES["file"]["error"];
        $file_size = $_FILES["file"]["size"];
    
        if ($file_error > 0) { // 出错
            $message = $file_error;
        } else if($file_size > 10240000) { // 文件太大了
            $message = "上传文件不能大于10MB";
        }else{
            //$file_name_arr = explode('.', $file_name);
            //$new_file_name = date('YmdHis') . '.' . $file_name_arr[1];
            $file_path = "upload/" . $file_name;
            if (file_exists($file_path)) {
                $message = $file_name."此文件已经存在啦";
            } else {
                $upload_result = move_uploaded_file($file_tmp, $file_path); // 此函数只支持 HTTP POST 上传的文件
                if ($upload_result) {
                    $status = 1;
                    $message = $file_path;
                } else {
                    $message = $file_name."文件上传失败,请稍后再尝试";
                }   
            }
        }
    } else {
        $message = "参数错误";
    }
    return showMsg($status, $message);
    
    function showMsg($status,$message = '',$data = array()){
        $result = array(
            'status' => $status,
            'message' =>$message,
            'data' =>$data
        );
        exit(json_encode($result));
    }

    upload.css

    div, ul, li, tr, td, th, h1, h2, h3, a { margin: 0;padding: 0;font-size: 14px;}
    
    body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, li, fieldset, button, div, span, a, label, input, select, option, textarea {
        font-family: 'Microsoft Yahei', Helvetica Neue, Arial, serif;
        font-size: 14px;
        color: #444444;
    }
    div, li, tr, td, th {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    *{margin:0;padding:0}
    ul,ol,li{ list-style:none; margin: 0; padding: 0;}
    em, i, u { font-style: normal;}
    a{ cursor: pointer; text-decoration: none; color: #2777a7; }
    a:hover { text-decoration: underline;}
    a:focus{ outline:none;}
    a.auto_btn {     
        padding: 0 15px;
        display: block;
        cursor: pointer;
        float: left;
        height: 27px;
        line-height: 27px;
        background-color: #009688;
        border-radius: 4px;
        color: #fff;
        text-decoration: none;
    }
    a.auto_btn:hover{ opacity:.8;}
    
    .right_body a.btn_primary{border: 1px solid #C9C9C9; background-color: #fff; color: #555; height:25px; line-height:25px;}
    .right_body a.btn_danger{ background-color:#ff5722;}
    .right_body a.btn_normal{ background-color:#1E9FFF;}
    
    .grid_1200{ width:1200px; margin:auto;}
    .grid_1152{ width:1152px; margin:auto;}
    .grid_1000{ width:1000px; margin:0 auto;clear: both;}
    .mar-t30 { margin-top: 30px!important;}
    .mar-b8 { margin-bottom: 8px;}
    .pad-t8{margin-top: 8px; position:relative;}
    
    .clearfix {
        display: table;
        content: " ";
    }
    
    html {
        height: 100%;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 0;
    }
    .right_body{    
        height: 100%;
        padding:10px;
        margin-left: 165px;
        min-width:650px;}
    
    /* 图标 */
    .icon {
        font-size: 16px;
        font-weight:normal;
        position:relative;
    }
    .right_body .title .icon{
        font-size: 22px;
        margin-right: 5px;
        top: 2px;
    }
    .right_body .orang .icon,.right_body .orang2 .icon{
        float: right;
        position: absolute;
        margin-left: -24px;
        margin-top: 8px;
        font-size:17px;
        color:#666;
    }
    /*通用*/
    .input {
        width: 100%;
        height: 35px;
        border: #ccc 1px solid;
        line-height: 35px;
        padding-left: 10px;
        box-sizing: border-box;
        border-radius:2px;
    }
    
    .layui-table-view .layui-table td { cursor: pointer;}
    .layui-table-view .layui-form-checkbox {
        cursor:default;
    }
    
    .readmailinfo .layui-input{ height:35px;}
    input, select {
        vertical-align: middle;
        outline: none;
    }
    .content {
        height: 100%;
        min-height: 400px;
        vertical-align: top;
    }
    .textarea {
        border: 0px solid;
        background-color: #f7f7f7;
        overflow: auto;
        overflow-x: hidden;
        color: #444;
    }
    
    /*新建邮件*/
    .content_bigbox {
        width: 100%;
        border: none;
    }
    .content_bigbox .tool_bar {
        width: 100%;
        height: 45px;
        line-height: 45px;
        vertical-align: middle;
        border-bottom: 1px solid #eee;
    }
    .content_bigbox .title {
        height: 40px;
        line-height: 40px;
        float: left;
        padding-left: 5px;
        margin-top: 5px;
        position: absolute;
    }
    .content_bigbox .title h2 {
        height: 37px;
        color: #009688;
        font-size: 15px;
        font-weight: bold;
        padding-left: 10px;
        line-height: 38px;
        margin: 0;
        float: left;
    }
    
    .content_bigbox .title span{ color:#888;}
    
    
    
    .tool_bar ul li.left {
        height: 27px;
        float: right;
        margin-top: 10px;
    }
    .tool_bar ul li.left li {
        height: 27px;
        float: left;
        padding-left: 10px;
        color: #444;
        font-size: 12px;
    }
    
    .readmailinfo {
        width: 100%;
        height: 100%;
    }
    .left_area {
        width: 100%;
        height: 100%;
        vertical-align: top;
    }
    .left_area .nmail {
        width: 100%;
        margin: 0 auto;
        border: none;
        position: relative;
    }
    .left_area .nmail li{
        padding-top: 4px;
        padding-bottom: 4px;
        width:100%;
    }
    .left_area .nmail li .tit {
        width: 95px;
        text-align: right;
        color: #333;
        padding-right: 10px;
        height: 35px;
        line-height: 35px;
        white-space: nowrap;
        float: left;
    }
    .left_area .nmail li .right {
        height: 35px;
        margin-left: 110px;
        position:relative;
        padding-right:15%;
    }
    .left_area .nmail li .right2{ height:auto; position:relative; margin-left:110px;padding-right:15%;}
    
    .left_area .nmail li .cb_ch{ margin-left:110px;}
    .left_area .nmail li .cb_ch span{ font-size:12px;cursor:pointer; color:#275991;}
    
    /*附件*/
    .readmailinfo .layui-upload-drag {
        width: 100%;
        position: relative;
        display: inline-block;
        padding: 0px;;
        border: 1px dashed #ccc;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
    }
    
    .readmailinfo .narrow {
        width: 90px;
        display: inline-block;
        vertical-align: middle;
        height: 35px;
        line-height: 35px;
        padding: 0 10px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 2px;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    .readmailinfo .narrow p{ float:right; color:#fff;}
    .readmailinfo .narrow .layui-icon {
        font-size: 18px;
        color: #fff;
        margin-right:4px;
    }
    .readmailinfo .hidp1{ display:none;}
    .readmailinfo .narrow .hidp2{ display:none;}
    
    #dragbtn .hidicon1{ display:none}
    #dragbtn .hidicon2{ display:none}
    
    #dragbtn i{font-size:24px; color:#555;top:5px; position:absolute;  text-decoration:none; width:20px; height:30px;}
    #dragbtn #hidicon2{ top: 1px; right:3px; }
    
    .readmailinfo .layui-upload-drag span{ color:#999;font-size:12px; line-height: 30px;}
    .readmailinfo .outspan{
        position: absolute;
        left:180px;
        line-height: 35px;
        color:#999;
        font-size:12px;
    }
    .hidspan{ display:none;}
    
    .readmailinfo .layui-form-switch {
        margin-top: 6px;
    }
    
    .readmailinfo .ath_box{ background:#f1f1f1; padding: 8px 0 0 8px; margin-top:8px;}
    
    .readmailinfo ul li.fj{ 
        width:auto; 
        float:left; 
        padding: 10px; 
        padding-bottom:0;
        margin: 0px 8px 8px 0;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.05);
        transition: all .2s ease;
        -moz-transition: all .2s ease;
        -webkit-transition: all .2s ease;
        -o-transition: all .2s ease;
        position:relative;
    }
    .readmailinfo ul li.fj:hover{
        box-shadow: 0 2px 6px rgba(0,0,0,.2);
        -webkit-transform: translate3d(0,-3px,0);
        -moz-transform: translate3d(0,-3px,0);
        -ms-transform: translate3d(0,-3px,0);
        -o-transform: translate3d(0,-3px,0);
        transform: translate3d(0,-3px,0);
    }
    .readmailinfo ul li.fj dd{ padding:0; text-align:center;}
    .readmailinfo ul li.fj dl{ position:relative;height:92px;}
    
    .readmailinfo ul li.fj dd.uping{background: #fff; opacity: 0.4;}
    .readmailinfo ul li.fj dd.state{ top: 0px;  position: absolute; width:100%; font-weight:700; color:#666;}
    .readmailinfo ul li.fj dd.reUp {position: absolute;top: 22px; width:100%;}
    .readmailinfo ul li.fj dd.reUp .demo-reload{width:50px; margin:auto; }
    
    .readmailinfo ul li.fj dd .icon{ font-size:35px; margin-bottom:10px;}
    
    .readmailinfo ul li.fj dd p,.readmailinfo ul li.fj dd em{overflow: hidden;text-overflow: ellipsis;white-space: nowrap; line-height:20px; font-size:12px; width:100px;}
    
    .readmailinfo ul li.fj dd p{ color:#009688; margin-top:5px;}
    
    .readmailinfo ul li.fj a{ position:absolute; top:0; right:0; display:block; text-decoration:none; color:#ff5722;}
    .readmailinfo ul li.fj:hover a{ display:block;}
    
    .readmailinfo ul li.fj .layui-progress{ margin-top:3px;}
    .readmailinfo ul li.fj .layui-progress-text { top: -7px; color:#666;}
    .readmailinfo ul li.fj span.false{ position:absolute; display:block;}
    
    
    /*测试其他*/
    .readmailinfo.other .ath_box {
        margin-top: 8px;
        background:#fff;
    }
    
    .readmailinfo.other ul li.fj {
        width: 110px;
        float: left;
        padding: 10px;
        margin: 0px 10px 10px 0;
        border-radius: 2px;
        background-color: #f1f1f1;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.05);
        transition: all .2s ease;
        -moz-transition: all .2s ease;
        -webkit-transition: all .2s ease;
        -o-transition: all .2s ease;
        position: relative;
        height:auto;
    }
    
    .readmailinfo.other ul li.fj dl {
        position: relative;
        padding: 10px;
        background: #fff;
        height: 97px;
    
    }
    
    .left_area .nmail .send_id {
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
        text-align: left;
    }
    .left_area .nmail .send_id span {
        height: 30px;
        background-position: center;
        display: inline-block;
        float: left;
        margin: 0;
    }
    .input_nob {
        width: auto;
        background: none;
        border: none;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
    }
    
    #msgshow {
        z-index: 999;
        width: 150px;
        background: #FFB800;
        height: 25px;
        line-height: 25px;
        color: #ffffff;
        margin-top: -17px;
        position: absolute;
        top: 26px;
        left: 360px;
        font-size: 14px;
        display: none;
        text-align: center;
    }
    /*新建邮件end*/

    源代码下载:https://download.csdn.net/download/m0_38085778/10572618

    展开全文
  • springboot整合mail发送邮件 完整基础代码 包括web基础测试页面和后台
  • 正常我们会用JavaMail相关api来写发送邮件的相关代码,但现在springboot提供了一套更简易使用的封装。也就是我们使用SpringBoot来发送邮件的话,代码就简单许多,毕竟SpringBoot是开箱即用的 ,它提供了什么,我们...

    前言

    现在发送邮件是一个网站必备的功能,比如注册激活,或者忘记密码等等都需要发送邮件。正常我们会用JavaMail相关api来写发送邮件的相关代码,但现在springboot提供了一套更简易使用的封装。也就是我们使用SpringBoot来发送邮件的话,代码就简单许多,毕竟SpringBoot是开箱即用的 ,它提供了什么,我们了解之后觉得可行,就使用它,自己没必要再写原生的。

    实践

    导入依赖pom.xml

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-mail</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    

    配置发送方信息

    我们需要在SpringBoot配置文件(application.yml)中配置发送方的信息,包括以下信息:

    用户名:也就是我们的邮箱账号
    密码:我们刚刚生成的授权码
    邮箱主机:配置使用哪个邮箱服务器发送邮件
    还有等等其他可选配置,在下面配置代码中,大家需要填写自己的用户名、密码、from(和用户名一样)。

    spring:
      mail:
        host: mail.xxxx.com
        #发送邮件的邮箱地址
        username: hadoop
        #客户端授权码,不是邮箱密码,这个在qq邮箱设置里面自动生成的
        password: a5ve
        properties.mail.smtp.port: 587 #端口号465或587
        from: hadoop@xxx.com  # 发送邮件的地址,和上面username一致
        default-encoding: utf-8
        # 收件人 这个是自定义的
        to: xxx@xxx.com, op@xxx.com
    

    MailDO

    public class MailDO {
        /**
         * 标题
         */
        private String title;
        /**
         * 内容
         */
        private String content;
        /**
         * 接收人邮箱
         */
        private String[] email;
        /**
         * 附加,value 文件的绝对地址/动态模板数据
         */
        private Map<String, Object> attachment;
    
        public String getTitle() {
            return title;
        }
    
        public void setTitle(String title) {
            this.title = title;
        }
    
        public String getContent() {
            return content;
        }
    
        public void setContent(String content) {
            this.content = content;
        }
    
        public String[] getEmail() {
            return email;
        }
    
        public void setEmail(String[] email) {
            this.email = email;
        }
        public Map<String, Object> getAttachment() {
            return attachment;
        }
    
        public void setAttachment(Map<String, Object> attachment) {
            this.attachment = attachment;
        }
    
        @Override
        public String toString() {
            return "MailDO{" +
                    "title='" + title + '\'' +
                    ", content='" + content + '\'' +
                    ", email=" + Arrays.toString(email) +
                    ", attachment=" + attachment +
                    '}';
        }
    }
    

    EmailService

    我们需要自己封装邮件服务,这个服务只是便于Controller层调用,也就是根据客户端发送的请求来调用,封装三种邮件服务

    • 发送普通文本邮件
    • 发送HTML邮件:一般在注册激活时使用
    • 发送带附件的邮件:可以发送图片等等附件
    public interface EmailService {
    
        /**
         * 发送
         * @param mailDO
         */
        void sendTextMail(MailDO mailDO);
    
        /**
         * 发送html邮件
         * @param mailDO
         * @param isShowHtml
         */
        void sendHtmlMail(MailDO mailDO,boolean isShowHtml);
    
        /**
         * 发送Template邮件
         * @param mailDO
         */
        void sendTemplateMail(MailDO mailDO);
    }
    

    EmailServiceImpl

    @Service
    public class EmailServiceImpl implements EmailService {
    
        private final static Logger log = LoggerFactory.getLogger(EmailServiceImpl.class);
    
        //template模板引擎
        @Autowired
        private TemplateEngine templateEngine;
    
        @Autowired
        private JavaMailSender javaMailSender;
    
        @Value("${spring.mail.from}")
        private String from;
    
        /**
         * 纯文本邮件
         * @param mail
         */
        @Async
        @Override
        public void sendTextMail(MailDO mail){
            //建立邮件消息
            SimpleMailMessage message = new SimpleMailMessage();
            // 发送人的邮箱
            message.setFrom(from);
            //标题
            message.setSubject(mail.getTitle());
            //发给谁  对方邮箱
            message.setTo(mail.getEmail());
            //内容
            message.setText(mail.getContent());
            try {
                //发送
                javaMailSender.send(message);
            } catch (MailException e) {
                log.error("纯文本邮件发送失败->message:{}",e.getMessage());
                throw new RuntimeException("邮件发送失败");
            }
        }
    
        /**
         * 发送的邮件是富文本(附件,图片,html等)
         * @param mailDO
         * @param isShowHtml 是否解析html
         */
        @Async
        @Override
        public void sendHtmlMail(MailDO mailDO, boolean isShowHtml) {
            try {
                MimeMessage mimeMessage = javaMailSender.createMimeMessage();
                //是否发送的邮件是富文本(附件,图片,html等)
                MimeMessageHelper messageHelper = new MimeMessageHelper(mimeMessage,true);
                messageHelper.setFrom(from);// 发送人的邮箱
                messageHelper.setTo(mailDO.getEmail());//发给谁  对方邮箱
                messageHelper.setSubject(mailDO.getTitle());//标题
                messageHelper.setText(mailDO.getContent(),isShowHtml);//false,显示原始html代码,无效果
                //判断是否有附加图片等
                if(mailDO.getAttachment() != null && mailDO.getAttachment().size() > 0){
                    mailDO.getAttachment().entrySet().stream().forEach(entrySet -> {
                        try {
                            File file = new File(String.valueOf(entrySet.getValue()));
                            if(file.exists()){
                                messageHelper.addAttachment(entrySet.getKey(), new FileSystemResource(file));
                            }
                        } catch (MessagingException e) {
                            log.error("附件发送失败->message:{}",e.getMessage());
                            throw new RuntimeException("附件发送失败");
                        }
                    });
                }
                //发送
                javaMailSender.send(mimeMessage);
                log.info("富文本邮件发送成功,from: {}, to: {}",from,mailDO.getEmail());
            } catch (MessagingException e) {
                log.error("富文本邮件发送失败->message:{}",e.getMessage());
                throw new RuntimeException("邮件发送失败");
            }
        }
    
        /**
         * 发送模板邮件 使用thymeleaf模板
         * 若果使用freemarker模板
         *     Configuration configuration = new Configuration(Configuration.VERSION_2_3_28);
         *     configuration.setClassForTemplateLoading(this.getClass(), "/templates");
         *     String emailContent = FreeMarkerTemplateUtils.processTemplateIntoString(configuration.getTemplate("mail.ftl"), params);
         * @param mailDO
         */
        @Async
        @Override
        public void sendTemplateMail(MailDO mailDO) {
            try {
                MimeMessage mimeMessage = javaMailSender.createMimeMessage();
                MimeMessageHelper messageHelper = new MimeMessageHelper(mimeMessage,true);
                // 发送人的邮箱
                messageHelper.setFrom(from);
                //发给谁  对方邮箱
                messageHelper.setTo(mailDO.getEmail());
                //标题
                messageHelper.setSubject(mailDO.getTitle());
                //使用模板thymeleaf
                //Context是导这个包import org.thymeleaf.context.Context;
                Context context = new Context();
                //定义模板数据
                context.setVariables(mailDO.getAttachment());
                //获取thymeleaf的html模板
                String emailContent = templateEngine.process("indexPatternMail.html",context); //指定模板路径
                messageHelper.setText(emailContent,true);
                //发送邮件
                javaMailSender.send(mimeMessage);
            } catch (MessagingException e) {
                log.error("模板邮件发送失败->message:{}",e.getMessage());
                throw new RuntimeException("邮件发送失败");
            }
        }
    }
    
    

    模板 mail.html

    放在templates/mail目录下

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        <h3>你看我<span style="font-size: 35px" th:text="${username}"></span>, 哈哈哈!</h3>
    </body>
    </html>
    
    展开全文
  • SpringBoot实现发送邮件功能

    热门讨论 2021-03-15 22:02:55
    怎么发送邮件?快进来看看~
  • java发送邮件带附件

    2016-05-17 15:21:00
    1 package ... 2 ... mb.setContent("本邮件中包含三个附件,请检查!"); // 设置邮件的正文 15 16 mb.attachFile("往邮件中添加附件"); // 往邮件中添加附件 17 mb.attachFile(...
  • django+bootstrap、layui+mysql 简单的web项目,适合新手!当初我也是为了学习django才做的这个系统,一方面是为了方便计算自己每周加了多少小时班,一方面是练习django。
  • 实现layui数据表格头部工具栏的搜索功能,并将搜索的信息进行一键发送邮件
  • SSM+SpringBoot+Layui+Shiro+MP+MySQL实现停车管理系统,涉及功能点:收费功能、车位预约功能、权限管理、角色管理、邮件发送功能等。 SSM+SpringBoot+Layui+Shiro+MP+MySQL实现停车管理系统,涉及功能点:收费...
  • layui-数据表格的实现

    2021-12-30 02:09:18
    layui-数据表格的实现 手把手的教程 1. 下载layui的资源包 https://gitee.com/sentsin/layui?_from=gitee_search 2.导入到项目中 3.新建web项目 3.1 项目中layui的引入,主要引入两个东西分别是css和js css的...
  • 邮件发送 一、注册一个网易的邮箱账号 地址:https://mail.163.com/ 开启POP3/SMTP服务: 获取客户端的授权码和服务器的地址 二、实现邮件发送 导入依赖 <!--spring支持--> <dependency> <...
  • SpringBoot集成LayUI及组件使用

    万次阅读 多人点赞 2019-06-15 22:02:18
    介绍:LayUI是一个使用简单、上手容易的前端 UI 框架,非常适合后端开发人员构建后台管理系统使用。这个框架与SpringBoot类似,模块化各个组件,拿来即用。相比另一个后台管理前端框架EasyUI相比,LayUI更加注重极简...
  • 什么是Maven Maven 翻译为"专家"、“内行”,是 Apache 下的一个纯 Java 开发的开源项目。基于项目对象模型(缩写:POM)概念,Maven利用一个中央信息片断能管理一个项目的构建、报告和文档等步骤。...
  • PHP+MySQL用户注册发送邮件激活账号实例,样式用的layui,简洁美观。 1.注册发送邮件激活账号,同时检测邮箱是否已注册。 2.检测邮箱是否存在,当邮箱存在时判断是否激活,若未激活,则更改激活码和注册时间。邮箱不...
  • --邮件发送--> <!--spring支持--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>5.0.0....
  • layui引用layui.css,layui.js后为什么表单不显示,不渲染?2020年07月17日|萬仟网IT编程 |我要评论示例:示例:$(function () {layui.use('form', function(){var form = layui.form; //只有执行了这一步,部分表单...
  • -- jfinal邮件插件 --> <dependency> <groupId>cn.fsdev</groupId> <artifactId>jfinal-mail-plugin</artifactId> <version>2.2</version> </dependenc...
  • java_websocket即时通讯+layui实现移动端一对一聊天客服功能
  • springBoot发送邮件(验证码)

    千次阅读 2020-03-25 17:35:52
    springBoot发送邮件(验证码,5分钟过期)超级详细 自己百度了很久,终于成功了,这里记录一下过程 1.选择邮箱(这里选用163邮箱) 首先在网页登录在设置里面打开POP3/SMTP服务 在application.yaml中配置 要注意的...
  • 一个springboot+layui开发模板

    千次阅读 2021-12-22 11:31:15
    一个springboot+layui的快速开发模板
  • TP5.1使用PHPmailer发送邮件及实战

    千次阅读 2019-11-16 16:06:06
    邮件发送是项目中很常用的功能,可用作给用户发送邮箱验证码,也可用作用户工单提交,甚至可以在项目运行中发生异常时将异常信息或者作为计划任务将一段时间内的执行日志发送至运维/开发人员。这里将使用PHPmailer为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 458
精华内容 183
关键字:

layui发送邮件