结合七牛搭建个人相册
一、实验说明
1. 环境登录
无需密码自动登录，系统用户名shiyanlou，密码shiyanlou
2. 环境介绍
本实验环境采用带桌面的Ubuntu Linux环境，实验中会用到桌面上的程序：
LX终端（LXTerminal）: Linux命令行终端，打开后会进入Bash环境，可以使用Linux命令
Firefox：浏览器，可以用在需要前端界面的课程里，只需要打开环境里写的HTML/JS页面即可
GVim：非常好用的编辑器，最简单的用法可以参考课程Vim编辑器
3. 环境使用
使用GVim编辑器输入实验所需的代码及文件，使用LX终端（LXTerminal）运行所需命令进行操作。
完成实验后可以点击桌面上方的“实验截图”保存并分享实验结果到微博，向好友展示自己的学习进度。实验楼提供后台系统截图，可以真实有效证明您已经完成了实验。
实验记录页面可以在“我的主页”中查看，其中含有每次实验的截图及笔记，以及每次实验的有效学习时间（指的是在实验桌面内操作的时间，如果没有操作，系统会记录为发呆时间）。这些都是您学习的真实性证明。
本课程中的所有源码可以通过以下方式下载:
http://git.shiyanlou.com/shiyanlou/Photo二、引言
1. 课程概述
相信很多人都知道网站一般会有很多图片，对于小型网站来说，图片放在网站服务器上不算什么，但当图片数量很大时，会造成服务器很臃肿，相应地对带宽要求也会提高，这就造成了成本的增加。其实现在已经流行云存储，我们可以把图片、大文件等放到第三方提供的云存储服务上，这会减少一部分成本。这门课程就介绍了JavaWeb结合七牛云存储来搭建个人相册服务。
2. 预备知识
掌握Servlet+JSP，能了解Bootstrap更好。
三、Just Do It!
项目开始前，你需要有一个七牛云存储的标准用户账号，新建一个Bucket，知道你自己的Access Key和Secret Key。
1. 创建数据库
这里我们使用MySQL数据库，创建名称为photo的数据库：
create database photo DEFAULT CHARSET=utf8;
CREATE TABLE `image` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(16) DEFAULT NULL,
`url` varchar(255) DEFAULT NULL,
`date` datetime DEFAULT NULL,
`user_id` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(16) DEFAULT NULL,
`password` varchar(16) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;2. 创建JavaWeb项目
这里使用Eclipse创建一个名称为Photo的动态Web项目，加入Tomcat 7服务器，加入所需的jar包（源码中包含jar包），把Photo项目部署到Tomcat上。
3. 编写前端代码
前端使用Bootsrap，把css、fonts和js文件夹放到WebContent目录下。
创建index.jsp:
<%@ page language='java' contentType='text/html; charset=UTF-8'
pageEncoding='UTF-8'%>
<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>实验楼个人相册</title>
<link href='css/bootstrap.min.css' rel='stylesheet'>
<!--[if lt IE 9]>
<script src='http://labfile.oss.aliyuncs.com/libs/html5shiv/3.7.2/html5shiv.min.js'></script>
<script src='http://labfile.oss.aliyuncs.com/respond.js/1.4.2/respond.min.js'></script>
<![endif]-->
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-xs-12 text-center'>
<h2>实验楼个人相册</h2>
</div>
</div>
<div class='row'>
<div id='alert1' class='alert alert-success fade in text-center col-xs-2 col-xs-offset-5 hide'>
<strong>注册成功</strong>
</div>
</div>
<form id='form' class='form-horizontal' role='form' style='margin-top: 73px;'>
<div class='form-group' >
<label for='username' class='col-xs-2 control-label col-sm-offset-3' >用户名</label>
<div class='col-xs-2'>
<input type='text' class='form-control' id='username' rel='tooltip'/>
</div>
</div>
<div class='form-group'>
<label for='password' class='col-xs-2 control-label col-sm-offset-3'>密码</label>
<div class='col-xs-2'>
<input type='password' class='form-control' id='password'/>
</div>
</div>
<div class='form-group'>
<div class='col-sm-offset-5 col-xs-1'>
<button type='button' class='btn btn-success' id='login'>登录</button>
</div>
<div class='col-sm-1'>
<button type='button' class='btn btn-danger' data-toggle='modal' data-target='#myModal'>注册</button>
</div>
</div>
</form>
</div>
<!-- 注册对话框 begin -->
<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>&times;</span><span class='sr-only'>Close</span></button>
<h4 class='modal-title' id='myModalLabel'>用户注册</h4>
</div>
<div class='modal-body'>
<form class='form-horizontal' role='form'>
<div class='form-group' >
<label for='reg_username' class='col-xs-2 control-label' >用户名</label>
<div class='col-xs-4'>
<input type='text' class='form-control' id='reg_username'/>
</div>
</div>
<div class='form-group'>
<label for='reg_password' class='col-xs-2 control-label'>密码</label>
<div class='col-xs-4'>
<input type='password' class='form-control' id='reg_password'/>
</div>
</div>
<div class='form-group'>
<label for='reg_repassword' class='col-xs-2 control-label'>重复密码</label>
<div class='col-xs-4'>
<input type='password' class='form-control' id='reg_repassword'/>
</div>
</div>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>取消</button>
<button type='button' class='btn btn-primary' id='register'>注册</button>
</div>
</div>
</div>
</div>
<!-- 注册对话框 end -->
<script src='http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
//点击登录
$('#login').click(function() {
//提交登录表单
$.post('${pageContext.request.contextPath}' + '/UserAction?type=1',
{
username: $('#username').val(),
password: $('#password').val()
},
function(data, status) {
if (data == '1') {
createPopOver('#username', 'right', '用户名不能为空', 'show');
} else if (data == '2') {
createPopOver('#password', 'right', '密码不能为空', 'show');
} else if (data == '3') {
createPopOver('#username', 'right', '用户名不存在', 'show');
} else if (data == '4') {
createPopOver('#password', 'right', '密码错误', 'show');
} else if (data == 5) {
location.href = '${pageContext.request.contextPath}' + '/home.jsp';
}
});
});
//点击注册按钮
$('#register').click(function() {
//提交注册表单
$.post('${pageContext.request.contextPath}' + '/UserAction?type=2',
{
username: $('#reg_username').val(),
password: $('#reg_password').val(),
repassword: $('#reg_repassword').val()
},
function(data, status) {
if (data == '1') {
createPopOver('#reg_username', 'right', '不能为空', 'show');
} else if (data == '2') {
createPopOver('#reg_password', 'right', '不能为空', 'show');
} else if (data == '3') {
createPopOver('#reg_repassword', 'right', '不能为空', 'show');
} else if (data == '4') {
createPopOver('#reg_repassword', 'right', '密码不一致', 'show');
} else if (data == '5') {
createPopOver('#reg_username', 'right', '用户名已存在', 'show');
} else if (data == '6') {
$('#reg_username').val('');
$('#reg_password').val('');
$('#reg_repassword').val('');
$('#myModal').modal('hide');
$('#alert1').removeClass('hide');
$('#form').css('margin-top', '0px');
}
});
});
//显示弹出框
function createPopOver(id, placement, content, action) {
$(id).popover({
placement: placement,
content: content
});
$(id).popover(action);
}
//点击输入框时销毁弹出框
$('#username').click(function() {
$('#username').popover('destroy');
});
$('#password').click(function() {
$('#password').popover('destroy');
});
$('#reg_username').click(function() {
$('#reg_username').popover('destroy');
});
$('#reg_password').click(function() {
$('#reg_password').popover('destroy');
});
$('#reg_repassword').click(function() {
$('#reg_repassword').popover('destroy');
});
});
</script>
</body>
</html>创建home.jsp:
<%@ page language='java' contentType='text/html; charset=UTF-8'
pageEncoding='UTF-8'%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %>
<%@ taglib prefix='fmt' uri='http://java.sun.com/jsp/jstl/fmt' %>
<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>${user.username}的个人相册</title>
<link href='css/bootstrap.min.css' rel='stylesheet'>
<!--[if lt IE 9]>
<script src='http://labfile.oss.aliyuncs.com/libs/html5shiv/3.7.2/html5shiv.min.js'></script>
<script src='http://labfile.oss.aliyuncs.com/respond.js/1.4.2/respond.min.js'></script>
<![endif]-->
</head>
<body>
<div class='container'>
<!-- 首部 start -->
<div class='row'>
<div class='col-xs-8 col-xs-offset-2'>
<h3 class='page-header'>
${user.username}&nbsp;&nbsp;&nbsp;<small>共<span class='badge'>${imageList.size()}</span>张</small>
<div class='btn-group pull-right'>
<button type='button' class='btn btn-primary dropdown-toggle' data-toggle='dropdown'>
操作<span class='caret'></span>
</button>
<ul class='dropdown-menu' role='menu'>
<li><a href='#' data-toggle='modal' data-target='#myModa2'>上传</a></li>
<li><a href='#' data-toggle='modal' data-target='#myModa3'>删除</a></li>
<li><a href='#' data-toggle='modal' data-target='#myModa4'>退出</a></li>
</ul>
</div>
</h3>
</div>
</div>
<!-- 首部 end -->
<!-- 显示图片列表 -->
<c:forEach items='${imageList}' varStatus='status' var='image'>
<c:choose>
<c:when test='${status.first or status.index % 4 eq 0}'>
<div class='row'>
<div class='col-xs-2 col-xs-offset-2'>
<a href='#' class='thumbnail text-center'>
<img name='${image.name}' date='<fmt:formatDate value='${image.date}' pattern='yyyy-MM-dd HH:mm'/>' style='width: 140px; height: 130px;' src='http://shiyanlouphoto.qiniudn.com/${image.url}'>
<input class='pull-left' type='checkbox' value='${image.id}' url='${image.url}'/>${image.name }
</a>
</div>
</c:when>
<c:when test='${status.index % 4 eq 3 and not status.last }'>
<div class='col-xs-2'>
<a href='#' class='thumbnail text-center'>
<img name='${image.name}' date='<fmt:formatDate value='${image.date}' pattern='yyyy-MM-dd HH:mm'/>' style='width: 140px; height: 130px;' src='http://shiyanlouphoto.qiniudn.com/${image.url}'>
<input class='pull-left' type='checkbox' value='${image.id}' url='${image.url}' />${image.name }
</a>
</div>
</div>
</c:when>
<c:otherwise>
<div class='col-xs-2'>
<a href='#' class='thumbnail text-center'>
<img name='${image.name}' date='<fmt:formatDate value='${image.date}' pattern='yyyy-MM-dd HH:mm'/>' style='width: 140px; height: 130px;' src='http://shiyanlouphoto.qiniudn.com/${image.url}'>
<input class='pull-left' type='checkbox' value='${image.id}' url='${image.url}'/>${image.name }
</a>
</div>
</c:otherwise>
</c:choose>
<c:if test='${status.last}'>
</div>
</c:if>
</c:forEach>
<!-- 显示图片列表 end -->
</div>
<!-- 显示图片对话框 start -->
<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
<h4 class='modal-title' id='myModalLabel'></h4>
</div>
<div class='modal-body' id='modal-content'>
</div>
</div>
</div>
</div>
<!-- 显示图片对话框 end -->
<!-- 上传图片对话框 start -->
<div class='modal fade' id='myModa2' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<h4 class='modal-title' id='myModalLabe2'>图片上传</h4>
</div>
<div class='modal-body'>
<form class='form-horizontal' role='form' id='form'>
<div class='form-group' >
<label for='image_name' class='col-xs-2 control-label' >名称</label>
<div class='col-xs-4'>
<input type='text' class='form-control' id='image_name' name='image_name'/>
</div>
</div>
<div class='form-group'>
<label for='image' class='col-xs-2 control-label'>图片</label>
<div class='col-xs-4'>
<input type='file' id='image' name='image'/>
</div>
</div>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>取消</button>
<button type='button' class='btn btn-primary' id='upload'>上传</button>
</div>
</div>
</div>
</div>
<!-- 上传图片对话框 end -->
<!-- 删除图片对话框 start -->
<div class='modal fade' id='myModa3' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<h4 class='modal-title' id='myModalLabe3'>确定删除吗？</h4>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>取消</button>
<button type='button' class='btn btn-danger' id='delete'>确定</button>
</div>
</div>
</div>
</div>
<!-- 删除图片对话框 end -->
<!-- 退出对话框 start -->
<div class='modal fade' id='myModa4' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<h4 class='modal-title' id='myModalLabe4'>确定退出吗？</h4>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>取消</button>
<button type='button' class='btn btn-danger' id='exit'>确定</button>
</div>
</div>
</div>
</div>
<!-- 退出对话框 end -->
<script src='http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
//点击图片
$('img').click(function() {
$('#myModalLabel').html($(this).attr('name') + '&nbsp;&nbsp;&nbsp;<small>' + $(this).attr('date') + '</small>');
$('#modal-content').html('<img class=\'img-responsive\' src=\'' + $(this).attr('src') + '\'/>');
$('#myModal').modal('show');
});
//点击上传
$('#upload').click(function() {
if ($('#image_name').val() == '' || $('#image').val() == '') {
} else {
$('#form').attr('action', '${pageContext.request.contextPath}' + '/ImageAction?type=1');
$('#form').attr('enctype', 'multipart/form-data');
$('#form').attr('method', 'post');
$('#form').submit();
}
});
//点击确定退出
$('#exit').click(function() {
$.get('${pageContext.request.contextPath}' + '/UserAction?type=3', function(data, status) {
location.href = '${pageContext.request.contextPath}' + '/index.jsp';
});
});
//点击确定删除图片
$('#delete').click(function() {
var ids = '';
var urls = '';
$('input[type=checkbox]:checked').each(function() {
ids += $(this).val() + ',';
urls += $(this).attr('url') + ',';
});
$.post('${pageContext.request.contextPath}' + '/ImageAction?type=2', {
ids: ids,
urls: urls
},function(data, status) {
$('#myModa3').modal('hide');
location.href = '${pageContext.request.contextPath}' + '/home.jsp';
});
});
});
</script>
</body>
</html>4. 编写后台代码
创建User类：
package com.shiyanlou.photo.domain;
import java.io.Serializable;
import java.util.List;
/**
* 用户类
* @author www.shiyanlou.com
*
*/
@SuppressWarnings('serial')
public class User implements Serializable {
private int id; //用户ID
private String username; //用户名
private String password; //密码
private List<Image> images; //图片列表
public User() {
}
public User(int id, String username, String password, List<Image> images) {
this.id = id;
this.username = username;
this.password = password;
this.images = images;
}
public User(String username, String password) {
this.username = username;
this.password = password;
}
public User(int id) {
this.id = id;
}
public List<Image> getImages() {
return images;
}
public void setImages(List<Image> images) {
this.images = images;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}创建Image类：
package com.shiyanlou.photo.domain;
import java.io.Serializable;
import java.util.Date;
/**
* 图片类
* @author www.shiyanlou.com
*
*/
@SuppressWarnings('serial')
public class Image implements Serializable {
private int id; //图片ID
private String name; //图片名
private String url; //图片URL
private Date date; //上传时间
private User user; //所属用户
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
}创建数据库工具类：
package com.shiyanlou.photo.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
/**
* 数据库工具类
* @author www.shiyanlou.com
*
*/
public class DBUtils {
private static Connection connection = null;
private static PreparedStatement preparedStatement = null;
private static ResultSet resultSet = null;
//初始化
static {
try {
Class.forName('com.mysql.jdbc.Driver');
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 获取连接
* @return
*/
private static Connection getConnection() {
try {
connection = DriverManager.getConnection(#34;jdbc:mysql://localhost:3306/photo?useUnicode=true&characterEncoding=UTF-8', 'root', 'root');
} catch (SQLException e) {
e.printStackTrace();
}
return connection;
}
/**
* 关闭连接、预处理语句和结果集
* @param connection
* @param preparedStatement
* @param resultSet
*/
private static void close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet) {
try {
if (resultSet != null) {
resultSet.close();
resultSet = null;
}
if (preparedStatement != null) {
preparedStatement.close();
preparedStatement = null;
}
if (connection != null) {
connection.close();
connection = null;
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 查询数据库
* @param sql SQL语句
* @param parameters 参数
* @return
*/
public static ArrayList<Object[]> query(String sql, String[] parameters) {
ArrayList<Object[]> list = new ArrayList<Object[]>();
try {
connection = getConnection();
preparedStatement = connection.prepareStatement(sql);
for (int i = 0; i < parameters.length; i++) {
preparedStatement.setString(i + 1, parameters[i]);
}
resultSet = preparedStatement.executeQuery();
int columnCount = resultSet.getMetaData().getColumnCount();
while (resultSet.next()) {
Object[] objects = new Object[columnCount];
for (int i = 0; i < columnCount; i++) {
objects[i] = resultSet.getObject(i + 1);
}
list.add(objects);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
close(connection, preparedStatement, resultSet);
}
return list;
}
/**
* 更新数据库
* @param sqls SQL语句数组
* @param parameters 参数数组
*/
public static void updates(String[] sqls, String[][] parameters) {
try {
connection = getConnection();
connection.setAutoCommit(false);
for (int i = 0; i < sqls.length; i++) {
preparedStatement = connection.prepareStatement(sqls[i]);
for (int j = 0; j < parameters[i].length; j++) {
preparedStatement.setString(j + 1, parameters[i][j]);
}
preparedStatement.executeUpdate();
}
connection.commit();
} catch (Exception e) {
try {
connection.rollback();
} catch (SQLException e1) {
e1.printStackTrace();
}
e.printStackTrace();
} finally {
close(connection, preparedStatement, resultSet);
}
}
}创建文件工具类（使用了七牛云存储服务）：
package com.shiyanlou.photo.util;
import java.io.InputStream;
import org.json.JSONException;
import com.qiniu.api.auth.AuthException;
import com.qiniu.api.auth.digest.Mac;
import com.qiniu.api.io.IoApi;
import com.qiniu.api.rs.PutPolicy;
import com.qiniu.api.rs.RSClient;
/**
* 图片工具类（使用七牛云存储服务）
* @author www.shiyanlou.com
*
*/
public class FileUtils {
private static final String ACCESS_KEY = '你自己的Access Key';
private static final String SECRET_KEY = '你自己的Secret Key';
private static final String BUCKET_NAME = '创建的Bucket的名称';
/**
* 上传图片到七牛云存储
* @param reader
* @param fileName
*/
public static void upload(InputStream reader, String fileName) {
String uptoken;
try {
Mac mac = new Mac(ACCESS_KEY, SECRET_KEY);
PutPolicy putPolicy = new PutPolicy(BUCKET_NAME);
uptoken = putPolicy.token(mac);
IoApi.Put(uptoken, fileName, reader, null);
} catch (AuthException e) {
e.printStackTrace();
} catch (JSONException e) {
e.printStackTrace();
}
}
/**
* 删除七牛云存储上的图片
* @param key
*/
public static void delete( String key) {
Mac mac = new Mac(ACCESS_KEY, SECRET_KEY);
RSClient client = new RSClient(mac);
client.delete(BUCKET_NAME, key);
}
}创建用户服务类：
package com.shiyanlou.photo.service;
import java.util.List;
import com.shiyanlou.photo.domain.User;
import com.shiyanlou.photo.util.DBUtils;
/**
* 用户服务类
* @author www.shiyanlou.com
*
*/
public class UserService {
/**
* 通过用户名获取用户
* @param username 用户名
* @return 用户
*/
public User getUserByUsername(String username) {
String sql = 'select id, username, password from user where username = ?';
String[] parameters = {username};
List<Object[]> users = DBUtils.query(sql, parameters);
if (users.size() == 0) {
return null;
} else {
Object[] objects = users.get(0);
return objects == null ? null : new User(Integer.parseInt(objects[0].toString()), objects[1].toString(), objects[2].toString(), null);
}
}
/**
* 添加用户
* @param user 用户
*/
public void addUser(User user) {
String[] sqls = {'insert into user(username, password) values(?, ?)'};
String[][] parameters = {{user.getUsername(), user.getPassword()}};
DBUtils.updates(sqls, parameters);
}
}创建图片服务类：
package com.shiyanlou.photo.service;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import com.shiyanlou.photo.domain.Image;
import com.shiyanlou.photo.domain.User;
import com.shiyanlou.photo.util.DBUtils;
import com.shiyanlou.photo.util.FileUtils;
/**
* 图片服务类
* @author www.shiyanlou.com
*
*/
public class ImageService {
/**
* 通过用户ID获取图片列表
* @param userId 用户ID
* @return 图片列表
*/
public ArrayList<Image> getByUserId(int userId) {
ArrayList<Image> images = new ArrayList<Image>();
String sql = 'select id, name, url, date, user_id from image where user_id = ? order by date desc';
String[] parameters = {userId + ''};
List<Object[]> imageList = DBUtils.query(sql, parameters);
for (Object[] objects : imageList) {
Image image = new Image();
image.setId(Integer.parseInt(objects[0].toString()));
image.setName(objects[1].toString());
image.setUrl(objects[2].toString());
image.setDate((Date) objects[3]);
image.setUser(new User(Integer.parseInt(objects[4].toString())));
images.add(image);
}
return images;
}
/**
* 上传图片
* @param image 图片
* @param inputStream 输入流
*/
public void addImage(Image image, InputStream inputStream) {
FileUtils.upload(inputStream, image.getUrl());
String[] sqls = {'insert into image(name, url, date, user_id) values(?, ?, ?, ?)'};
String[][] parameters = {{image.getName(), image.getUrl(), new SimpleDateFormat('yyyy-MM-dd HH:mm').format(image.getDate()), image.getUser().getId() + ''}};
DBUtils.updates(sqls, parameters);
}
/**
* 通过图片ID数组和图片URL数组删除图片
* @param ids 图片ID数组
* @param urls 图片URL数组
*/
public void delByIdsAndUrls(String ids, String urls) {
String[] idArray = ids.split(',');
String[] urlArray = urls.split(',');
if (!''.equals(idArray[0]) && !''.equals(urlArray[0])) {
String[] sqls = new String[idArray.length];
String[][] parameters = new String[idArray.length][1];
for (int i = 0; i < idArray.length; i++) {
FileUtils.delete(urlArray[i]);
sqls[i] = 'delete from image where id = ?';
parameters[i][0] = idArray[i];
}
DBUtils.updates(sqls, parameters);
}
}
}创建用户控制器类：
package com.shiyanlou.photo.action;
import java.io.IOException;
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 com.shiyanlou.photo.domain.User;
import com.shiyanlou.photo.service.ImageService;
import com.shiyanlou.photo.service.UserService;
/**
* 用户控制器
* @author www.shiyanlou.com
*
*/
@WebServlet(value = '/UserAction')
public class UserAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding('UTF-8');
response.setCharacterEncoding('Utf-8');
response.setContentType('text/html;charset=UTF-8');
PrintWriter out = response.getWriter();
UserService userService = new UserService();
ImageService imageService = new ImageService();
Integer type = Integer.valueOf(request.getParameter('type'));
if (type == 1) { //用户登录
String username = request.getParameter('username');
String password = request.getParameter('password');
String result = null;
User user = null;
//验证用户是否有效
if (username.isEmpty()) {
result = '1';
} else if (password.isEmpty()) {
result = '2';
} else if ((user = userService.getUserByUsername(username)) == null) {
result = '3';
} else {
if (!user.getPassword().equals(password)) {
result = '4';
} else {
request.getSession().setAttribute('user', user);
request.getSession().setAttribute('imageList', imageService.getByUserId(user.getId()));
result = '5';
}
}
out.print(result);
} else if (type == 2) { //用户注册
String username = request.getParameter('username');
String password = request.getParameter('password');
String repassword = request.getParameter('repassword');
String result = null;
//验证有效性
if (username.isEmpty()) {
result = '1';
} else if (password.isEmpty()) {
result = '2';
} else if (repassword.isEmpty()) {
result = '3';
} else if (!repassword.equals(password)) {
result = '4';
} else if (userService.getUserByUsername(username) != null) {
result = '5';
} else {
User user = new User(username, password);
//添加用户
userService.addUser(user);
result = '6';
}
out.print(result);
} else if (type == 3) { //用户退出
request.getSession().invalidate();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}创建图片控制器类：
package com.shiyanlou.photo.action;
import java.io.IOException;
import java.util.Date;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
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 com.shiyanlou.photo.domain.Image;
import com.shiyanlou.photo.domain.User;
import com.shiyanlou.photo.service.ImageService;
/**
* 图片控制器
* @author www.shiyanlou.com
*
*/
@WebServlet(value = '/ImageAction')
@MultipartConfig
public class ImageAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding('utf-8');
response.setCharacterEncoding('utf-8');
response.setContentType('text/html;charset=utf-8');
Integer type = Integer.valueOf(request.getParameter('type'));
ImageService imageService = new ImageService();
if (type == 1) { //上传图片
String imageName = request.getParameter('image_name');
Part image = request.getPart('image');
Image img = new Image();
img.setDate(new Date());
img.setName(imageName);
img.setUser((User) request.getSession().getAttribute('user'));
img.setUrl(img.getUser().getUsername() + '/' + UUID.randomUUID());
imageService.addImage(img, image.getInputStream());
request.getSession().setAttribute('imageList', imageService.getByUserId(img.getUser().getId()));
response.sendRedirect(request.getContextPath() + '/home.jsp');
} else if (type == 2) { //删除图片
String ids = request.getParameter('ids');
String urls = request.getParameter('urls');
imageService.delByIdsAndUrls(ids, urls);
request.getSession().setAttribute('imageList', imageService.getByUserId(((User) request.getSession().getAttribute('user')).getId()));
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}5. 发布
把Photo部署到Tomcat上，启动服务器，访问http://127.0.0.1:8080/Photo
6.项目截图
图片1
图片2
图片3
图片4
图片5
图片6
图片7
图片8
图片9
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
