异步、定时、邮件任务以及富文本编辑器

阅读量 ：
如需转载，请根据 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 许可，附上本文作者及链接。
本文作者： Alice
作者昵称： 沉。
本文链接： http://example.com/2020/11/17/%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1/

Finished：2020-11-17

十四、异步、定时、邮件任务

14.1、异步任务

1、创建一个service包

2、创建一个类AsyncService

异步处理还是非常常用的，比如我们在网站上发送邮件，后台会去发送邮件，此时前台会造成响应不动，直到邮件发送完毕，响应才会成功，所以我们一般会采用多线程的方式去处理这些任务。

编写方法，假装正在处理数据，使用线程设置一些延时，模拟同步等待的情况；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.chen.service;

import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Service;

@Service
public class AsyncService {

    //告诉Spring这是一个异步的方法
    @Async
    public void hello(){

        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        System.out.println("数据正在处理");
    }

}

3、编写controller包

4、编写AsyncController类

我们去写一个Controller测试一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package com.chen.controller;

import com.chen.service.AsyncService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class AsyncController {
    @Autowired
    AsyncService asyncService;

    @RequestMapping("/hello")
    public  String  hello(){
        asyncService.hello();//停止三秒
        return "ok";

    }

}

5、访问http://localhost:8080/hello进行测试，3秒后出现success，这是同步等待的情况。

问题：我们如果想让用户直接得到消息，就在后台使用多线程的方式进行处理即可，但是每次都需要自己手动去编写多线程的实现的话，太麻烦了，我们只需要用一个简单的办法，在我们的方法上加一个简单的注解即可，如下：

6、给hello方法添加@Async注解；

1
2
3
4
5
6
7
8
9
10
//告诉Spring这是一个异步方法
@Async
public void hello(){
    try {
        Thread.sleep(3000);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    System.out.println("业务进行中....");
}

SpringBoot就会自己开一个线程池，进行调用！但是要让这个注解生效，我们还需要在主程序上添加一个注解@EnableAsync ，开启异步注解功能；

1
2
3
4
5
6
7
8
9
@EnableAsync //开启异步注解功能
@SpringBootApplication
public class SpringbootTaskApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(SpringbootTaskApplication.class, args);
    }
 
}

7、重启测试，网页瞬间响应，后台代码依旧执行！

14.2、定时任务

项目开发中经常需要执行一些定时任务，比如需要在每天凌晨的时候，分析一次前一天的日志信息，Spring为我们提供了异步执行任务调度的方式，提供了两个接口。

  • TaskExecutor接口 任务执行者
  • TaskScheduler接口 任务调度者

两个注解：

@EnableScheduling // 开启定时功能的注解
@EnableAsync//开启异步注解功能

cron表达式：

测试步骤：

1、创建一个ScheduledService

我们里面存在一个hello方法，他需要定时执行，怎么处理呢？

字段 允许值 允许的特殊字符
秒（Seconds） 0~59的整数 , - * / 四个字符
分（Minutes） 0~59的整数 , - * / 四个字符
小时（Hours） 0~23的整数 , - * / 四个字符
日期（DayofMonth） 1~31的整数（但是你需要考虑你月的天数） ,- * ? / L W C 八个字符
月份（Month） 1~12的整数或者 JAN-DEC , - * / 四个字符
星期（DayofWeek） 1~7的整数或者 SUN-SAT （1=SUN） , - * ? / L C # 八个字符
年(可选，留空)（Year） 1970~2099 , - * / 四个字符

1、创建一个ScheduledService

我们里面存在一个hello方法，他需要定时执行，怎么处理呢？

1
2
3
4
5
6
7
8
9
10
11
@Service
public class ScheduledService {
    
    //秒    分    时     日    月    周几
    //0 * * * * MON-FRI
    //注意cron表达式的用法；
    @Scheduled(cron = "0 * * * * 0-7")
    public void hello(){
        System.out.println("hello.....");
    }
}

2、这里写完定时任务之后，我们需要在主程序上增加@EnableScheduling 开启定时任务功能

1
2
3
4
5
6
7
8
9
10
@EnableAsync //开启异步注解功能
@EnableScheduling //开启基于注解的定时任务
@SpringBootApplication
public class SpringbootTaskApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(SpringbootTaskApplication.class, args);
    }
 
}

3、我们来详细了解下cron表达式；

http://www.bejson.com/othertools/cron/

4、常用的表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
（1）0/2 * * * * ?   表示每2秒 执行任务
（1）0 0/2 * * * ?    表示每2分钟 执行任务
（1）0 0 2 1 * ?   表示在每月的1日的凌晨2点调整任务
（2）0 15 10 ? * MON-FRI   表示周一到周五每天上午10:15执行作业
（3）0 15 10 ? 6L 2002-2006   表示2002-2006年的每个月的最后一个星期五上午10:15执行作
（4）0 0 10,14,16 * * ?   每天上午10点，下午2点，4点
（5）0 0/30 9-17 * * ?   朝九晚五工作时间内每半小时
（6）0 0 12 ? * WED    表示每个星期三中午12点
（7）0 0 12 * * ?   每天中午12点触发
（8）0 15 10 ? * *    每天上午10:15触发
（9）0 15 10 * * ?     每天上午10:15触发
（10）0 15 10 * * ?    每天上午10:15触发
（11）0 15 10 * * ? 2005    2005年的每天上午10:15触发
（12）0 * 14 * * ?     在每天下午2点到下午2:59期间的每1分钟触发
（13）0 0/5 14 * * ?    在每天下午2点到下午2:55期间的每5分钟触发
（14）0 0/5 14,18 * * ?     在每天下午2点到2:55期间和下午6点到6:55期间的每5分钟触发
（15）0 0-5 14 * * ?    在每天下午2点到下午2:05期间的每1分钟触发
（16）0 10,44 14 ? 3 WED    每年三月的星期三的下午2:10和2:44触发
（17）0 15 10 ? * MON-FRI    周一至周五的上午10:15触发
（18）0 15 10 15 * ?    每月15日上午10:15触发
（19）0 15 10 L * ?    每月最后一日的上午10:15触发
（20）0 15 10 ? * 6L    每月的最后一个星期五上午10:15触发
（21）0 15 10 ? * 6L 2002-2005   2002年至2005年的每月的最后一个星期五上午10:15触发
（22）0 15 10 ? * 6#3   每月的第三个星期五上午10:15触发

14.3、邮件任务：

邮件发送，在我们的日常开发中，也非常的多，Springboot也帮我们做了支持

  • 邮件发送需要引入spring-boot-start-mail
  • SpringBoot 自动配置MailSenderAutoConfiguration
  • 定义MailProperties内容，配置在application.yml中
  • 自动装配JavaMailSender
  • 测试邮件发送

测试：

1、引入pom依赖

1
2
3
4
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
</dependency>

看它引入的依赖，可以看到 jakarta.mail

1
2
3
4
5
6
<dependency>
    <groupId>com.sun.mail</groupId>
    <artifactId>jakarta.mail</artifactId>
    <version>1.6.4</version>
    <scope>compile</scope>
</dependency>

2、查看自动配置类：MailSenderAutoConfiguration,这个类中存在bean，JavaMailSenderImpl

然后我们去看下配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@ConfigurationProperties(
    prefix = "spring.mail"
)
public class MailProperties {
    private static final Charset DEFAULT_CHARSET;
    private String host;
    private Integer port;
    private String username;
    private String password;
    private String protocol = "smtp";
    private Charset defaultEncoding;
    private Map<String, String> properties;
    private String jndiName;
}

3、配置文件：

1
2
3
4
5
spring.mail.username=1405994298@qq.com
spring.mail.password=你的授权码
spring.mail.host=smtp.qq.com
# 开启加密验证
spring.mail.properties.mail.smtp.ssl.enable=true

获取授权码：在QQ邮箱中的设置->账户->开启pop3和smtp服务

4、Spring单元测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@Test
void contextLoads() {
    //一个简单的邮件
    SimpleMailMessage mailMessage = new SimpleMailMessage();
    mailMessage.setSubject("小王子你好呀");
    mailMessage.setText("谢谢你的关注");
    mailMessage.setTo("1405994298@qq.com");
    mailMessage.setFrom("1405994298@qq.com");

    mailSender.send(mailMessage);
}
@Test
void contextLoads2() throws MessagingException {
    //一个复杂的邮件
    MimeMessage mimeMessage = mailSender.createMimeMessage();
    //组装
    MimeMessageHelper helper = new MimeMessageHelper(mimeMessage,true,"utf-8");
    helper.setSubject("小王子你好呀");
    helper.setText("<p style'color:red'>谢谢你的关注~</p>",true);
    //附件
    helper.addAttachment("1.jpg",new File("G:\\Desktop\\计算机专业课笔记\\java笔记\\08阶段八微服务\\SpringBoot.assets\\1.jpg"));
    helper.addAttachment("2.jpg",new File("G:\\Desktop\\计算机专业课笔记\\java笔记\\08阶段八微服务\\SpringBoot.assets\\1.jpg"));
    helper.setTo("1405994298@qq.com");
    helper.setFrom("1405994298@qq.com");
    mailSender.send(mimeMessage);
}

//封装方法

/**
 *
 * @param html
 * @param subject
 * @param text
 * @throws MessagingException
 */
public void sendMail(Boolean html,String subject,String text) throws MessagingException {
    //一个复杂的邮件
    MimeMessage mimeMessage = mailSender.createMimeMessage();
    //组装
    MimeMessageHelper helper = new MimeMessageHelper(mimeMessage,html);
    //正文
    helper.setSubject(subject);
    helper.setText(text,true);
    //附件
    helper.addAttachment("1.jpg",new File("G:\\Desktop\\计算机专业课笔记\\java笔记\\08阶段八微服务\\SpringBoot.assets\\1.jpg"));
    helper.addAttachment("2.jpg",new File("G:\\Desktop\\计算机专业课笔记\\java笔记\\08阶段八微服务\\SpringBoot.assets\\1.jpg"));
    helper.setTo("1405994298@qq.com");
    helper.setFrom("1405994298@qq.com");
    mailSender.send(mimeMessage);
}

查看邮箱，邮件接收成功！

我们只需要使用Thymeleaf进行前后端结合即可开发自己网站邮件收发功能了！

十五、富文本编辑器

15.1、简介

思考：我们平时在博客园，或者CSDN等平台进行写作的时候，有同学思考过他们的编辑器是怎么实现的吗？

在博客园后台的选项设置中，可以看到一个文本编辑器的选项：

img

其实这个就是富文本编辑器，市面上有许多非常成熟的富文本编辑器，比如：

  • Editor.md——功能非常丰富的编辑器，左端编辑，右端预览，非常方便，完全免费
  • wangEditor——基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、界面美观、易用、开源免费。
  • TinyMCE——TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能齐全，界面美观，就是文档是英文的，对开发人员英文水平有一定要求。
  • 百度ueditor——UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，功能齐全，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码，缺点是已经没有更新了
  • kindeditor——界面经典。
  • Textbox——Textbox是一款极简但功能强大的在线文本编辑器，支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。此外，该工具还实现了屏幕阅读器等辅助技术，并符合WAI-ARIA可访问性标准。
  • CKEditor——国外的，界面美观。
  • quill——功能强大，还可以编辑公式等
  • simditor——界面美观，功能较全。
  • summernote——UI好看，精美
  • jodit——功能齐全
  • froala Editor——界面非常好看，功能非常强大，非常好用（非免费）

总之，目前可用的富文本编辑器有很多……这只是其中的一部分

15.2、Editor.md

我这里使用的就是Editor.md，作为一个资深码农，Mardown必然是我们程序猿最喜欢的格式，看下面，就爱上了！

img

我们可以在官网下载它：https://pandao.github.io/editor.md/ ， 得到它的压缩包！

解压以后，在examples目录下面，可以看到他的很多案例使用！学习，其实就是看人家怎么写的，然后进行模仿就好了！

我们可以将整个解压的文件倒入我们的项目，将一些无用的测试和案例删掉即可！

15.3、基础工程搭建

数据库设计

article：文章表

字段 备注
id int 文章的唯一ID
author varchar 作者
title varchar 标题
content longtext 文章的内容

建表SQL：

1
2
3
4
5
6
7
CREATE TABLE `article` (
  `id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'int文章的唯一ID',
  `author` varchar(50) NOT NULL COMMENT '作者',
  `title` varchar(100) NOT NULL COMMENT '标题',
  `content` longtext NOT NULL COMMENT '文章的内容',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

基础项目搭建

1、建一个SpringBoot项目配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
spring:
  datasource:
    username: root
    password: 123456
    #?serverTimezone=UTC解决时区的报错
    url: jdbc:mysql://localhost:3306/springboot?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver
<resources>
    <resource>
        <directory>src/main/java</directory>
        <includes>
            <include>**/*.xml</include>
        </includes>
        <filtering>true</filtering>
    </resource>
</resources>

2、实体类：

1
2
3
4
5
6
7
8
9
10
11
12
//文章类
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Article implements Serializable {
 
    private int id; //文章的唯一ID
    private String author; //作者名
    private String title; //标题
    private String content; //文章的内容
 
}

3、mapper接口：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Mapper
@Repository
public interface ArticleMapper {
    //查询所有的文章
    List<Article> queryArticles();
 
    //新增一个文章
    int addArticle(Article article);
 
    //根据文章id查询文章
    Article getArticleById(int id);
 
    //根据文章id删除文章
    int deleteArticleById(int id);
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 
<mapper namespace="com.kuang.mapper.ArticleMapper">
 
    <select id="queryArticles" resultType="Article">
       select * from article
    </select>
    
    <select id="getArticleById" resultType="Article">
       select * from article where id = #{id}
    </select>
    
    <insert id="addArticle" parameterType="Article">
        insert into article (author,title,content) values (#{author},#{title},#{content});
    </insert>
    
    <delete id="deleteArticleById" parameterType="int">
        delete from article where id = #{id}
    </delete>
    
</mapper>

既然已经提供了 myBatis 的映射配置文件，自然要告诉 spring boot 这些文件的位置

1
2
3
mybatis:
  mapper-locations: classpath:com/kuang/mapper/*.xml
  type-aliases-package: com.kuang.pojo

编写一个Controller测试下，是否ok；

15.4、文章编辑整合（重点）

1、导入 editor.md 资源 ，删除多余文件

2、编辑文章页面 editor.html、需要引入 jQuery；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html class="x-admin-sm" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>秦疆'Blog</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <!--Editor.md-->
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
 
<body>
 
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <!--博客表单-->
            <form name="mdEditorForm">
                <div>
                    标题：<input type="text" name="title">
                </div>
                <div>
                   作者：<input type="text" name="author">
                </div>
                <div id="article-content">
                    <textarea name="content" id="content" style="display:none;"> </textarea>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<!--editormd-->
<script th:src="@{/editormd/lib/jquery.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
<script type="text/javascript">
    var testEditor;
    //window.onload = function(){ }
    $(function() {
        testEditor = editormd("article-content", {
            width : "95%",
            height : 400,
            syncScrolling : "single",
            path : "../editormd/lib/",
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            emoji: true,
            theme: "dark",//工具栏主题
            previewTheme: "dark",//预览主题
            editorTheme: "pastel-on-dark",//编辑主题
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/article/file/upload",
            onload : function() {
                console.log('onload', this);
            },
            /*指定需要显示的功能按钮*/
            toolbarIcons : function() {
                return ["undo","redo","|",
                    "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
                    "h1","h2","h3","h4","h5","h6","|",
                    "list-ul","list-ol","hr","|",
                    "link","reference-link","image","code","preformatted-text",
                    "code-block","table","datetime","emoji","html-entities","pagebreak","|",
                    "goto-line","watch","preview","fullscreen","clear","search","|",
                    "help","info","releaseIcon", "index"]
            },
            /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
            toolbarIconTexts : {
                releaseIcon : "<span bgcolor=\"gray\">发布</span>",
                index : "<span bgcolor=\"red\">返回首页</span>",
            },
 
            /*给自定义按钮指定回调函数*/
            toolbarHandlers:{
                releaseIcon : function(cm, icon, cursor, selection) {
                    //表单提交
                    mdEditorForm.method = "post";
                    mdEditorForm.action = "/article/addArticle";//提交至服务器的路径
                    mdEditorForm.submit();
                },
                index : function(){
                    window.location.href = '/';
                },
            }
        });
    });
</script>
 
</html>

3、编写Controller，进行跳转，以及保存文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Controller
@RequestMapping("/article")
public class ArticleController {
 
    @GetMapping("/toEditor")
    public String toEditor(){
        return "editor";
    }
    
    @PostMapping("/addArticle")
    public String addArticle(Article article){
        articleMapper.addArticle(article);
        return "editor";
    }
    
}

图片上传问题

1、前端js中添加配置

1
2
3
4
//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/article/file/upload", // //这个是上传图片时的访问地址

2、后端请求，接收保存这个图片, 需要导入 FastJson 的依赖！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//博客图片上传问题
@RequestMapping("/file/upload")
@ResponseBody
public JSONObject fileUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) throws IOException {
    //上传路径保存设置
 
    //获得SpringBoot当前项目的路径：System.getProperty("user.dir")
    String path = System.getProperty("user.dir")+"/upload/";
 
    //按照月份进行分类：
    Calendar instance = Calendar.getInstance();
    String month = (instance.get(Calendar.MONTH) + 1)+"月";
    path = path+month;
 
    File realPath = new File(path);
    if (!realPath.exists()){
        realPath.mkdir();
    }
 
    //上传文件地址
    System.out.println("上传文件保存地址："+realPath);
 
    //解决文件名字问题：我们使用uuid;
    String filename = "ks-"+UUID.randomUUID().toString().replaceAll("-", "");
    //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
    file.transferTo(new File(realPath +"/"+ filename));
 
    //给editormd进行回调
    JSONObject res = new JSONObject();
    res.put("url","/upload/"+month+"/"+ filename);
    res.put("success", 1);
    res.put("message", "upload success!");
 
    return res;
}

3、解决文件回显显示的问题，设置虚拟目录映射！在我们自己拓展的MvcConfig中进行配置即可！

1
2
3
4
5
6
7
8
9
10
11
12
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
 
    // 文件保存在真实目录/upload/下，
    // 访问的时候使用虚路径/upload，比如文件名为1.png，就直接/upload/1.png就ok了。
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/upload/**")
            .addResourceLocations("file:"+System.getProperty("user.dir")+"/upload/");
    }
 
}

表情包问题

自己手动下载，emoji 表情包，放到图片路径下：

修改editormd.js文件

1
2
3
4
5
// Emoji graphics files url path
editormd.emoji     = {
    path  : "../editormd/plugins/emoji-dialog/emoji/",
    ext   : ".png"
};

15.5、文章展示

1、Controller 中增加方法

1
2
3
4
5
6
@GetMapping("/{id}")
public String show(@PathVariable("id") int id,Model model){
    Article article = articleMapper.getArticleById(id);
    model.addAttribute("article",article);
    return "article";
}

2、编写页面 article.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${article.title}"></title>
</head>
<body>
 
<div>
    <!--文章头部信息：标题，作者，最后更新日期，导航-->
    <h2 style="margin: auto 0" th:text="${article.title}"></h2>
    作者：<span style="float: left" th:text="${article.author}"></span>
    <!--文章主体内容-->
    <div id="doc-content">
        <textarea style="display:none;" placeholder="markdown" th:text="${article.content}"></textarea>
    </div>
 
</div>
 
<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}" />
<script th:src="@{/editormd/lib/jquery.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
 
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tocm: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        });});
</script>
</body>
</html>

重启项目，访问进行测试！大功告成！



-------------本文结束感谢您的阅读-------------



本文作者： Alice
本文链接： http://example.com/2020/11/17/%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

恭喜你，发现了一个宝藏男孩