个人博客项目之editormd实现文章详情页面预览

继之前博客写了editmd.js（国内开源的一款前端Markdown框架）实现的写文章功能之后，本博客介绍使用editormd实现文章预览功能，之前博客链接：https://blog.csdn.net/u014427391/article/details/86378811

要从上篇博客介绍的将Markdown语法的语句存储在数据库之后，读取出来，然后调用editormd的一些js脚本就可以实现

主要参考editormd提供的examples文件夹下面的html-preview-markdown-to-html.html

后台实现：
采用jpa实现

package net.myblog.repository;

import java.util.Date;
import java.util.List;

import net.myblog.entity.Article;

import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.PagingAndSortingRepository;
import org.springframework.data.repository.query.Param;

public interface ArticleRepository extends PagingAndSortingRepository{

	/**
	 * 获取文章详情信息
	 * @param articleId
	 * @return
	 */
	@Query("from Article a where a.articleId=:articleId")
	public Article getArticleInfo(@Param("articleId")int articleId);

Service类：

/**
	 * 获取文章详情信息
	 * @param articleId
	 * @return
	 */
	public Article getArticleInfo(int articleId) {
		return articleRepository.getArticleInfo(articleId);
	}

Controller类

/**
     * 博客详情页面
     * @return
     */
    @RequestMapping(value = "/details")
    public ModelAndView details(@RequestParam("articleId")String articleId) {
        ModelAndView mv = this.getModelAndView();
        Article article = articleService.getArticleInfo(Integer.parseInt(articleId));
        mv.addObject("article",article);
        mv.setViewName("myblog/article/article_details");
        return mv;
    }

jsp页面：
实现主要依赖于editormd.js提供的第三方库脚本:

前端的jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



	
	
	
	
	
	
	
	
	
	
	


<%@ include file="../frame/top.jsp" %>


	

		

			
${article.articleName}
                ${article.articleContent}
		
	













<%@ include file="../frame/footer.jsp" %>