1、建一个SpringBoot项目配置
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、实体类：
//文章类 @Data @NoArgsConstructor @AllArgsConstructor public class Article implements Serializable { private int id; //文章的唯一ID private String author; //作者名 private String title; //标题 private String content; //文章的内容 }3、mapper接口：
@Mapper @Repository public interface ArticleMapper { //查询所有的文章 List<Article> queryArticles(); //新增一个文章 int addArticle(Article article); //根据文章id查询文章 Article getArticleById(int id); //根据文章id删除文章 int deleteArticleById(int id); } <?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 resultType="Article"> select * from article </select> <select resultType="Article"> select * from article where id = #{id} </select> <insert parameterType="Article"> insert into article (author,title,content) values (#{author},#{title},#{content}); </insert> <delete parameterType="int"> delete from article where id = #{id} </delete> </mapper>既然已经提供了 myBatis 的映射配置文件，自然要告诉 spring boot 这些文件的位置
mybatis: mapper-locations: classpath:com/kuang/mapper/*.xml type-aliases-package: com.kuang.pojo编写一个Controller测试下，是否ok；
17.2、文章编辑整合（重点）1、导入 editor.md 资源 ，删除多余文件
2、编辑文章页面 editor.html、需要引入 jQuery；
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <title>秦疆'Blog</title> <!--Editor.md--> <link th:href="@{/editormd/css/editormd.css}"/> <link href="http://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> </head> <body> <div> <div> <div> <!--博客表单--> <form> <div> 标题：<input type="text"> </div> <div> 作者：<input type="text"> </div> <div> <textarea> </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 = 'http://www.likecs.com/'; }, } }); }); </script> </html>