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" %>

在这里插入图片描述