结合七牛搭建个人相册-实验楼
2016-12-16 17:47
323 查看
实验准备:
环境准备JDK1.7(java开发环境)
Mysql 5.5+sqlyog
tomcat 7.0
涉及知识(只需要看的懂)
Java
JSP
Servlet
Mysql
JS(框架)
七牛云存储准备
七牛云存储是一个免费的云端数据存储网站(类似于百度云,可以提供数据外部访问的拦截),这里用于对项目图片的管理和存储
步骤:注册登录,创建名为shiyanlouphoto 的空间(即 bucket )
数据库搭建
创建一个数据库database,命名为shiyanloudb,数据库登录密码为mysql安装密码,设置为root-root; 创建数据库表,数据库就两个表,分别为用户表user,和图片表image;
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;
创建Javaweb项目
4.1 直接创建动态项目
加入依赖包:
下载所以来的jar包:
地址:jar包
将解压好的 Jar 包复制到项目的 WebContext ,下面的 WEB-INF 的 lib 。
4.2 Bootstrap准备(js框架,直接使用)
前端使用 Bootstrap ,实验楼已把 Bootstrap 所需的 css、fonts 和 js 文件打包压缩,我们只需要获取并解压,然后放到 WebContent 目录下。 解压并将三个文件夹拷贝到 eclipse 中项目的 WebContent 目录下。
下载链接
4.3 前台页面编写
前端页面利用JSP呈现出来(将后端数据解析为前段页面呈现出快来,其他前端效果有js框架实现)前段有两个页面,一个是登录注册页面index.jsp,另一个是业务交互界面home.jsp。
index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html 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>ShiyanlouPhoto</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="http://labfile.oss.aliyuncs.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://labfile.oss.aliyuncs.com/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>ShiyanlouPhoto</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>RegisterSuccess</strong> </div> </div> <form id="form" class="form-horizontal" role="form" style="margin-top: 73px;"> <div class="form-group" > <label for="username" class="col-xs-2 control-label col-sm-offset-3" >Username</label> <div class="col-xs-2"> <input type="text" class="form-control" id="username" rel="tooltip"/> </div> </div> <div class="form-group"> <label for="password" class="col-xs-2 control-label col-sm-offset-3">Password</label> <div class="col-xs-2"> <input type="password" class="form-control" id="password"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-5 col-xs-1"> <button type="button" class="btn btn-success" id="login">Login</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Register</button> </div> </div> </form> </div> <!-- 注册对话框 begin --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">UserRegister</h4> </div> <div class="modal-body"> <form class="form-horizontal" role="form"> <div class="form-group" > <label for="reg_username" class="col-xs-2 control-label" >Username</label> <div class="col-xs-4"> <input type="text" class="form-control" id="reg_username"/> </div> </div> <div class="form-group"> <label for="reg_password" class="col-xs-2 control-label">Password</label> <div class="col-xs-4"> <input type="password" class="form-control" id="reg_password"/> </div> </div> <div class="form-group"> <label for="reg_repassword" class="col-xs-2 control-label">Reinput</label> <div class="col-xs-4"> <input type="password" class="form-control" id="reg_repassword"/> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" id="register">Register</button> </div> </div> </div> </div> <!-- 注册对话框 end --> <script src="http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(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', 'Username can not be empty ', 'show'); } else if (data == '2') { createPopOver('#password', 'right', ' password can not be empty', 'show'); } else if (data == '3') { createPopOver('#username', 'right', ' Username does not exist', 'show'); } else if (data == '4') { createPopOver('#password', 'right', ' wrong password', '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', 'not null', 'show'); } else if (data == '2') { createPopOver('#reg_password', 'right', 'not null', 'show'); } else if (data == '3') { createPopOver('#reg_repassword', 'right', 'not null', 'show'); } else if (data == '4') { createPopOver('#reg_repassword', 'right', 'Passwords do not match', 'show'); } else if (data == '5') { createPopOver('#reg_username', 'right', 'Username already exists', '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'); }); }); </script> </body> </html>
home.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <!DOCTYPE html> <html 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>${user.username}Photo</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="http://labfile.oss.aliyuncs.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://labfile.oss.aliyuncs.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <!-- 首部 start --> <div class="row"> <div class="col-xs-8 col-xs-offset-2"> <h3 class="page-header"> ${user.username} <small>Totals:<span class="badge">${imageList.size()}</span></small> <div class="btn-group pull-right"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> options<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#" data-toggle="modal" data-target="#myModa2">Upload</a></li> <li><a href="#" data-toggle="modal" data-target="#myModa3">Delete</a></li> <li><a href="#" data-toggle="modal" data-target="#myModa4">Exit</a></li> </ul> </div> </h3> </div> </div> <!-- 首部 end --> <!-- 显示图片列表 --> <c:forEach items="${imageList}" varStatus="status" var="image"> <c:choose> <c:when test="${status.first or status.index % 4 eq 0}"> <div class="row"> <div class="col-xs-2 col-xs-offset-2"> <a href="#" class="thumbnail text-center"> <img name="${image.name}" date="<fmt:formatDate value='${image.date}' pattern='yyyy-MM-dd HH:mm'/>" style="width: 140px; height: 130px;" src="http:///oi9fwvy25.bkt.clouddn.com/${image.url}"><!--这里请填写自己的链接地址,详见下图--> <input class="pull-left" type="checkbox" value="${image.id}" url="${image.url}"/>${image.name } </a> </div> </c:when> <c:when test="${status.index % 4 eq 3 and not status.last }"> <div class="col-xs-2"> <a href="#" class="thumbnail text-center"> <img name="${image.name}" date="<fmt:formatDate value='${image.date}' pattern='yyyy-MM-dd HH:mm'/>" style="width: 140px; height: 130px;" src="http://oi9fwvy25.bkt.clouddn.com/${image.url}"><!--这里请填写自己的链接地址,详见下图--> <input class="pull-left" type="checkbox" value="${image.id}" url="${image.url}" />${image.name } </a> </div> </div> </c:when> <c:otherwise> <div class="col-xs-2"> <a href="#" class="thumbnail text-center"> <img name="${image.name}" date="<fmt:formatDate value='${image.date}' pattern='yyyy-MM-dd HH:mm'/>" style="width: 140px; height: 130px;" src="http:///oi9fwvy25.bkt.clouddn.com/${image.url}"><!--这里请填写自己的链接地址,详见下图--> <input class="pull-left" type="checkbox" value="${image.id}" url="${image.url}"/>${image.name } </a> </div> </c:otherwise> </c:choose> <c:if test="${status.last}"> </div> </c:if> </c:forEach> <!-- 显示图片列表 end --> </div> <!-- 显示图片对话框 start --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel"></h4> </div> <div class="modal-body" id="modal-content"> </div> </div> </div> </div> <!-- 显示图片对话框 end --> <!-- 上传图片对话框 start --> <div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabe2">Image Upload</h4> </div> <div class="modal-body"> <form class="form-horizontal" role="form" id="form"> <div class="form-group" > <label for="image_name" class="col-xs-2 control-label" >Title</label> <div class="col-xs-4"> <input type="text" class="form-control" id="image_name" name="image_name"/> </div> </div> <div class="form-group"> <label for="image" class="col-xs-2 control-label">Image</label> <div class="col-xs-4"> <input type="file" id="image" name="image"/> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" id="upload">Upload</button> </div> </div> </div> </div> <!-- 上传图片对话框 end --> <!-- 删除图片对话框 start --> <div class="modal fade" id="myModa3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabe3">confirm to delete?</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger" id="delete">Confirm</button> </div> </div> </div> </div> <!-- 删除图片对话框 end --> <!-- 退出对话框 start --> <div class="modal fade" id="myModa4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabe4">confirm to exit?</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger" id="exit">Confirm</button> </div> </div> </div> </div> <!-- 退出对话框 end --> <script src="http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //点击图片 $('img').click(function() { $('#myModalLabel').html($(this).attr('name') + ' <small>' + $(this).attr('date') + '</small>'); $('#modal-content').html('<img class=\'img-responsive\' src=\'' + $(this).attr('src') + '\'/>'); $('#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 = ""; $('input[type=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'; }); }); }); </script> </body> </html>
4.4 后台代码
1.实例类(User和Image)User
package com.shiyanlou.photo.domain; import java.awt.Image; import java.io.Serializable; import java.util.List; /** * 用户类 * @author www.shiyanlou.com * */ @SuppressWarnings("serial") public class User implements Serializable { private int id; //用户ID private String username; //用户名 private String password; //密码 private List<Image> images; //图片列表 public User() { } public User(int id, String username, String password, List<Image> 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<Image> getImages() { return images; } public void setImages(List<Image> 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类
package com.shiyanlou.photo.domain; import java.io.Serializable; import java.util.Date; /** * 图片类 * @author www.shiyanlou.com * */ @SuppressWarnings("serial") public class Image implements Serializable { private int id; //图片ID private String name; //图片名 private String url; //图片URL private Date date; //上传时间 private User user; //所属用户 public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public Date getDate() { return date; } public void setDate(Date date) { this.date = date; } public User getUser() { return user; } public void setUser(User user) { this.user = user; } }
2.数据库工具类(用于业务逻辑和数据库相连接–将数据写入数据库)
DBUtils类(写入本地mysql数据库)
package com.shiyanlou.photo.util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; /** * 数据库工具类 * @author www.shiyanlou.com * */ public class DBUtils { private static Connection connection = null; private static PreparedStatement preparedStatement = null; private static ResultSet resultSet = null; //初始化 static { try { Class.forName("com.mysql.jdbc.Driver"); } catch (Exception e) { e.printStackTrace(); } } /** * 获取连接 * @return */ private static Connection getConnection() { try { connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/shiyanloudb?useUnicode=true&characterEncoding=UTF-8", "root", "root");//将数据库名字修改为自己的数据库,root 为账户名,本实验环境 mysql 密码为空 } catch (SQLException e) { e.printStackTrace(); } return connection; } /** * 关闭连接、预处理语句和结果集 * @param connection * @param preparedStatement * @param resultSet */ private static void close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet) { try { if (resultSet != null) { resultSet.close(); resultSet = null; } if (preparedStatement != null) { preparedStatement.close(); preparedStatement = null; } if (connection != null) { connection.close(); connection = null; } } catch (Exception e) { e.printStackTrace(); } } /** * 查询数据库 * @param sql SQL语句 * @param parameters 参数 * @return */ public static ArrayList<Object[]> query(String sql, String[] parameters) { ArrayList<Object[]> list = new ArrayList<Object[]>(); try { connection = getConnection(); preparedStatement = connection.prepareStatement(sql); for (int i = 0; i < parameters.length; i++) { preparedStatement.setString(i + 1, parameters[i]); } resultSet = preparedStatement.executeQuery(); int columnCount = resultSet.getMetaData().getColumnCount(); while (resultSet.next()) { Object[] objects = new Object[columnCount]; for (int i = 0; i < columnCount; i++) { objects[i] = resultSet.getObject(i + 1); } list.add(objects); } } catch (Exception e) { e.printStackTrace(); } finally { close(connection, preparedStatement, resultSet); } return list; } /** * 更新数据库 * @param sqls SQL语句数组 * @param parameters 参数数组 */ public static void updates(String[] sqls, String[][] parameters) { try { connection = getConnection(); connection.setAutoCommit(false); for (int i = 0; i < sqls.length; i++) { preparedStatement = connection.prepareStatement(sqls[i]); for (int j = 0; j < parameters[i].length; j++) { preparedStatement.setString(j + 1, parameters[i][j]); } preparedStatement.executeUpdate(); } connection.commit(); } catch (Exception e) { try { connection.rollback(); } catch (SQLException e1) { e1.printStackTrace(); } e.printStackTrace(); } finally { close(connection, preparedStatement, resultSet); } } }
FileUtils类(用于上传到云端七牛云数据)
package com.shiyanlou.photo.util; import java.io.InputStream; import org.json.JSONException; import com.qiniu.api.auth.AuthException; import com.qiniu.api.auth.digest.Mac; import com.qiniu.api.io.IoApi; import com.qiniu.api.rs.PutPolicy; import com.qiniu.api.rs.RSClient; /** * 图片工具类(使用七牛云存储服务) * @author www.shiyanlou.com * */ public class FileUtils { private static final String ACCESS_KEY = "lCgFLPfu7jGk5y6xEOz2mtnD8fdHUg6kR-gIhBhp";//这里填上面我们讲到的,密钥管理里面的密钥 private static final String SECRET_KEY = "_drJGwPmX4lQrwEjEVLGF6oAh1y1P7pPQAH3KOs4"; private static final String BUCKET_NAME = "shiyanlouphoto";//填我们在七牛云创建的 Bucket 名字 /** * 上传图片到七牛云存储 * @param reader * @param fileName */ public static void upload(InputStream reader, String fileName) { String uptoken; try { Mac mac = new Mac(ACCESS_KEY, SECRET_KEY); PutPolicy putPolicy = new PutPolicy(BUCKET_NAME); uptoken = putPolicy.token(mac); IoApi.Put(uptoken, fileName, reader, null); } catch (AuthException e) { e.printStackTrace(); } catch (JSONException e) { e.printStackTrace(); } } /** * 删除七牛云存储上的图片 * @param key */ public static void delete( String key) { Mac mac = new Mac(ACCESS_KEY, SECRET_KEY); RSClient client = new RSClient(mac); client.delete(BUCKET_NAME, key); } }
3.服务类数据(用于逻辑的处理,主要是各种逻辑函数,由action类传过来,传向Utils类,相当于桥梁)
UserService类
package com.shiyanlou.photo.service; import java.util.List; import com.shiyanlou.photo.domain.User; import com.shiyanlou.photo.util.DBUtils; /** * 用户服务类 * @author www.shiyanlou.com * */ public class UserService { /** * 通过用户名获取用户 * @param username 用户名 * @return 用户 */ public User getUserByUsername(String username) { String sql = "select id, username, password from user where username = ?"; String[] parameters = {username}; List<Object[]> users = DBUtils.query(sql, parameters); if (users.size() == 0) { return null; } else { Object[] objects = users.get(0); return objects == null ? null : new User(Integer.parseInt(objects[0].toString()), objects[1].toString(), objects[2].toString(), null); } } /** * 添加用户 * @param user 用户 */ public void addUser(User user) { String[] sqls = {"insert into user(username, password) values(?, ?)"}; String[][] parameters = {{user.getUsername(), user.getPassword()}}; DBUtils.updates(sqls, parameters); } }
ImageService类
package com.shiyanlou.photo.service; import java.io.InputStream; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.List; import com.shiyanlou.photo.domain.Image; import com.shiyanlou.photo.domain.User; import com.shiyanlou.photo.util.DBUtils; import com.shiyanlou.photo.util.FileUtils; /** * 图片服务类 * @author www.shiyanlou.com * */ public class ImageService { /** * 通过用户ID获取图片列表 * @param userId 用户ID * @return 图片列表 */ public ArrayList<Image> getByUserId(int userId) { ArrayList<Image> images = new ArrayList<Image>(); String sql = "select id, name, url, date, user_id from image where user_id = ? order by date desc"; String[] parameters = {userId + ""}; List<Object[]> imageList = DBUtils.query(sql, parameters); for (Object[] objects : imageList) { Image image = new Image(); image.setId(Integer.parseInt(objects[0].toString())); image.setName(objects[1].toString()); image.setUrl(objects[2].toString()); image.setDate((Date) objects[3]); image.setUser(new User(Integer.parseInt(objects[4].toString()))); images.add(image); } return images; } /** * 上传图片 * @param image 图片 * @param inputStream 输入流 */ public void addImage(Image image, InputStream inputStream) { FileUtils.upload(inputStream, image.getUrl()); String[] sqls = {"insert into image(name, url, date, user_id) values(?, ?, ?, ?)"}; String[][] parameters = {{image.getName(), image.getUrl(), new SimpleDateFormat("yyyy-MM-dd HH:mm").format(image.getDate()), image.getUser().getId() + ""}}; DBUtils.updates(sqls, parameters); } /** * 通过图片ID数组和图片URL数组删除图片 * @param ids 图片ID数组 * @param urls 图片URL数组 */ public void delByIdsAndUrls(String ids, String urls) { String[] idArray = ids.split(","); String[] urlArray = urls.split(","); if (!"".equals(idArray[0]) && !"".equals(urlArray[0])) { String[] sqls = new String[idArray.length]; String[][] parameters = new String[idArray.length][1]; for (int i = 0; i < idArray.length; i++) { FileUtils.delete(urlArray[i]); sqls[i] = "delete from image where id = ?"; parameters[i][0] = idArray[i]; } DBUtils.updates(sqls, parameters); } } }
4.控制器类-action类(主要处理前端和后台的数据交互,由jsp传入,传向service类处理;同时也是反向传递,由service类返回数据到action类,再传向jsp))
UserAction类
package com.shiyanlou.photo.action; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.shiyanlou.photo.domain.User; import com.shiyanlou.photo.service.ImageService; import com.shiyanlou.photo.service.UserService; /** * 用户控制器 * @author www.shiyanlou.com * */ @WebServlet(value = "/UserAction") public class UserAction extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("Utf-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); UserService userService = new UserService(); ImageService imageService = new ImageService(); Integer type = Integer.valueOf(request.getParameter("type")); if (type == 1) { //用户登录 String username = request.getParameter("username"); String password = request.getParameter("password"); String result = null; User user = null; //验证用户是否有效 if (username.isEmpty()) { result = "1"; } else if (password.isEmpty()) { result = "2"; } else if ((user = userService.getUserByUsername(username)) == null) { result = "3"; } else { if (!user.getPassword().equals(password)) { result = "4"; } else { request.getSession().setAttribute("user", user); request.getSession().setAttribute("imageList", imageService.getByUserId(user.getId())); result = "5"; } } out.print(result); } else if (type == 2) { //用户注册 String username = request.getParameter("username"); String password = request.getParameter("password"); String repassword = request.getParameter("repassword"); String result = null; //验证有效性 if (username.isEmpty()) { result = "1"; } else if (password.isEmpty()) { result = "2"; } else if (repassword.isEmpty()) { result = "3"; } else if (!repassword.equals(password)) { result = "4"; } else if (userService.getUserByUsername(username) != null) { result = "5"; } else { User user = new User(username, password); //添加用户 userService.addUser(user); result = "6"; } out.print(result); } else if (type == 3) { //用户退出 request.getSession().invalidate(); } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
ImageAction类
package com.shiyanlou.photo.action; import java.io.IOException; import java.util.Date; import java.util.UUID; import javax.servlet.ServletException; import javax.servlet.annotation.MultipartConfig; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.Part; import com.shiyanlou.photo.domain.Image; import com.shiyanlou.photo.domain.User; import com.shiyanlou.photo.service.ImageService; /** * 图片控制器 * @author www.shiyanlou.com * */ @WebServlet(value = "/ImageAction") @MultipartConfig public class ImageAction extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); Integer type = Integer.valueOf(request.getParameter("type")); ImageService imageService = new ImageService(); if (type == 1) { //上传图片 String imageName = request.getParameter("image_name"); Part image = request.getPart("image"); Image img = new Image(); img.setDate(new Date()); img.setName(imageName); img.setUser((User) request.getSession().getAttribute("user")); img.setUrl(img.getUser().getUsername() + "/" + UUID.randomUUID()); imageService.addImage(img, image.getInputStream()); request.getSession().setAttribute("imageList", imageService.getByUserId(img.getUser().getId())); response.sendRedirect(request.getContextPath() + "/home.jsp"); } else if (type == 2) { //删除图片 String ids = request.getParameter("ids"); String urls = request.getParameter("urls"); imageService.delByIdsAndUrls(ids, urls); request.getSession().setAttribute("imageList", imageService.getByUserId(((User) request.getSession().getAttribute("user")).getId())); } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
五、发布
当项目配置完后,项目目录如下
此时右键项目,配置项目的配置环境,包括jdk,tomcat,刷新
部署后访问:http://localhost:8080/ShiyanlouPhoto/index.jsp
访问成功,注册登录就可以用了
试验效果:
项目原址
视屏录制(无声胜有声)
相关文章推荐
- JavaWeb-结合七牛搭建个人相册
- JavaWeb结合七牛云存储搭建个人相册
- JavaWeb结合七牛云存储搭建个人相册服务
- JavaWeb结合七牛云存储搭建个人相册服务
- PHP后端利用七牛快速搭建个人网站图床
- 搭建的个人博客地址
- 最简单的github搭建个人网站及访问html文件
- 【风马一族_git_github】使用Github搭建个人网站
- 阿里云——手把手教你搭建个人网站
- 七牛EVM云主机搭建web服务-tomcat
- 百度地图框架搭建步骤(纯手打,个人总结)
- 在云服务器用Node.js搭建个人网站
- django搭建个人博客06,发布文章页
- 利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能(六)
- 小米路由器+花生壳搭建个人服务器
- 你好 阿里云——手把手教你搭建个人网站(上云良心品,细致到想哭)
- 如何使用10个小时搭建出个人域名而又Geek的独立博客?
- 搭建个人博客
- 如何使用Orchard搭建敏捷个人的网站(2)
- 用小米路由搭建外网可访问的个人网站