JavaWeb结合七牛云存储搭建个人相册服务.docVIP

实验楼官方网站：JavaWeb结合七牛云存储搭建个人相册一、引言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: 实验楼个人相册 实验楼个人相册 注册成功 用户名 密码 登录 注册 ×Close 用户注册 用户名 密码 重复密码 取消 注册 $(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); ); ); 创建home.jsp: $user.username的个人相册 $user.username   共$imageList.size()张 操作 上传 删除 退出 img name=$ date= style=width: 140px; height: 130px; src=/$image.url $ img name=$ date= style=width: 140px; height: 130px; src=/$image.url $ img name=$ date= style=width: 140px; height: 130px; src=/$image.url $ × 图片上传 名称 图片 取消 上传 确定删除吗？ 取消 确定 确定退出吗？ 取消 确定 $(document).ready(function() /点击图片 $(img).click(function() $(#myModalLabel).html($(this).attr(name) +     + $(this).attr(date) + ); $(#modal-content).html(); $(#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 = ; $(inputtype=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; ); ); ); 4. 编写后台代码创建User类： * 用户类 * author * */SuppressWarnings(serial)public class User implements Serializable private int id; /用户ID private String username; /用户名 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; public User(String username, String password) this.username = username; 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; 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类： * 图片类 * author * */SuppressWarnings(serial)public class Image implements Serializable private int id; /图片ID p