markdown 发表文章

阳光穿透心脏的1/2处 2022-09-25 01:23 153阅读 0赞

#     #

# markdown 编辑器发表博客 #

markdown 页面编辑器： [http://blog.csdn.net/qq\_19558705/article/details/51993884][http_blog.csdn.net_qq_19558705_article_details_51993884]

markdown 操作文章 : [http://blog.csdn.net/qq\_19558705/article/details/52171181][http_blog.csdn.net_qq_19558705_article_details_52171181]

[markdown 分页 排序 搜索文章][markdown _ _]  :  [http://blog.csdn.net/qq\_19558705/article/details/52251519][markdown _ _]  
  
markdown 文字标签：[http://blog.csdn.net/qq\_19558705/article/details/52265947][http_blog.csdn.net_qq_19558705_article_details_52265947]

个人主页：[http://www.itit123.cn/][http_www.itit123.cn] 更多干货等你来拿

今天花了点时间完成了发布博客的功能。页面很简陋，效果图如下：

![20160804174030697][]

![20160804174043916][]

直接上代码（只提供思路，所用框架为Spring + SpringMVC + Spring data jpa + shiro）：

首先要一个博客的实体类，一开始没必要太复杂，有基本要素就可以了。

package com.real.blog.entity;
    
    import java.util.Date;
    
    import javax.persistence.Entity;
    import javax.persistence.Table;
    
    import lombok.Getter;
    import lombok.Setter;
    
    import org.hibernate.validator.constraints.NotBlank;
    
    import com.fasterxml.jackson.annotation.JsonFormat;
    import com.real.entity.IdEntity;
    
    @Getter
    @Setter
    @Entity
    @Table(name = "xlblog")
    public class Blog extends IdEntity{
    	
    	@NotBlank
    	private String title;
    	private String author;
    	@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+08:00") 	// 设定JSON序列化时的日期格式
    	private Date createdDate;
    	@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+08:00") 	// 设定JSON序列化时的日期格式
    	private Date updateDate;
    	private String content;
    
    }

这里用到了lombok，不懂的可以看一下这个：[http://blog.csdn.net/qq\_19558705/article/details/50277745][http_blog.csdn.net_qq_19558705_article_details_50277745]

核心处理类controller

package com.real.blog.web;
    
    import java.io.File;
    import java.io.IOException;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.apache.shiro.SecurityUtils;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.servlet.mvc.support.RedirectAttributes;
    
    import com.google.gson.Gson;
    import com.real.blog.entity.Blog;
    import com.real.blog.service.BlogService;
    import com.real.service.qiniu.QiniuService;
    import com.real.utils.GenerateUtils;
    
    @Controller
    @RequestMapping("blog")
    public class BlogController{
    	
    	private static final Logger logger = LoggerFactory.getLogger(BlogController.class);
    	
    	@Autowired
    	private QiniuService qiniuService;
    	@Autowired
    	private BlogService blogService;
    	
    	private static final String WEB_PATH = "http://ip:8080";
    	
    	@RequestMapping("all")
    	public String execute(Model model){
    		logger.info("blogs : {} " , blogService.findAll(Blog.class));
    		model.addAttribute("blogs", blogService.findAll(Blog.class));
    		return "blog/index";
    	}
    	
    	@RequestMapping("detail")
    	public String detail(){
    		return "blog/detail";
    	}
    	
    	@RequestMapping("java")
    	public String java(){
    		return "blog/java";
    	}
    	
    	/**
    	 * 跳转编辑博客页面
    	 * 
    	 * @param blogId
    	 * @return
    	 */
    	@RequestMapping("edit")
    	public String edit(@RequestParam(value="blogId",required=false) String blogId){
    		if (null == blogId) {
    			
    		}
    		return "blog/edit";
    	}
    	
    	/**
    	 * markdown 上传图片
    	 * 
    	 */
    	@RequestMapping(value = "uploadImage" , method = RequestMethod.POST)
    	@ResponseBody
    	public String uploadImage(HttpServletRequest request,
    			@RequestParam(value = "file" , required=false) MultipartFile file,
    			@RequestParam(value = "text" , required=false) String fileName) {
    		String realPath = request.getSession().getServletContext().getRealPath("/");
    		String resourcePath = "static\\images\\uploadImages\\";
    		String result = null;
    		if(file!=null){
    			if(GenerateUtils.allowUpload(file.getContentType())){
    				// 存储本地
                    File dir = new File(realPath + resourcePath);
                    if(!dir.exists()){
                        dir.mkdirs();
                    }
                    File saveFile = new File(dir,file.getOriginalFilename());
                    try {
    					file.transferTo(saveFile);
    					String callbackImgUrl = WEB_PATH + request.getSession().getServletContext().getContextPath() + "/" +resourcePath.replaceAll("\\\\","/") + file.getOriginalFilename();
    					Map<String, Object> resultMap = new HashMap<String, Object>();
    					resultMap.put("message", fileName);
    					resultMap.put("url", callbackImgUrl);
    					result = new Gson().toJson(resultMap);
    				} catch (IllegalStateException e) {
    					e.printStackTrace();
    					result = "{\"error\":\"upload error\"}";
    				} catch (IOException e) {
    					e.printStackTrace();
    					result = "{\"error\":\"upload error\"}";
    				}
    			}
    		}
    		logger.info("result : {} " ,result);
    		return result;
    	}
    	
    	/**
    	 * 发布博客
    	 * 
    	 * @param blog
    	 * @param redirectAttributes
    	 * @return
    	 */
    	@RequestMapping(value = "update", method = RequestMethod.POST)
        public String updateBlogContent(@RequestParam(value = "blogTitle" , required=true) String blogTitle,
        		@RequestParam(value = "blogContent" , required=true) String blogContent,
        		RedirectAttributes redirectAttributes) {
    		Blog blog = new Blog();
    		// 完善权限后在弄，即登录的用户才会有权限发表博客
    //		blog.setAuthor(SecurityUtils.getSubject().getPrincipal().toString());
    		blog.setTitle(blogTitle);
    		blog.setContent(blogContent);
    		blog.setCreatedDate(new Date());
    		try {
    			blogService.save(blog);
    			redirectAttributes.addFlashAttribute("message", "发布成功！");
    		} catch (Exception e) {
    			e.printStackTrace();
    			// FIXME 有待完善
    			redirectAttributes.addFlashAttribute("message", "发布失败，请稍后再试！");
    		}
            return "redirect:all";
        }
    
    }

编辑页面：

<%@ page contentType="text/html;charset=UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
    <c:set var="ctx" value="${pageContext.request.contextPath}" />
    <link rel="stylesheet" type="text/css" href="${ctx}/static/markdown/css/bootstrap.css"/>
    <h1>编辑页面</h1>
    <form id="blogForm" action="${ctx}/blog/update" method="post">
    <input type="text" name="blogTitle" autofocus="autofocus" placeholder="请输入标题"><br/><br/>
    <textarea id="markdown-textarea" rows="12" class="span7" name="blogContent" ></textarea>
    <button>发布</button>
    </form>
    <script type="text/javascript" src="${ctx}/static/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/markdown/js/markdown.js"></script>
    <script type="text/javascript" src="${ctx}/static/markdown/js/markdown-editor.js"></script>
    <script type="text/javascript" src="${ctx}/static/markdown/js/custom.js"></script>
    <script type="text/javascript" src="${ctx}/static/jquery-validation/jquery.validate-1.14.0.min.js"></script>
    
    <script>
    $().ready(function() {  
    	$('#markdown-textarea').markdown();
        $("#blogForm").validate({  
            rules: {  
            	blogTitle: {  
                    required: true,  
                    minlength: 3  
                },  
            	blogContent: "required"  
            },  
            messages: {  
            	blogTitle: "标题不能为空",
                blogContent: "请填写内容" 
            },
            submitHandler:function(form){
                form.submit();
            }
        });  
    }); 
    </script>

展示页面：

只做了轮廓，之后在慢慢完善，优化，美观。

遇到的问题也写在代码中了，有什么问题，和建议可以提出来。一起学习一起成长一起装逼。

[http_blog.csdn.net_qq_19558705_article_details_51993884]: http://blog.csdn.net/qq_19558705/article/details/51993884
[http_blog.csdn.net_qq_19558705_article_details_52171181]: http://blog.csdn.net/qq_19558705/article/details/52171181
[markdown _ _]: http://blog.csdn.net/qq_19558705/article/details/52251519
[http_blog.csdn.net_qq_19558705_article_details_52265947]: http://blog.csdn.net/qq_19558705/article/details/52265947
[http_www.itit123.cn]: http://www.itit123.cn/
[20160804174030697]: /images/20220719/0065ec5070d548968914ba2186077c56.png
[20160804174043916]: /images/20220719/cc0367a26d23468ca9c1469185ad311a.png
[http_blog.csdn.net_qq_19558705_article_details_50277745]: http://blog.csdn.net/qq_19558705/article/details/50277745