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

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: %@ page language=java contentType=text/html; charset=UTF-8 pageEncoding=UTF-8%!DOCTYPE htmlhtml lang=zh-cn head meta charset=utf-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width, initial-scale=1 title实验楼个人相册/title link href=css/bootstrap.min.css rel=stylesheet !--[if lt IE 9] script src=/html5shiv/3.7.2/html5shiv.min.js/script script src=/respond.js/1.4.2/respond.min.js/script ![endif]-- /head body div class=container div class=row div class=col-xs-12 text-center h2实验楼个人相册/h2 /div /div div class=row div id=alert1 class=alert alert-success fade in text-center col-xs-2 col-xs-offset-5 hide strong注册成功/strong /div /div form id=form class=form-horizontal role=form style=margin-top: 73px; div