pom文件坐標(biāo)：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
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/
實(shí)體類就不說(shuō)了兴想，主要是上傳圖片文件部分幢哨，上傳之前，因?yàn)樯蟼鞯膱D片不是放在項(xiàng)目下嫂便，而是其他路徑捞镰，這里是E:/images/路徑下，為了能在瀏覽器中能訪問(wèn)到E:/images/下的圖片，需要構(gòu)建一個(gè)虛擬地址：
@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurerAdapter {
// 獲取配置文件中圖片的路徑
@Value("${cbs.imagesPath}")
private String mImagesPath;
// 訪問(wèn)圖片方法
@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);
}
}
接下來(lái)就是上傳文件的處理：
//處理文件上傳
@RequestMapping(value="/uploadimg")
public @ResponseBody Map<String,Object> demo(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file, HttpServletRequest request) {
Map<String,Object> resultMap = new HashMap<String,Object>();
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;
}
后端部分已經(jīng)寫(xiě)好凸丸，現(xiàn)在來(lái)處理前端部分
網(wǎng)上有很多Markdown編輯器拷邢，可以自行百度，這是用的是editormd這款富文本編輯器屎慢，把下載好的editormd文件夾加到static文件夾中：
這里寫(xiě)圖片描述
edit.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Edit</title>
<link rel="stylesheet" th:href="@{/editormd/css/editormd.min.css}"
href="/editormd/css/editormd.min.css"/>
</head>
<body>
<div>
<input type="text" name="title" style="width: 500px" id="title"/>
<input type="submit" title="發(fā)布" id="submitBtn" />
</div>
<!--class="editormd"-->
<div id="test-editormd">
<textarea style="display:none;" name="test-editormd-markdown-doc" id="content"></textarea>
<!-- 第二個(gè)隱藏文本域瞭稼，用來(lái)構(gòu)造生成的HTML代碼，方便表單POST提交腻惠，這里的name可以任意取环肘，后臺(tái)接受時(shí)以這個(gè)name鍵為準(zhǔn) -->
<textarea class="editormd-html-textarea" name="text" id="htmlContent"></textarea>
</div>
<script th:src="@{/js/jquery.min.js}" src="/js/jquery.min.js"></script>
<script th:src="@{/editormd/js/editormd.min.js}" src="/editormd/js/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
editormd("test-editormd", {
width: "1000px",
height: 640,
syncScrolling : "single",
//你的lib目錄的路徑，我這邊用JSP做測(cè)試的
tocm : true, // Using [TOCM]
tex : true, // 開(kāi)啟科學(xué)公式TeX語(yǔ)言支持妖枚，默認(rèn)關(guān)閉
flowChart : true, // 開(kāi)啟流程圖支持廷臼，默認(rèn)關(guān)閉
path : "/editormd/lib/",
//這個(gè)配置在simple.html中并沒(méi)有，但是為了能夠提交表單绝页，使用這個(gè)配置可以讓構(gòu)造出來(lái)的HTML代碼直接在第二個(gè)隱藏的textarea域中荠商，方便post提交表單。
saveHTMLToTextarea : true,
imageUpload : true,
imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],
imageUploadURL : "/uploadimg",
onload: function () {
this.width("100%");
this.height(480);
}
});
$("#submitBtn").click(
function () {
submitblog();
}
)
function submitblog() {
var title = $("#title").val();
var content = $("#content").val();
var htmlContent = $("#htmlContent").val();
$.ajax({
url: "submit",
data: {title: title, content:content,htmlContent:htmlContent},
success:function () {
alert("發(fā)布成功");
},
error:function () {
alert("發(fā)布失敗");
}
})
}
});
</script>
</body>
</html>
啟動(dòng)項(xiàng)目：
- 編輯文章
這里寫(xiě)圖片描述
- 查看文章
這里寫(xiě)圖片描述
