Java Web 图片管理与分享系统（Struts2+Hibernate+JSP实现）

本示例是使用JavaWeb技术实现一个简单的图片管理与分享系统，其中主要功能如下：

用户分类浏览系统中的图片缩略图
用户查看单张图片的详细信息，图片下载
用户查看一个分类内的所有图片缩略图
用户使用关键字进行模糊搜索
管理员登录
管理员拥有普通用户的所有功能，同时能够实现图片的删除

使用的主要技术有： 

JavaEE、JSP、Struts2、Hibernate、JavaBean

本项目开发环境为：
Intellij IDEA 2016.3
Tomcat 8
JDK 1.8
MySQL 5.5

由于本人水平有限，该工程也只是我一边学习一边开发的一个用于课程作业的项目，所以其中还有很多不完善的地方，难免在某些情况下会有些bug，希望大家能够谅解。其实这个作业做了也过了快一个月了，很久没有更新博客了，所以今天这里记录下来，希望能够给其他同学一个参考和帮助，如果有什么建议或者问题也欢迎在博客下留言~

完整工程下载地址（包含网页截图和数据库建表sql文件）：


http://download.csdn.net/detail/qq_24369113/9848301

简单的界面展示：

1.主页界面index.jsp：





2.图片详情页面item_preview.jsp：





3. 图片分类浏览页面AllcartoonPic.jsp/SearchResult.jsp：





4.图片上传界面contact.jsp：





为了方便大家建立数据库，这里也放上数据库的数据字典截图：



核心代码介绍：

对于主界面显示的index.jsp 主要就是调用Javabean（QueryAllPhoto）来从后台查询数据，然后返回一个ArrayList（person_pic_list），列表里面的每一个元素强制转换成一个PhotoInfoEntity对象之后，就可以取出每张图片的各种信息，主要代码片段如下：
其中index.jsp页面会有三个这种div，每一个div里显示八张该类别的图片的缩略图。其他的div里只是String category更换成相应的值就好了。

<div class="row">
<div class="col-xs-12 col-md-12">
<div class="item_container">
<% String category = "人物图片";
QueryAllPhoto query = new QueryAllPhoto();
ArrayList person_pic_list = query.QueryByExt(category);

%>
<%
for (int i = 0; i < 8 && i < person_pic_list.size(); i++) {
PhotoInfoEntity tem = (PhotoInfoEntity) person_pic_list.get(i);
%>
<!--一张图片的信息===============================================================================================================-->
<div class="item">
<a href="item_preview.jsp?id=<%=tem.getId()%>&dir=<%=tem.getDir()%>&ext=<%=tem.getExt()%>&realName=<%=tem.getRelName()%>&ip=<%=tem.getIp()%>&dt=<%=tem.getDt()%>&info=<%=tem.getInfo()%>"
class="thumbnail">
<img src="<%=tem.getDir()%>" alt="377 blue tech">
<p><%=tem.getRelName()%>
</p>
</a>
</div>
<%
}
%>

</div>
</div>
</div>

每个jsp页面的查询功能是由下面这一小段代码实现：
通过post 方法将keyword信息提交到SearchResult.jsp页面。

<form action="SearchResult.jsp" method="post" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" name="keyword" id="keyword" placeholder="图片查询">
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>

在SearchResult.jsp页面，使用String keyword = request.getParameter("keyword");得到需要查询的图片关键字信息，然后同样调用后台的JavaBean实现查询，并将结果返回到一个ArrayList中。然后和index.jsp一样将一张张的图片显示出来。
核心代码片段如下：

 <div class="row">
                    <div class="col-xs-12 col-md-12">
                        <div class="item_container">
                            <% String keyword = request.getParameter("keyword");
                                QueryAllPhoto query = new QueryAllPhoto();
                                ArrayList pic_list = query.QueryByKeyword(keyword);

                            %>

                            <%
                                if (pic_list.size() == 0) {
                            %>
                            <div class="item">
                                <p><b>查询不到相关的图片，请更换关键字再次尝试。</b></p>
                            </div>
                            <% } else {
                                for (int i = 0; i < pic_list.size(); i++) {
                                    PhotoInfoEntity tem = (PhotoInfoEntity) pic_list.get(i);
                            %>
                           <!-- 一张图片的信息======================================-->
                            <div class="item">
                               <a href="item_preview.jsp?id=<%=tem.getId()%>&dir=<%=tem.getDir()%>&ext=<%=tem.getExt()%>&realName=<%=tem.getRelName()%>&ip=<%=tem.getIp()%>&dt=<%=tem.getDt()%>&info=<%=tem.getInfo()%>"
                                   class="thumbnail">
                                    <img src="<%=tem.getDir()%>" alt="377 blue tech">
                                    <p><%=tem.getRelName()%>
                                    </p>
                                </a>
                            </div>

                            <%
                                    }
                                }
                            %>
                       </div>
                    </div>
</div>

在index.jsp界面点击一张图片的缩略图会自动跳转到该图片的详情页，实现思路是点击图片缩略图之后会自动跳转到item_preview.jsp页面，由于在URL中存储了图片的相关信息，所以在item_preview.jsp页面直接使用request.getparameter()方法就能够得到该图片的各种详细信息。然后在直接显示出来就行。

<a href="item_preview.jsp?id=<%=tem.getId()%>&dir=<%=tem.getDir()%>&ext=<%=tem.getExt()%>&realName=<%=tem.getRelName()%>&ip=<%=tem.getIp()%>&dt=<%=tem.getDt()%>&info=<%=tem.getInfo()%>"

实际上，我的这种实现方式并不科学，我这种相当于在index.jsp页面就已经把一张图片的各种信息都查询出来了，然后只是没有显示出来而已，然后在图片详情页再直接显示出来，这样的话其实在图片数量较多或图片较大的情况下，index.jsp页面的加载将会非常的缓慢。
较科学的实现方式是，在index.jsp页面只查询图片的标签信息、图片编号、图片的存储路径，然后在item_preview.jsp页面根据图片的编号信息再去查询一次数据库得到图片的完整详情。

前台的代码还有一个需要说明的地方就是管理员的登录，使用的是Struts2，框架来实现登录信息的处理的，主要代码片度如下：
form表单中使用post方式将表单信息提交到CheckLogin.action这个action来处理。Struts2框架会捕捉到这个请求并实例化相应的action类来进行相应的处理。

<form method="post" action="CheckLogin.action">
<div class="panel">
<div class="panel-head"><strong>管理员登录</strong></div>
<div class="panel-body" style="padding:30px;">
<div class="form-group">
<div class="field field-icon-right">
<input type="text" class="input" name="admin" placeholder="登录账号"  />
<span class="icon icon-user"></span>
</div>
</div>
<div class="form-group">
<div class="field field-icon-right">
<input type="password" class="input" name="password" placeholder="登录密码" />
<span class="icon icon-key"></span>
</div>
</div>

</div>
<div class="panel-foot text-center">
<button class="button button-block bg-main text-big">立即登录</button>
</div>
</div>
</form>

上传图片的contact.jsp也是使用Struts2框架来捕获上传的图片信息和请求，主要代码如下：
表单通过post方式将表单信息提交到UploadPic这个action进行处理。

<form role="form" enctype="multipart/form-data" method="post" action="UploadPic">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input name="pic_name" type="text" class="form-control" id="pic_name" placeholder="图片名称">
</div>
<div class="form-group">
<select name="pic_ext" type="text" class="form-control" id="pic_ext" placeholder="图片类型">
<option>卡通图片</option>
<option>风景图片</option>
<option>人物图片</option>
</select>
</div>
<div class="form-group">
<input type="file" name="pic_data" id="pic_data" class="form-control"/>
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<textarea name="pic_info" rows="6" class="form-control" id="pic_info" placeholder="图片描述信息..."></textarea><br>
<button type="submit" class="btn btn-primary">确认上传</button>
</div>
</div>
</div>
</form>

下面介绍Struts2的配置文件：
以第一个action为例，name属性是表示这个action的名称为UploadPic（也就是jsp中form表单里填写的那个），
class属性是指定执行该请求的实体类是cn.hncu.Action包下的UploadAction.java这个类，
method属性表示调用UploadAction.java这个类中的ajaxGetImage（）这个方法来具体处理，
result标签表示如果ajaxGetImage（）的返回值是字符串“Successful”那么就跳转到index.jsp，
如果ajaxGetImage（）的返回值是字符串“failed”那么跳转到contact.jsp。

下面的两个action也是以此类推。

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>

<package name="struts2" namespace="/" extends="struts-default">
<action name="UploadPic" class="cn.hncu.Action.UploadAction" method="ajaxGetImage">
<result name="successful">index.jsp</result>
<result name="failed">contact.jsp</result>
</action>

<action name="DeletePic" class="cn.hncu.Action.DeleteAction" method="DeleteImage">
<result name="successful">index.jsp</result>
<result name="failed">item_preview.jsp</result>
</action>

<action name="CheckLogin" class="cn.hncu.Action.CheckLoginAction" method="check">
<result name="successful">index.jsp</result>
<result name="failed">AdminLogin.jsp</result>
</action>
</package>
</struts>

接下来是要实现UPloadAction类和其中的方法：
Struts2框架会自动实例化一个UploadAction对象，然后将jsp表单中的属性使用setter和getter方法封装到这个对象的同名属性中，然后自动调用配置文件中指定的ajaxGetImage（）方法。

package cn.hncu.Action;

import cn.hncu.Dao.PhotoInfoEntity;
import org.apache.struts2.ServletActionContext;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.Transaction;
import org.hibernate.cfg.Configuration;

import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

/**
* Created by 32706 on 2017/4/19.
*/
public class UploadAction {
private File pic_data;//Ajax获取图片文件,与控件type=File中的name属性一样
private String pic_name;//Ajax获取图片文件名称,相应的name属性名称+FileName
private String pic_ext;//图片类别
private String pic_info;//图片描述信息

/**
* -----------相应的get和set方法----------------
**/
public File getPic_data() {
return pic_data;
}

public void setPic_data(File pic_data) {
this.pic_data = pic_data;
}

public String getPic_name() {
return pic_name;
}

public void setPic_name(String pic_name) {
this.pic_name = pic_name;
}

public String getPic_ext() {
return pic_ext;
}

public void setPic_ext(String pic_ext) {
this.pic_ext = pic_ext;
}

public String getPic_info() {
return pic_info;
}

public void setPic_info(String pic_info) {
this.pic_info = pic_info;
}

/**
* 通过Ajax获取图片信息
*
* @return
* @throws IOException
*/
public String ajaxGetImage() throws Exception {

HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/plain");
response.setCharacterEncoding("utf-8");
if (pic_data != null) {
String fileName = pic_data.getName();
String savePath = ServletActionContext.getServletContext().getRealPath("/");

String finalPath = save_pic_on_disk(pic_data, savePath, fileName);
if (finalPath != null)//将图片存储到本地文件
{
if (upload_info_to_database(finalPath, pic_ext, pic_info, "administrator", pic_name))//调用hibernate将数据插入数据库
{
response.getWriter().print("图片上传成功!");//把相应的地址放到前台解析，通过#符号分割
return "successful";
} else {
System.out.println("调用hibernate持久化过程出错");
response.getWriter().print("图片上传失败!====调用hibernate持久化过程出错");
return "failed";
}
} else {
response.getWriter().print("图片上传失败!====保存到本地失败");
return "failed";
}

} else {
System.out.println("图片数据为空=====================");
response.getWriter().print("图片上传失败!");
return "failed";
}

}

private boolean upload_info_to_database(String savePath, String pic_ext, String info, String ip, String pic_name) {
try {
java.util.Date date = new java.util.Date();
DateFormat format = new SimpleDateFormat("yyyy-MM-dd/HH:mm:ss");
String time = format.format(date);//得到完成订单的时间
DateFormat format1 = new SimpleDateFormat("yyyyMMddHHmmss");
String pic_id = format1.format(date) + (int) (Math.random() * 1000);

Configuration conf = new Configuration().configure();
SessionFactory sf = conf.buildSessionFactory();
//Session session = sf.openSession();
Session  session=sf.getCurrentSession();
PhotoInfoEntity photo = new PhotoInfoEntity();
photo.setDir(savePath);
photo.setDt(time);
photo.setExt(pic_ext);
photo.setId(pic_id);
photo.setInfo(info);
photo.setIp(ip);
photo.setRelName(pic_name);

Transaction tran = session.beginTransaction();
session.save(photo);
tran.commit();
session.close();
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}

private String save_pic_on_disk(File data, String savePath, String fileName) {
String rt = "";
java.util.Date date = new java.util.Date();
DateFormat format = new SimpleDateFormat("yyyyMMdd");
String time = format.format(date);//得到完成订单的时间
System.out.println(savePath);
String dir_url = "uploadImage/" + time + "/";
String realFileName=new Date().getTime()+fileName+".jpg";
String realPath=savePath+dir_url+realFileName;

System.out.println("最终保存的文件路径为======" + realPath);

try {

File file = new File(savePath + dir_url);//每天的图片放在一个文件夹里
//如果文件夹不存在则创建
if (!file.exists() && !file.isDirectory()) {
System.out.println(dir_url + "文件夹不存在，新建一个");
file.mkdir();
}

FileOutputStream out=new FileOutputStream(realPath);
FileInputStream in=new FileInputStream(data);
byte[]buffer=new byte[1024];
int len=0;
while((len=in.read(buffer))!=-1){
out.write(buffer,0,len);

}
out.flush();
out.close();
in.close();
return dir_url+realFileName;

} catch (Exception e) {
e.printStackTrace();
System.out.println("保存文件到文件中出错=================Database.save_picture_in_file");
return null;
}
}
public static void main(String arg[]) {
}
}

另外两个Action的实现是类似的，这里限于版面就不在赘述了，大家可以下载完整的工程文件查看。（博客底部和顶部有下载链接）

介绍到这里还有一个前台使用的JavaBean没有介绍到，这个就是QueryAllphoto.java：
其中有两个方法，一个是QueryByExt（）方法，表示根据图片的类别来查询，在图片分类浏览和index.jsp页面会使用到。
第二个方法是QueryByKeyword（），是使用图片标签的关键字来进行查询。

package cn.hncu.Dao;

import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.cfg.Configuration;
import org.hibernate.query.Query;

import java.util.ArrayList;
import java.util.List;

public class QueryAllPhoto {

public  ArrayList QueryByExt(String category) {
ArrayList rt=new ArrayList();
Configuration configuration=new Configuration().configure();
SessionFactory sessionFactory=configuration.buildSessionFactory();
Session session=sessionFactory.openSession();

String hql="from PhotoInfoEntity where ext='"+category+"'";
System.out.println(hql+"========================================================================");

Query query=session.createQuery(hql);
List list=query.list();
for(int i=0;i<list.size();i++)
{
PhotoInfoEntity tem=(PhotoInfoEntity)list.get(i);
rt.add(tem);
}
System.out.println(rt.size()+"大小========================================================================");
return  rt;
}

public  ArrayList QueryByKeyword(String keyword) {
ArrayList rt=new ArrayList();
Configuration configuration=new Configuration().configure();
SessionFactory sessionFactory=configuration.buildSessionFactory();
Session session=sessionFactory.openSession();

String hql="from PhotoInfoEntity where relName  like '%"+keyword+"%'";
System.out.println(hql+"========================================================================");

Query query=session.createQuery(hql);
List list=query.list();
for(int i=0;i<list.size();i++)
{
PhotoInfoEntity tem=(PhotoInfoEntity)list.get(i);
rt.add(tem);
}
System.out.println(rt.size()+"大小========================================================================");
return  rt;
}

public  static  void main(String arg[])
{
QueryAllPhoto q=new QueryAllPhoto();
ArrayList result=q.QueryByExt("风景图片");

System.out.println(result.size());

}

}

在QueryAllPhoto.java中我们调用了Hibernate框架来实现数据的访问和查询等操作，下面就来介绍Hibernate的配置文件hibernate.cfg.xml：

<?xml version='1.0' encoding='utf-8'?>
<!--表明解析本XML文件的DTD文档位置，DTD是Document Type Definition 的缩写,即文档类型的定义,XML解析器使用DTD文档来检查XML文件的合法性。hibernate.sourceforge.net/hibernate-configuration-3.0dtd可以在Hibernate3.1.3软件包中的src\org\hibernate目录中找到此文件-->
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<!--声明Hibernate配置文件的开始-->
<hibernate-configuration>
<!--表明以下的配置是针对session-factory配置的，SessionFactory是Hibernate中的一个类，这个类主要负责保存HIbernate的配置信息，以及对Session的操作-->
<session-factory>
<!--配置数据库的驱动程序，Hibernate在连接数据库时，需要用到数据库的驱动程序-->
<property name="hibernate.connection.driver_class">com.mysql.jdbc.Driver</property>
<!--设置数据库的连接url:jdbc:mysql://localhost/hibernate,其中localhost表示mysql服务器名称，此处为本机，    hibernate是数据库名-->
<property name="hibernate.connection.url">jdbc:mysql://localhost:3306/photo</property>
<!--连接数据库是用户名-->
<property name="connection.username">root</property>
<!--连接数据库是密码-->
<property name="connection.password">root</property>
<!--数据库连接池的大小-->
<property name="hibernate.connection.pool.size">20</property>
<!--是否在后台显示Hibernate用到的SQL语句，开发时设置为true，便于差错，程序运行时可以在Eclipse的控制台显示Hibernate的执行Sql语句。项目部署后可以设置为false，提高运行效率-->
<property name="hibernate.show_sql">true </property>
<!--jdbc.fetch_size是指Hibernate每次从数据库中取出并放到JDBC的Statement中的记录条数。Fetch Size设的越大，读数据库的次数越少，速度越快，Fetch Size越小，读数据库的次数越多，速度越慢-->
<property name="jdbc.fetch_size">50 </property>
<!--jdbc.batch_size是指Hibernate批量插入,删除和更新时每次操作的记录数。Batch Size越大，批量操作的向数据库发送Sql的次数越少，速度就越快，同样耗用内存就越大-->
<property name="jdbc.batch_size">23 </property>
<!--jdbc.use_scrollable_resultset是否允许Hibernate用JDBC的可滚动的结果集。对分页的结果集。对分页时的设置非常有帮助-->
<property name="jdbc.use_scrollable_resultset">false </property>
<!--connection.useUnicode连接数据库时是否使用Unicode编码-->
<property name="Connection.useUnicode">true </property>
<!--connection.characterEncoding连接数据库时数据的传输字符集编码方式，最好设置为gbk，用gb2312有的字符不全-->
<property name="connection.characterEncoding">utf-8</property>

<!--hibernate.dialect 只是Hibernate使用的数据库方言,就是要用Hibernate连接那种类型的数据库服务器。-->
<property name="hibernate.dialect">org.hibernate.dialect.MySQLDialect </property>
<mapping resource="cn/hncu/Dao/PhotoInfoEntity.hbm.xml"/>
<mapping class="cn.hncu.Dao.PhotoInfoEntity"/>
<mapping class="cn.hncu.Dao.AdminEntity"/>
<mapping resource="cn/hncu/Dao/AdminEntity.hbm.xml"/>

</session-factory>
</hibernate-configuration>

为了使Hibernate能够将数据库表和java对象联系起来，我们还需要两个持久化对象类：AdminEntity.java 以及PhotoInfoEntity.java
这两个类在intellij中是可以自动生成的，具体方法可以查看博文：http://blog.csdn.net/u014520745/article/details/51408049
在eclipse等 IDE中的生成方式请自行百度。
这里就简单介绍下AdminEntity.java：
该类中的每一个属性对应数据库表中的一个属性，然后每个属性会有一个setter和getter方法。
PhotoInfoEntity.java也是类似只是属性会多一些。

package cn.hncu.Dao;

import javax.persistence.*;

/**
* Created by 32706 on 2017/4/20.
*/
@Entity
@Table(name = "admin", schema = "photo", catalog = "")
public class AdminEntity {
private String adminName;
private String password;

@Id
@Column(name = "admin_name")
public String getAdminName() {
return adminName;
}

public void setAdminName(String adminName) {
this.adminName = adminName;
}

@Basic
@Column(name = "password")
public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

@Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;

AdminEntity that = (AdminEntity) o;

if (adminName != null ? !adminName.equals(that.adminName) : that.adminName != null) return false;
if (password != null ? !password.equals(that.password) : that.password != null) return false;

return true;
}

@Override
public int hashCode() {
int result = adminName != null ? adminName.hashCode() : 0;
result = 31 * result + (password != null ? password.hashCode() : 0);
return result;
}
}

至此整个工程的一些主要核心代码就已经介绍完了，如果需要工程源文件请访问：
http://download.csdn.net/detail/qq_24369113/9848301

如有错误和纰漏请多多包含，欢迎在下面留言。