JavaWeb个人博客项目：手把手教你实现博客后台系统之添加博文8

建议从第三篇博文开始看起：https://blog.csdn.net/DaiYuMeng/article/details/104677362

有任何问题欢迎下方留言=w=

一、界面图 

---

二、难点分析 

难点一：“上传封面图”按钮点击时，选择了本地图片后，下方要出现你选择的图片

（1）在该按钮下方放入img标签，display属性设置为none

---

（2）调用layui的upload方法

---

（3）upload接口 

①点击“上传封面图”按钮，在本地选择一张图片，该图片通过upload接口会上传到服务器上

②然后再返回一个路径returnPath给前台，即该图片的路径（部分路径），例子如图：

  

③然后再在前面加在服务器前缀地址形成http://localhost:8080/MyBlog/upload/returnPath

    （即完整的该图片在服务器上的地址）

④如果你想查找其在本地路径上的地址，你可以通过getServletContext()方法，我将先在WebContent目录下新建了一个upload文件夹，所以我具体获得路径是使用如图方法：

 

---

难点二：选择父分类时，子分类联动出现选项

（1）注意这是动态获取后台的数据，不是前台固定写好的

---

（2）然后获取一级分类，调用相关接口

---

---

（3）然后获取二级分类，使用form.on()的方法，myFirstSelect为布局中lay-filter的属性值

---

难点三：显示富文本编辑器，并保证提交后相关格式也会存储在数据库中

（1）从百度编辑器umedit的官网下载好jsp的压缩包并解压，放置到项目中，在文件下引入相关js文件

还有ueditor.all.js和controller.jsp中会涉及参数的修改，这个比较简单，具体的可以百度一下，或下载我的项目查看一下

---

（2）进行布局设置，注意id值为editor，id值可以随意设置

---

（3）初始化富文本编辑器

---

（4）使用UE.getEditor('editor').getContent方法获取内容（含h5格式）

---

难点四：保证提交后，标签选择一项后台存储一项，选择两项后台存储两项，三项同理

（由于博文和标签是多对多的关系，故除了博文表和标签表外还多了一张表，是博文和标签之间的关联表）

（1）布局，第二个标签和第三个标签都有一个option，默认为不选择

---

（2）调用相关方法，显示数据

---

（3）保证选择多项时，不会选择到重复项

---

(4)进入提交表单时的addArticle接口，先将其它项插入博文的表中，待成功后再进行判断，插入博文与标签的关联表中

---

三、代码

由于这个涉及的代码太多了，如果有需要可以下载查看，我就放上一些我觉得容易出错的

Upload.java（处理图片下载文件的接口）

package servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import pojo.Data;
import util.JsonUtil;
 

/**
 * Servlet implementation class Upload
 */
@WebServlet("/upload")
public class Upload extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Upload() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		/*
		 * 后台最后进行一个判断
		 * 1.判断文件大小
		 * 2.判断文件宽和高的比值
		 * 3.上传失败进行提示
		 * 4.通过map.put("msg","xxxxx")将值传过来
		 * 5.进行文件扩展名判断
		 * **/
		PrintWriter writer = null;
		//1.得到上传文件的保存目录
		String savePath = this.getServletContext().getRealPath("/upload");
		//ps.这个就是上传文件夹在本地的服务器路径
		System.out.println("savePath:"+savePath);
		String returnPath;
		File file = new File(savePath);
		//2.判断上传文件的保存目录是否存在
		// 如果目录不存在或者目录是文件
		if(!file.exists()&&!file.isDirectory()) {
			System.out.println(savePath+"目录不存在，需要创建");
			//3.创建目录
			file.mkdir();
		}
		try {
			//4.使用apache文件上传组件处理文件步骤
			//4.1 创建一个DiskFileItemFactory
			DiskFileItemFactory factory = new DiskFileItemFactory();
			//4.2 创建一个文件上传解码器
			ServletFileUpload upload = new ServletFileUpload(factory);
			//4.3解决上传文件名的中文乱码
			upload.setHeaderEncoding("UTF-8");
			//4.4 判断提交上来的数据是否是上传表单的数据
			if(!ServletFileUpload.isMultipartContent(request)) {
				return;
			}
			//5.使用ServletFileUpload解析器上传数据
				List list = upload.parseRequest(request);
				//6.遍历 处理文件
				for(FileItem item:list) {
					String filename = item.getName();
					if(filename==null||filename.trim().equals("")) {
						continue;
					}
					System.out.println(filename);
					//注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如：  c:\a\b\1.txt，而有些只是单纯的文件名，如：1.txt
                    //处理获取到的上传文件的文件名的路径部分，只保留文件名部分
                    filename = filename.substring(filename.lastIndexOf("\\") + 1);
                    //获取item中的上传文件的输入流
                    InputStream in = item.getInputStream();
                    //创建一个文件输出流
                    returnPath = filename;
                    FileOutputStream out = new FileOutputStream(savePath+"\\"+filename);
                    //创建一个缓冲区
                    byte buffer[] = new byte[1024];
                    //判断输入流中的数据是否已经读完的标识
                    int len = 0;
                    //循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
                    while ((len = in.read(buffer)) > 0) {
                    	//System.out.println("是否写入进了服务器！！！");
                        out.write(buffer, 0, len);
				}
                    //关闭输入流
                    in.close();
                    //关闭输出流
                    out.close();
                    //删除处理文件上传时生成的临时文件
                    item.delete();
                    Map map = new HashMap();
                	map.put("code", 0);
                	map.put("msg", "我从upload的servlet中返回了");
                	Data data = new Data();
                	data.setReturnPath(returnPath);
                	map.put("data", data);
                	String jsonStr = JsonUtil.beanToString(map);
        			writer= response.getWriter();
        			writer.write(jsonStr);	
				}	
		}catch(Exception e) {
			e.printStackTrace();
		}finally {
			writer.flush();
			writer.close();
		}
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

---

addArticle.jsp（增加博文页面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../base.jsp"%>








	

		

		
			

				文章标题
				

					
				
			

			

				文章分类
				

					
						
					
				
				

					

					
				
			
			

				置顶
				

					 
				
			
			

				

					
					
						上传封面图
					
					
					

					
				
			
			

				文章内容
				

					

				
			
			

				标签
				

					
					
				
				

					
						可不选
					
				
				

					
						可不选
					
				
			
			

				博文简介
				

					
				
			
			

				

					立即提交
					重置
				
			
		


	

---

最后，如果有任何问题欢迎在下方给我留言，我看到的话就会回复哒=w=