《JavaWeb结合七牛云存储搭建个人相册服务》由会员分享，可在线阅读，更多相关《JavaWeb结合七牛云存储搭建个人相册服务（51页珍藏版）》请在金锄头文库上搜索。
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:/$(doc
5、ument).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, r
6、ight, 密码不能为空, 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.r
7、equest.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); els
8、e if (data = 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_repass
9、word).val();$(#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(destr
10、oy););$(#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:/););创建
11、 home.jsp:$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() = | $(#i
13、mage).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;););实验楼官方网站：http:/www.shiyan
