本文主要是介绍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:
${user.username}的个人相册这篇关于java 个人存储服务_JavaWeb结合七牛云存储搭建个人相册服务的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
