文章目录 总览样式引入依赖数据库与配置静态资源过滤工具类controllereditormd前端页面
总览
样式 引入依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.4</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency> </dependencies>其中lombok不是必须的
数据库与配置
就id 标题名 作者 主体内容
mybaits 和映射之类的就不说了 就一个插入语句
没有弄service 处于方便直接用dao来调用了
application.yml
server: port: 8081spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/test?useUnicode=true&悲凉的爆米花=utf-8&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true username: root password: 123456mybatis: mapper-locations: classpath:/mapper/*.xml 静态资源过滤如果不过滤 映射的地址将会出错 这里选择了用java代码的方式来实现
@Configurationpublic class MyMvcConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { //过滤静态资源 会到这个目录里 为markdown图片上传做准备 registry.addResourceHandler("/upload/**") .addResourceLocations("file:" + FileUtil.PATH); }}注意 这里用到了工具类 下面会有他的实现
关于静态过滤的小知识 给大家贴出来
工具类 public class FileUtil { //文件存放的路径 若没有 会自动创建 public static final String PATH=System.getProperty("user.dir")+"/src/main/resources/static/upload/"; /** * 上传文件 如果上传错误 会返回空的地址 注意 返回的地址是用来回显的 所以不要返回布尔类型 */ public static String upload(MultipartFile multipartFile) { if(multipartFile.isEmpty()) { return ""; } String filename = multipartFile.getOriginalFilename(); File file = new File(PATH); if (!file.exists()) { //使用mkdirs 若某个目录不存在 也会一起创建 file.mkdirs(); } //为了不使得图片名字重复 使用uuid拼接 int i = filename.lastIndexOf("."); String suffix = filename.substring(i-1); String newFileName = UUID.randomUUID().toString() + suffix; try { multipartFile.transferTo(new File(PATH+newFileName)); } catch (IOException e) { e.printStackTrace(); return ""; } return newFileName; }} controller
这里用到的articleDAO 只实现了一个插入的方法(用的插件实现 一键生成)
这里直接给出整理好的文件夹 因为一个个的引入太麻烦了 直接用就好了
链接：https://pan.baidu.com/s/1CGAz3IDz0Qv5vUUxOWRtig
提取码：uy0k
目录结构是这样的
注意 我对文件进行了修改操作 若是用原版的 则可能出现
Uncaught SyntaxError: Unexpected token in JSON at position 0 之类的错误
这是因为第三方插件导致的 非常坑
具体解决看这里 我给的文件已经修改过了
editormd 踩坑----图片上传成功无法回显
前端页面需要引入editormd.css jq和editormd.js
<!doctype html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>问答</title> <link rel="stylesheet" th:rel="external nofollow" href="@{/editormd/css/editormd.css}"/></head><body><div> <form th:action="@{/save}" method="post"> 作者 <input type="text" name="author"><br> 标题<input type="text" name="title"> <div id="blog-content"> <textarea required name="content" id="content" style="display:none;" rows="3" class="form-control"> </textarea> </div> <br> <input type="submit" value="发布文章"> </form></div><script th:src="@{/editormd/js/jquery-3.5.1.min.js}"></script><script th:src="@{/editormd/editormd.js}"></script><script type="text/javascript"> var testEditor; $(function () { //根据id来选择对应的textarea testEditor = editormd("blog-content", { width: "100%", height: 500, syncScrolling: "single", path: "/editormd/lib/", //对应的lib目录不要弄错 saveHTMLToTextarea: true, // 保存 HTML 到 Textarea // [TOCM] [TOC] 自动生成目录 tocm: true, tocContainer: "", tocDropdown: false, tocStartLevel: 1, // Parse beginning of H2, Default value 1 emoji: true, tex: true, // 开启科学公式TeX语言支持，默认关闭 flowChart: true, // 开启流程图支持，默认关闭 sequenceDiagram: true, // 开启时序/序列图支持，默认关闭, //图片上传 imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "/edit/upload", onload: function () { console.log('onload', this); }, /*指定需要显示的功能按钮*/ toolbarIcons: function () { return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code-block", "table", "datetime", "emoji", "html-entities", "|", "search", "watch", "preview", "fullscreen"] }, onfullscreen: function () { console.log("onfullscreen"); document.getElementsByClassName("navbar")[0].style.display = "none"; }, onfullscreenExit: function () { console.log("onfullscreenExit"); document.getElementsByClassName("navbar")[0].style.display = ""; } }); });</script></body></html>本文章参考 比较详细 只不过用它的我图片没有回显 故开一贴
SpringBoot 整合 Editormd（完整版）