1、实验楼官方网站：http:/JavaWeb 结合七牛云存储搭建个人相册一、引言1. 课程概述相信很多人都知道网站一般会有很多图片，对于小型网站来说，图片放在网站服务器上不算什么，但当图片数量很大时，会造成服务器很臃肿，相应地对带宽要求也会提高，这就造成了成本的增加。其实现在已经流行云存储，我们可以把图片、大文件等放到第三方提供的云存储服务上，这会减少一部分成本。这门课程就介绍了JavaWeb 结合七牛云存储来搭建个人相册服务。2. 预备知识掌握 Servlet+JSP，能了解 Bootstrap 更好。二、Just Do It!项目开始前，你需要有一个七牛云存储的标准用户账号，新建一个Buck
2、et，知道你自己的 Access Key 和 Secret Key。实验楼官方网站：http:/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 N
3、ULL,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;实验楼官方网站：http:/2. 创建 JavaWeb 项目这里使用 E
4、clipse 创建一个名称为 Photo 的动态 Web 项目，加入Tomcat 7 服务器，加入所需的 jar 包（源码中包含 jar 包），把 Photo项目部署到 Tomcat 上。3. 编写前端代码前端使用 Bootsrap，把 css、fonts 和 js 文件夹放到 WebContent 目录下。创建 index.jsp:实验楼个人相册实验楼官方网站：http:/实验楼个人相册注册成功用户名实验楼官方网站：http:/密码登录注册 实验楼官方网站：http:/Close用户注册用户名密码实验楼官方网站：http:/重复密码取消注册实验楼官方网站：http:/$(document).
5、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, 密
6、码不能为空, show); else if (data = 3) createPopOver(#username, right, 用户名不存在, show); else if (data = 4) createPopOver(#password, right, 密码错误, show);实验楼官方网站：http:/ else if (data = 5) location.href = $pageContext.request.contextPath + /home.jsp;););$(#register).click(function() $.post($pageContext.request.
7、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 (d
8、ata = 3) 实验楼官方网站：http:/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).v
9、al();$(#myModal).modal(hide);$(#alert1).removeClass(hide);$(#form).css(margin-top, 0px););); function createPopOver(id, placement, content, action) $(id).popover(placement: placement,content: content);实验楼官方网站：http:/$(id).popover(action);$(#username).click(function() $(#username).popover(destroy););$
10、(#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);实验楼官方网站：http:/););创建 home.j
11、sp:$user.username的个人相册实验楼官方网站：http:/$user.username共$imageList.size()张操作上传删除退出“ style=“width: 140px; height: 130px;“ src=“http:/ 实验楼官方网站：http:/“ style=“width: 140px; height: 130px;“ src=“http:/ “ style=“width: 140px; height: 130px;“ src=“http:/ 实验楼官方网站：http:/实验楼官方网站：http:/图片上传名称实验楼官方网站：http:/图片取消上传实验
12、楼官方网站：http:/确定删除吗？取消确定确定退出吗？实验楼官方网站：http:/取消确定$(document).ready(function() /点击图片$(img).click(function() $(#myModalLabel).html($(this).attr(name) + + $(this).attr(date) + );$(#modal-content).html();$(#myModal).modal(show);实验楼官方网站：http:/);$(#upload).click(function() if ($(#image_name).val() = | $(#ima
13、ge).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) l
14、ocation.href = $pageContext.request.contextPath + /index.jsp;););实验楼官方网站：http:/$(#delete).click(function() var ids = “;var urls = “;$(inputtype=checkbox:checked).each(function() ids += $(this).val() + ,;urls += $(this).attr(url) + ,;); $.post($pageContext.request.contextPath + /ImageAction?type=2, i
15、ds: ids,urls: urls,function(data, status) $(#myModa3).modal(hide);location.href = $pageContext.request.contextPath + /home.jsp;);););实验楼官方网站：http:/4. 编写后台代码创建 User 类：* 用户类* author */SuppressWarnings(“serial“)public class User implements Serializable private int id; /用户 IDprivate String username; /用户
16、名private String password; /密码private List images; /图片列表public User() public User(int id, String username, String password, List images) this.id = id;this.username = username;this.password = password;this.images = images;实验楼官方网站：http:/public User(String username, String password) this.username = user
17、name;this.password = password;public User(int id) this.id = id;public List getImages() return images;public void setImages(List images) this.images = images;public int getId() return id;实验楼官方网站：http:/public void setId(int id) this.id = id;public String getUsername() return username;public void setUs
18、ername(String username) this.username = username;public String getPassword() return password;public void setPassword(String password) this.password = password;实验楼官方网站：http:/创建 Image 类：* 图片 类* author */SuppressWarnings(“serial“)public class Image implements Serializable private int id; /图片 IDprivate
19、String name; /图片名private String url; /图片 URLprivate Date date; /上传时间private User user; /所属用户public int getId() return id;public void setId(int id) this.id = id;public String getName() 实验楼官方网站：http:/return name;public void setName(String name) this.name = name;public String getUrl() return url;public
20、 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;实验楼官方网站：http:/创建数据库工具类：* 数据 库工具类* author */public class DBUtils private static Connection connec
21、tion = null;private static PreparedStatement preparedStatement = null;private static ResultSet resultSet = null;static try Class.forName(“com.mysql.jdbc.Driver“); catch (Exception e) e.printStackTrace();实验楼官方网站：http:/ 获取连接* return*/private static Connection getConnection() try connection = DriverMan
22、ager.getConnection(“jdbc:mysql:/localhost:3306/photo?useUnicode=true catch (SQLException e) e.printStackTrace();return connection;/* 关闭连接、 预处理语句和 结果集* param connection* param preparedStatement* param resultSet实验楼官方网站：http:/*/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();
