java 个人存储服务_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:

$('#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: