Web---自己写的一个简单云相册(1)~

简介: Web---自己写的一个简单云相册~

实现的功能是:

用户可以一次上传一个至多个文件。

用户可以下载其他人上传的图片。

用户可以查看其他所有人的图片。

用户只能删除通过自己IP上传的图片。


用到的技术:

文件上传下载、设计模式、Dom4j、xPath等。


先看下2个页面:

image.png

image.png



源代码:


web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>UploadServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.UploadServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>cloudPhotoServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.cloudPhotoServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>DownServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.DownServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>DelServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.DelServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UploadServlet</servlet-name>
    <url-pattern>/upload</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>cloudPhotoServlet</servlet-name>
    <url-pattern>/cloudPhoto</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>DownServlet</servlet-name>
    <url-pattern>/servlet/DownServlet</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>DelServlet</servlet-name>
    <url-pattern>/servlet/DelServlet</url-pattern>
  </servlet-mapping>    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>chx云相册</title>
    <script type="text/javascript">
        function delFile(input){
            table = input.parentElement.parentElement.parentElement;//table.nodeName  TBODY
            table.removeChild(input.parentElement.parentElement);
        }
        var t=1;
        function addFile(input){
            tr = input.parentElement.parentElement;
            //alert(tr.nodeName);
            var str = "<td>选择文件:</td>"+
                "<td> <input type='file' name='file"+t+"'> </td> "+
                "<td>文件说明:</td>"+
                "<td> <input type='text' name='text"+t+"'> </td> "+
                "<td> <input type='button' value='删除文件' onclick='delFile(this)'> </td>";
            tr.insertAdjacentHTML("beforeBegin",str);
        }
        function move(){
            window.location.href="/myPhoto/cloudPhoto";
        }
    </script>
    <style type="text/css">
        #font{
            color:red;
        }
    </style>
  </head>
  <body>
    <h1><font id="font">相册上传:</font></h1>
    <form action="/myPhoto/upload" method="post" enctype="multipart/form-data">
        <table border="1px" bordercolor="red">
            <tr>
                <td>选择文件:</td>
                <td> <input type="file" name="file1"> </td> 
                <td>文件说明:</td>
                <td> <input type="text" name="text1"> </td> 
                <td> <input type="button" value="删 除 文 件" onclick="delFile(this)"> </td>
            </tr>
            <tr>
                <td colspan=2> <input type="submit" value="上 传 文 件"> </td>
                <td colspan=3> <input type="button" value="添 加 文 件" onclick="addFile(this)"> </td>
            </tr>
        </table>
    </form>
    <form action="/myPhoto/cloudPhoto" method="post" enctype="multipart/form-data">
        <table border="1px;double;#ff0000">
            <tr>
                <td colspan=5><input type="submit" value="进 入 云 相 册" onclick="move()"></td>
            </tr>
        </table>
    </form>
  </body>
</html>

photo.xml:

<?xml version="1.0" encoding="UTF-8"?>
<photos>
</photos>


MyUtils.java:

package cn.hncu.utils;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
public class MyUtils {
    /**
     * @return 获取UUID
     */
    public static String getUUID(){
        return UUID.randomUUID().toString().replace("-", "");
    }
    /**
     * @param uuid
     * @return 通过uuid,获得打散后的路径
     */
    public static String getDir(String uuid){
        String dir1 = Integer.toHexString( uuid.hashCode() & 0xf );
        String dir2 = Integer.toHexString( (uuid.hashCode() & 0xf0)>>4 );
        return "/"+dir1+"/"+dir2;
    }
    //日期时间格式
    private static SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
    /**
     * @return 返回的是上传的时候的日期时间
     */
    public static String getCurrentDateTime(){
        return sdf.format(new Date());
    }
}

Dom4jFactory.java:

package cn.hncu.utils;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;
import org.dom4j.io.XMLWriter;
public class Dom4jFactory {
    private static Document dom=null;
    private static String path;
    //静态块!只会运行一次!特点是在类加载的时候就执行
    static{
        try {
            SAXReader sax = new SAXReader();
            //因为我们的资源已经从myelipse中发布到tomcat服务器中了,所以跟原来的纯Java项目不一样了。
            //利用当前类找到它的类加载器,然后通过该类加载器再去获得资源路径
            path = Dom4jFactory.class.getClassLoader().getResource("photo.xml").getPath();
            //getClassLoader()返回:加载此对象所表示的类或接口的类加载器
            //public URL getResource(String name)返回:读取资源的 URL 对象;如果找不到该资源,或者调用者没有足够的权限获取该资源,则返回 null。
            //此方法首先搜索资源的父类加载器;如果父类加载器为 null,则搜索的路径就是虚拟机的内置类加载器的路径。
            //public String getPath()获取此 URL 的路径部分。 
            System.out.println(path);
            dom = sax.read(new FileInputStream(path));
        } catch (FileNotFoundException e) {
            throw new RuntimeException(e);
        } catch (DocumentException e) {
            throw new RuntimeException(e);
        }
    }
    /**
     * @return 获取相册的Document
     */
    public static Document getDocument(){
        return dom;
    }
    /**
     * 进行photo.xml的保存,保存到本地
     */
    public static boolean save(){
        try {
            XMLWriter w = new XMLWriter(new FileOutputStream(path));
            w.write(dom);
            w.close();
            return true;
        } catch (UnsupportedEncodingException e) {
            return false;
        } catch (FileNotFoundException e) {
            return false;
        } catch (IOException e) {
            return false;
        }
    }
    public static boolean del(String uuid){
        Node node = dom.selectSingleNode("[@uuid='"+uuid+"']");
        if(node==null){
            return false;
        }
        node.getParent().remove(node);
        return true;
    }
    /**
     * 测试用
     * @param args
     */
    public static void main(String[] args){
        System.out.println( getDocument() );
    }
}

PhotoModel.java-值对象

package cn.hncu.domain;
/**
 * 值对象封装
 * @author 陈浩翔
 * 2016-7-24
 */
public class PhotoModel {
    private String uuid;//uuid
    private String realName="";//图片真实文件名(上传时的文件名)
    private String ext;//后缀名
    private String dir;//打散后的路径
    private String dateTime;//上传文件的时间
    private String ip;//上传者的IP
    private String desc;//文件的说明
    public String getUuid() {
        return uuid;
    }
    public void setUuid(String uuid) {
        this.uuid = uuid;
    }
    public String getRealName() {
        return realName;
    }
    public void setRealName(String realName) {
        this.realName = realName;
    }
    public String getExt() {
        return ext;
    }
    public void setExt(String ext) {
        this.ext = ext;
    }
    public String getDir() {
        return dir;
    }
    public void setDir(String dir) {
        this.dir = dir;
    }
    public String getDateTime() {
        return dateTime;
    }
    public void setDateTime(String dateTime) {
        this.dateTime = dateTime;
    }
    public String getIp() {
        return ip;
    }
    public void setIp(String ip) {
        this.ip = ip;
    }
    public String getDesc() {
        return desc;
    }
    public void setDesc(String desc) {
        this.desc = desc;
    }
    @Override
    public String toString() {
        return "PhotoModel [uuid=" + uuid + ", realName=" + realName + ", ext="
                + ext + ", dir=" + dir + ", dateTime=" + dateTime + ", ip="
                + ip + ", desc=" + desc + "]";
    }
}


PhotoDao.java:

package cn.hncu.photoDao.Dao;
import java.util.List;
import cn.hncu.domain.PhotoModel;
public interface PhotoDao {
    /**
     * @param photo
     * @return 数据的保存
     */
    public boolean save(PhotoModel photo);
    /**
     * @return 返回所所有的图片信息
     */
    public List<PhotoModel> getAll();
    /**
     * @param uuid
     * @return 通过uuid 查找那个被封装的值对象
     */
    public PhotoModel getSingleByUuid(String uuid);
    /**
     * @param uuid
     * @return 通过uuid删除photos.xml中该图片的信息
     */
    public boolean deleteXml(String uuid);
    /**
     * @param dir
     * @return 通过路径删除服务器磁盘中该图片的信息
     */
    public boolean deleteFile(String pathFileName);
}
目录
相关文章
|
前端开发
Web前端实现3D旋转魔方相册【超详细】
Web前端实现3D旋转魔方相册【超详细】
806 0
Web---自己写的一个简单云相册(2)~
Web---自己写的一个简单云相册~
158 0
|
Web App开发 XML JavaScript
Web---自己写的一个简单云相册~
实现的功能是: 用户可以一次上传一个至多个文件。 用户可以下载其他人上传的图片。 用户可以查看其他所有人的图片。 用户只能删除通过自己IP上传的图片。 用到的技术: 文件上传下载、设计模式、Dom4j、xPath等。
976 0
|
1月前
|
数据库 开发者 Python
web应用开发
【9月更文挑战第1天】web应用开发
40 1
|
21天前
|
数据可视化 图形学 UED
只需四步,轻松开发三维模型Web应用
为了让用户更方便地应用三维模型,阿里云DataV提供了一套完整的三维模型Web模型开发方案,包括三维模型托管、应用开发、交互开发、应用分发等完整功能。只需69.3元/年,就能体验三维模型Web应用开发功能!
41 8
只需四步,轻松开发三维模型Web应用
|
11天前
|
安全 API 开发者
Web 开发新风尚!Python RESTful API 设计与实现,让你的接口更懂开发者心!
在当前的Web开发中,Python因能构建高效简洁的RESTful API而备受青睐,大大提升了开发效率和用户体验。本文将介绍RESTful API的基本原则及其在Python中的实现方法。以Flask为例,演示了如何通过不同的HTTP方法(如GET、POST、PUT、DELETE)来创建、读取、更新和删除用户信息。此示例还包括了基本的路由设置及操作,为开发者提供了清晰的API交互指南。
45 6
|
10天前
|
存储 JSON API
实战派教程!Python Web开发中RESTful API的设计哲学与实现技巧,一网打尽!
在数字化时代,Web API成为连接前后端及构建复杂应用的关键。RESTful API因简洁直观而广受欢迎。本文通过实战案例,介绍Python Web开发中的RESTful API设计哲学与技巧,包括使用Flask框架构建一个图书管理系统的API,涵盖资源定义、请求响应设计及实现示例。通过准确使用HTTP状态码、版本控制、错误处理及文档化等技巧,帮助你深入理解RESTful API的设计与实现。希望本文能助力你的API设计之旅。
33 3
|
11天前
|
JSON API 数据库
从零到英雄?一篇文章带你搞定Python Web开发中的RESTful API实现!
在Python的Web开发领域中,RESTful API是核心技能之一。本教程将从零开始,通过实战案例教你如何使用Flask框架搭建RESTful API。首先确保已安装Python和Flask,接着通过创建一个简单的用户管理系统,逐步实现用户信息的增删改查(CRUD)操作。我们将定义路由并处理HTTP请求,最终构建出功能完整的Web服务。无论是初学者还是有经验的开发者,都能从中受益,迈出成为Web开发高手的重要一步。
33 4
|
9天前
|
开发框架 JSON 缓存
震撼发布!Python Web开发框架下的RESTful API设计全攻略,让数据交互更自由!
在数字化浪潮推动下,RESTful API成为Web开发中不可或缺的部分。本文详细介绍了在Python环境下如何设计并实现高效、可扩展的RESTful API,涵盖框架选择、资源定义、HTTP方法应用及响应格式设计等内容,并提供了基于Flask的示例代码。此外,还讨论了版本控制、文档化、安全性和性能优化等最佳实践,帮助开发者实现更流畅的数据交互体验。
29 1
下一篇
无影云桌面