对jsp的一个小结（5）第三方控件实现新闻编辑

最新推荐文章于 2018-07-20 00:37:55 发布

杨宏林

最新推荐文章于 2018-07-20 00:37:55 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp

本文链接：https://blog.youkuaiyun.com/sgyhl18/article/details/44698121

jsp 专栏收录该内容

16 篇文章

订阅专栏

本文总结了如何使用第三方控件在jsp中实现新闻编辑，包括如何为新闻添加图片的功能，涵盖了上传图片的准备工作及具体实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

8第三方控件实现新闻编辑

1为新闻添加图片（准备工作）

commons下载地址

http://commons.apache.org/fileupload/download_fileupload.cgi
http://commons.apache.org/io/download_io.cgi

api：

commons fileupload1.2.2 api

Commons IO 2.4 API

http://commons.apache.org/proper/commons-io/javadocs/api-2.4/index.html

第一步下载，commons-fileupload-1.2.2.jar和commons-io-2.4.jar
建议在API中参考使用到的类和接口

将jar导入项目中（WEB-INF/lib）

准备添加新闻的页面newsDetailCreate.jsp，把表单提交到doAdd.jsp
注意：
1.表单form标签中，method="post"  enctype="multipart/form-data"
2.上传图片的标签为：<input type="file" name="picPath" value=""/>

在doAdd.jsp中提取表单提交的新闻相关字段，并保存上传的文件，实现新闻的保存功能
注意：
1.需要在doAdd.jsp中导入需要的包
<%@page import="java.io.*,java.util.*,org.apache.commons.fileupload.*"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
2.在newsDetailList.jsp中点击“增加”打开newsDetailCreate.jsp页面；“新闻标题”链接到newsDetailView.jsp并传递新闻Id参数，用以查看指定Id的新闻详情。
3.修改Dao和Service相关的类，完善“增加新闻信息”方法public boolean add(News news)，增加“picPath”字段。增加“通过新闻id获取新闻”的方法public News getNewsById(int id)

<form name ="dataForm" id="dataForm" action="<%=request.getContextPath()%>/jsp/admin/doAdd.jsp" method="post"  enctype="multipart/form-data">

<td><input type="file" name="picPath" value=""/></td>

2为新闻添加图片（实现上传）

doadd.jsp

<%@page import="java.util.Date"%>
<%@page import="com.pb.news.entity.News"%>
<%@page import="java.io.*,java.util.*,org.apache.commons.fileupload.*"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<%@include file="../common/common.jsp" %>
<body>
<%
request.setCharacterEncoding("utf-8");
boolean bRet = false;
boolean bUpload = false;
String uploadFileName = "";
String fieldName = "";
News news = new News();
news.setCreateDate(new Date());
boolean isMultipart = ServletFileUpload.isMultipartContent(request);//多方式提交返回真
String uploadFilePath = request.getSession().getServletContext().getRealPath("/upload/" );
if (isMultipart == true) {
	FileItemFactory factory = new DiskFileItemFactory();
	ServletFileUpload upload = new ServletFileUpload(factory);
	try {
		List<FileItem> items = upload.parseRequest(request);
		Iterator<FileItem> iter = items.iterator();
		while (iter.hasNext()) {
			FileItem item = (FileItem) iter.next();
			if (item.isFormField()){
				fieldName = item.getFieldName();
				if (fieldName.equals("title")){
					news.setTitle(item.getString("UTF-8"));
				}else if(fieldName.equals("id")){
					String id = item.getString();
					if (id != null && !id.equals("")){
						news.setId(Integer.parseInt(id));
					}
				}else if (fieldName.equals("categoryId")){
					news.setCategoryId(Integer.parseInt(item.getString()));
				}else if (fieldName.equals("summary")){
					news.setSummary(item.getString("UTF-8"));
				}else if (fieldName.equals("newscontent")){
					news.setContent(item.getString("UTF-8"));
				}else if(fieldName.equals("author")){
					news.setAuthor(item.getString("UTF-8"));
				}
			}else{
				String fileName = item.getName();
				if (fileName != null && !fileName.equals("")) {
					File fullFile = new File(item.getName());
					File saveFile = new File(uploadFilePath, fullFile.getName());
					item.write(saveFile);
					uploadFileName = fullFile.getName();
					news.setPicPath(uploadFileName);
					bUpload = true;
				}
			}
			
		}
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
}
System.out.println("上传成功后的文件名是：："+news.getPicPath());

	//调用后台方法，将新闻信息插入数据库
	bRet=newsService.addNews(news);
%>

<%
if (bRet) {
	response.sendRedirect("newsDetailList.jsp");
} else {
	response.sendRedirect("newsDetailCreate.jsp");
}
%>
</body>
</html>

NewsDaoImpl类修改（picpath属性）

// 增加新闻信息
	public boolean add(News news) {
		boolean flag=false;
		try {
			String sql="insert into news_detail(id,categoryId,title,summary,content,picPath,createdate,author) values(SEQ_NEWS.nextval,?,?,?,?,?,?,?)";
			Object[] params={news.getCategoryId(),news.getTitle(),news.getSummary(),news.getContent(),news.getPicPath(), new java.sql.Timestamp(news.getCreateDate().getTime()),news.getAuthor()};
			int i=this.executeUpdate(sql, params);
			//（4）处理执行结果
			if(i>0){
				System.out.println("插入新闻成功！");
			}
			flag=true;
		}finally{
			//释放资源
			this.closeResource();
		}
		return flag;
	}

NewsService接口添加

// 通过新闻id获取新闻
	public News getNewsById(int id);

实现类NewsServiceImpl实现

	@Override
	public News getNewsById(int id) {
		// TODO Auto-generated method stub
		return newsDao.getNewsById(id);
	}

NewsDao 接口也添加

	//通过新闻id获取新闻
	public News getNewsById(int id);

NewsDaoImpl实现

	//通过新闻id获取新闻
	public News getNewsById(int id) {		
		News news=null;
		try {
			//（3）获得Statement对象，执行SQL语句
			String sql = "select * from news_detail where id="+id;//多了一个where子句
			Object[] params={};
			ResultSet rs=this.executeSQL(sql, params);
			//（4）处理执行结果(ResultSet)，
			if(rs.next()){
				int categoryId=rs.getInt("categoryId");
				String title=rs.getString("title");
				String summary=rs.getString("summary");
				String content=rs.getString("content");
				String picPath=rs.getString("picPath");
				String author=rs.getString("author");
				Timestamp time=rs.getTimestamp("createdate");
				
				//封装成新闻信息对象
				news=new News();
				news.setId(id);
				news.setCategoryId(categoryId);
				news.setTitle(title);
				news.setSummary(summary);
				news.setContent(content);
				news.setPicPath(picPath);
				news.setAuthor(author);
				news.setCreateDate(time);
			}
		}catch (SQLException e) {			
			e.printStackTrace();
		}finally{
			//释放资源
			this.closeResource();
		}
		return news;
	}

newsdetaillist.jsp

<button type="button" onclick="addNews();" class="page-btn">增加</button>

<script type="text/javascript">
<!--
	function addNews(){
		window.location="newsDetailCreate.jsp";
	}
//-->
</script>

<td><a href='newsDetailView.jsp?id=<%=news.getId()%>'><%=news.getTitle() %></a></td><!--新闻标题链接到新闻详情页面-->

newsDetailView.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
  <head>
    <title>My JSP 'adminNewsView.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
  	<jsp:include page="../common/newsDetailView.jsp">
  		<jsp:param name="id" value='<%=request.getParameter("id")%>'/><!--传递参数-->
  	</jsp:include>
  	<div align="center">
  		<button type="button" class="page-btn" name="return" onclick="javascript:location.href='newsDetailList.jsp'">返回</button>
  	</div>
  </body>
</html>

common/newsDetailview

<%@ page language="java" import="java.util.*,com.pb.news.entity.*" pageEncoding="UTF-8"%>

<jsp:useBean id="newsDao" beanName="com.pb.news.dao.impl.NewsDaoImpl" type="com.pb.news.dao.NewsDao" />
<jsp:useBean id="newsService" beanName="com.pb.news.service.impl.NewsServiceImpl" type="com.pb.news.service.NewsService" />
<jsp:setProperty property="newsDao" name="newsService" value="<%=newsDao%>"/>
<link href="<%=request.getContextPath() %>/css/common.css" rel="stylesheet" type="text/css" />
<%
	String id = request.getParameter("id");<!--获取参数-->
	News news = newsService.getNewsById(Integer.parseInt(id));
	
%>
<div class="main-text-box-tbg">
	<div class="main-text-box-bbg">
		<div class="article-box">
			<h1><%=news.getTitle() %></h1>
			<div class="source-bar">发布者：<%=news.getAuthor() %> 分类：新闻信息  更新时间：<%=news.getCreateDate() %>" </div>
			<div class="article-content">
				<span class="article-summary"><b>摘要：<%=news.getSummary() %></b></span>
					<img src="<%=request.getContextPath() %>/upload/<%=news.getPicPath() %>"/><br/>
				<%=news.getContent() %>
			</div>
		</div>
	</div>
</div>

要记得创建include文件夹

3可视化新闻编辑

首先下载CKEditor：
http://ckeditor.com/download

解压并复制CKEditor到项目中

在页面中引入CKEditor：
1.<script type="text/javascript" src="<%=request.getContextPath() %>/ckeditor/ckeditor.js"> </script>
2.在“内容”textarea标签中加入class="ckeditor"

引入后就可以使用CKEditor编辑新闻的内容了

编辑好新闻内容后，就可以提交到doAdd.jsp，把新闻存入数据库中
注意：在数据库中对应的字段类型为“CLOB”

<textarea id="newscontent" name="newscontent" class="ckeditor" rows="8"></textarea>