SpringBoot整合Themleaf+Markdown

pom文件坐标：

        
            org.springframework.boot
            spring-boot-starter-data-jpa
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-devtools
            runtime
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            net.sourceforge.nekohtml
            nekohtml
            1.9.22
        
        
            mysql
            mysql-connector-java
            runtime
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        

application.properties文件配置：

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/basedb?characterEncoding=utf-8
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update

spring.thymleaf.cache = false
spring.thymeleaf.mode=HTML
spring.thymeleaf.suffix=.html


cbs.imagesPath=file:/E:/images/

实体类就不说了，主要是上传图片文件部分，上传之前，因为上传的图片不是放在项目下，而是其他路径，这里是E:/images/路径下，为了能在浏览器中能访问到E:/images/下的图片，需要构建一个虚拟地址：

@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurerAdapter {
    // 获取配置文件中图片的路径
    @Value("${cbs.imagesPath}")
    private String mImagesPath;


    // 访问图片方法
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        if (mImagesPath.equals("") || mImagesPath.equals("${cbs.imagesPath}")) {
            String imagesPath = MyWebAppConfigurer.class.getClassLoader().getResource("").getPath();
            if (imagesPath.indexOf(".jar") > 0) {
                imagesPath = imagesPath.substring(0, imagesPath.indexOf(".jar"));
            } else if (imagesPath.indexOf("classes") > 0) {
                imagesPath = "file:" + imagesPath.substring(0, imagesPath.indexOf("classes"));
            }
            imagesPath = imagesPath.substring(0, imagesPath.lastIndexOf("/")) + "/images/";
            mImagesPath = imagesPath;
            System.out.println(mImagesPath);
        }
        LoggerFactory.getLogger(MyWebAppConfigurer.class).info("imagesPath=" + mImagesPath);
        registry.addResourceHandler("/images/**").addResourceLocations(mImagesPath);
        super.addResourceHandlers(registry);
    }
}

接下来就是上传文件的处理：

//处理文件上传
    @RequestMapping(value="/uploadimg")
    public @ResponseBody Map demo(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file, HttpServletRequest request) {
        Map resultMap = new HashMap();
        String fileName = file.getOriginalFilename();
        //保存
        try {
            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
            Files.write(path, bytes);
            resultMap.put("success", 1);
            resultMap.put("message", "上传成功！");
            resultMap.put("url","../images/"+fileName);
        } catch (Exception e) {
            resultMap.put("success", 0);
            resultMap.put("message", "上传失败！");
            e.printStackTrace();
        }
        System.out.println(resultMap.get("success"));
        return resultMap;


    }

后端部分已经写好，现在来处理前端部分

网上有很多Markdown编辑器，可以自行百度，这是用的是editormd这款富文本编辑器，把下载好的editormd文件夹加到static文件夹中：

这里写图片描述

edit.html

启动项目：

1. 编辑文章

这里写图片描述

1. 查看文章

这里写图片描述