一、富文本编辑器
(1)概述
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,类似于 Microsoft Word 的编辑功能。
(2)常用的富文本编辑器
①ckeditor
②Kindeditor
③ueditor
④wangEditor
⑤SmartMarkUP
⑥Control.Editor
⑦EditArea
⑧Free Rich Text Editor
(3)CKeditor的使用步骤
【步骤一】官网 https://ckeditor.com/ 下载-解压-引入
【步骤二】引入
<script type="text/javascript" src = "../ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace("ncontent");
</script>
显示效果:
二、web文件上传与下载
【一】概述
将本地文件上传到服务器端,从服务器端下载文件到本地的过程。例如目前网站需要上传头像、上传下载图片或网盘等功能都是利用文件上传下载功能实现的。
【二】原理
① 文件上传
(1)客户端浏览器通过文件浏览框,选择需要上传的文件内容(其中包括文件路径及文件内容)。
(2)客户端浏览器通过点击上传按钮,将本地文件上传到服务器端。
(3)服务器端通过程序接收本地文件内容,并将其保存在服务器端磁盘中。
② 文件下载
(1)客户端浏览器通过点击下载按钮,将服务器端保存的文件下载到本地磁盘。
(2)服务器端通过程序将服务器端文件响应给客户端。
【三】实现方式
SmartUpload组件
Apache CommonsFileUpload组件
Servlet 3.0 文件上传
【四】SmartUpload组件使用
(1) 核心类
SmartUpload
1.1概述
该类完成上传下载工作。
1.2上传文件使用的方法
① public final void initialize(javax.servlet.jsp.PageContext pageContext)
1.1 执行上传下载的初始化工作,必须第一个执行。
1.2 pageContext为JSP页面内置对象(页面上下文)
② public void upload()
上传文件数据。对于上传操作,第一步执行initialize方法,第二步就要执行这个方法。
③ public int save(String destPathName)
将全部上传文件保存到指定目录下,并返回保存的文件个数。
④ public int save(String destPathName,int option)
4.1 将全部上传文件保存到指定目录下,并返回保存的文件个数。
4.2 option:
4.21 SAVE_PHYSICAL指示组件将文件保存到以操作系统根目录为文件根目录的目录下
4.22 AVE_VIRTUAL指示组件将文件保存到以Web应用程序根目录为文件根目录的目录下
4.23 SAVE_AUTO则表示由组件自动选择
⑤ public Files getFiles()
取全部上传文件,以Files对象形式返回,可以利用Files类的操作方法来获得上传文件的数目等信息
⑥ public Request getRequest()
取得Request对象,以便由此对象获得上传表单参数之值。
⑦ public void setAllowedFilesList(String allowedFilesList)
设定允许上传带有指定扩展名的文件,当上传过程中有文件名不允许时,组件将抛出异常
⑧ public void setDeniedFilesList(String deniedFilesList)
用于限制上传那些带有指定扩展名的文件。若有文件扩展名被限制,则上传时组件将抛出异常。
⑨ public void setMaxFileSize(long maxFileSize)
设定每个文件允许上传的最大长度。
⑩ public void setTotalMaxFileSize(long totalMaxFileSize)
设定允许上传的文件的总长度,用于限制一次性上传的数据量大小。
1.3下载文件常用的方法
(1) public void setContentDisposition(String contentDisposition)
将数据追加到MIME文件头的CONTENT-DISPOSITION域。jspSmartUpload组件会在返回下载的信息时自动填写MIME文件头的CONTENT-DISPOSITION域,如果用户需要添加额外信息,请用此方法。
(2)downloadFile 下载文件
① public void downloadFile(String sourceFilePathName)
其中,sourceFilePathName为要下载的文件名(带目录的文件全名)
② public void downloadFile(String sourceFilePathName,String contentType)
其中,sourceFilePathName为要下载的文件名(带目录的文件全名),contentType为内容类型(MIME格式的文件类型信息,可被浏览器识别)。
③ public void downloadFile(String sourceFilePathName,String contentType,String destFileName)
其中,sourceFilePathName为要下载的文件名(带目录的文件全名),contentType为内容类型(MIME格式的文件类型信息,可被浏览器识别),destFileName为下载后默认的另存文件名。
简单演示:
第一步:添加jar包
第二步:简单布局form表单提交
<form enctype="multipart/form-data" action="doFileDemo.jsp" method = "post">
用户: <input type = "text" name = "username"/>
<br/>
头像: <input type = "file" name = "nfile"/>
<input type = "submit" value = "上传头像"/>
</form>
第三步:中转站处理
<%@page import="com.jspsmart.upload.Request"%>
<%@page import="com.jspsmart.upload.File"%>
<%@page import="com.jspsmart.upload.SmartUpload"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//实例化SmartUpload组件对象
SmartUpload su = new SmartUpload();
//调用初始化组件的方法
su.initialize(pageContext);
String allow = "jpg,jpeg,png";
String denied = "avi,mp4,mp3,wmv,txt";
long maxFileSize = 1024*1024*1024;
long totalMaxFileSize = 1024*1024;
try{
su.setCharset("UTF-8");
su.setAllowedFilesList(allow);
su.setDeniedFilesList(denied);
su.setMaxFileSize(maxFileSize);
su.setTotalMaxFileSize(totalMaxFileSize);
//调用上传的方法 (上传之后,图片暂时存储到内存上)
su.upload();
//实际性的保存(最终将图片存储到web服务器中【tomcat】)
File file = su.getFiles().getFile(0);
//判断是否选中
String filePath = "upload//";
if(!file.isMissing()){
String fileName = file.getFileName();
filePath+=fileName;
}
//将内存上的文件保存到当前web服务器中 web_10_file的upload文件夹内
file.saveAs(filePath, SmartUpload.SAVE_AUTO);
out.println("上传成功");
System.out.println(filePath);
}catch(Exception e){
e.printStackTrace();
}
//通过smartupload组件提供的request对象获取其它输入项的值
//获取request对象
Request req = su.getRequest();
//获取用户名
String username = req.getParameter("username");
out.println("<hr/>username="+username);
%>
第四步:显示图片
(2)Files
2.1概述
这个类表示所有上传文件的集合,通过它可以得到上传文件的数目、大小等信息。
2.2 常用方法
① public int getCount()
取得上传文件的数目。
② public File getFile(int index)。其中,index为指定位移,其值在0到getCount()-1之间。
取得指定位移处的文件对象File(这是com.jspsmart.upload.File,不是java.io.File)。
③ public long getSize()
取得上传文件的总长度,可用于限制一次性上传的数据量大小。
④ public Collection getCollection()
将所有上传文件对象以Collection的形式返回,以便其它应用程序引用,浏览上传文件信息。
⑤ public Enumeration getEnumeration()
将所有上传文件对象以Enumeration(枚举)的形式返回,以便其它应用程序浏览上传文件信息。
(3)File
3.1 概述
这个类包装了一个上传文件的所有信息。通过它,可以得到上传文件的文件名、文件大小、扩展名、文件数据等信息。
3.2 常用方法
① public void saveAs(java.lang.String destFilePathName) 或public void saveAs(java.lang.String destFilePathName, int optionSaveAs)
destFilePathName是另存的文件名
optionSaveAs
SAVEAS_PHYSICAL表明以操作系统的根目录为文件根目录另存文件
SAVEAS_VIRTUAL表明以Web应用程序的根目录为文件根目录另存文件
SAVEAS_AUTO则表示让组件决定,当Web应用程序的根目录存在另存文件的目录时,它会选择SAVEAS_VIRTUAL,否则会选择SAVEAS_PHYSICAL
② public boolean isMissing()
这个方法用于判断用户是否选择了文件,也即对应的表单项是否有值。选择了文件时,它返回false。未选文件时,它返回true。
③ public String getFieldName()
取HTML表单中对应于此上传文件的表单项的名字。
④ public String getFileName()
取文件名(不含目录信息)
⑤ public String getFilePathName
取文件全名(带目录)
⑥ public String getFileExt()
取文件扩展名(后缀)
⑦ public int getSize()
取文件长度(以字节计)
⑧ public byte getBinaryData(int index)。其中,index表示位移,其值在0到getSize()-1之间。
取文件数据中指定位移处的一个字节,用于检测文件等处理。
(4)Request
4.1 概述
这个类的功能等同于JSP内置的对象request。只所以提供这个类,是因为对于文件上传表单,通过request对象无法获得表单项的值,必须通过jspSmartUpload组件提供的Request对象来获取。
4.2 常用方法
① public String getParameter(String name)。其中,name为参数的名字。
获取指定参数之值。当参数不存在时,返回值为null。
② public String[] getParameterValues(String name)。其中,name为参数的名字。
当一个参数可以有多个值时,用此方法来取其值。它返回的是一个字符串数组。当参数不存在时,返回值为null。
③ public Enumeration getParameterNames()
取得Request对象中所有参数的名字,用于遍历所有参数。它返回的是一个枚举型的对象
(2) 注意事项
(①)表单请求方式必须为POST
(②)设置enctype="multipart/form-data",专用于文件传输
(③)文件标签需设置name属性
三、主界面分页(携带主题)
(1)分析数据库语句
select b.* from(select a.*,rownum as rid from tb_news a
) b where b.rid between start and end;
select c.* from ( select b.*,rownum as rid from (
select * from tb_news where ntid = ntid )
)c where c.rid between start and end;
(2)编写页面显示新闻和条数的方法
@Override
public List<News> queryNewsAll(int pageIndex, int pageSize, int ntid) {
int start = (pageIndex - 1) * pageSize + 1;
int end = pageIndex * pageSize;
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<News> list = new ArrayList<News>();
String sql = "";
String sqlNtid = "";
try {
conn = DBHelper.getConn();
if(ntid!=0) {
sqlNtid = " where ntid = "+ntid;
}
sql = "select c.* from ( select b.*,rownum as rid from (select * from tb_news "+sqlNtid+")b)c where c.rid between "+start+" and "+end+"";
System.out.println(sql);
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()) {
// 获取分类编号rs.getInt("ntid");
Theme theme = new ThemeDaoImpl().getThemeByTid(rs.getInt("ntid"));
list.add(new News(rs.getInt("nid"), theme, rs.getString("ntitle"), rs.getString("nauthor"),
rs.getString("nsummary"), rs.getString("ncontent"), rs.getString("nimage"),
rs.getString("ndate"), rs.getInt("ncount")));
}
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.myClose(conn, ps, rs);
}
return list;
}
@Override
public int getNewsCountByNtid(int ntid) {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
int count = 0;// 保存表的总记录数
try {
conn = DBHelper.getConn();
String sql = "select count(*) from tb_news ";
if(ntid!=0) {
sql+=" where ntid = "+ntid;
}
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
if (rs.next()) {
count = rs.getInt(1);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.myClose(conn, ps, rs);
}
return count;
}
(3)前台主页显示
<ul class="class_date">
<li id='class_month'><a href="index.jsp"><b>全部</b></a>
<%
IThemeDao itd = new ThemeDaoImpl();
List<Theme> listThemes = itd.queryThemeAll();
for(Theme theme:listThemes){
%>
<a href="index.jsp?tid=<%=theme.getTid()%>">
<b><%=theme.getTname() %></b>
</a>
<%
}
%></li>
</ul>
<ul class="classlist">
<%
String id = request.getParameter("tid");//null
int tid = 0;
if(id!=null){
tid = Integer.valueOf(id);
}
System.out.println("tid = "+tid);
INewsDao ind = new NewsDaoImpl();
int pageIndex = 1;
int pageSize = 5;
int pageMax = 0;
String pIndex = request.getParameter("pageIndex");
if(null!=pIndex){
pageIndex = Integer.valueOf(pIndex);
}
int count = ind.getNewsCountByNtid(tid);
pageMax = count%pageSize==0?count/pageSize:count/pageSize+1;
List<News> listNews = ind.queryNewsAll6(pageIndex,pageSize,tid);
for(News news:listNews){
%>
<li><a href='#'><%=news.getNtitle() %> </a><span> <%=news.getNdate() %></span></li>
<%
}
%>
</ul>
<hr />
<p style="text-align: center; font-size: 18px;">
《<%=pageIndex %>/<%=pageMax %>》 <a>首页</a> <a>上一页</a> <a
href="index.jsp?pageIndex=<%=pageIndex+1 >pageMax?pageMax:pageIndex+1%><%if(id!=null){out.println("&tid="+tid);}%>">下一页</a>
<a>尾页</a>
</p>
(4)最终结果显示