简易图片服务器项目说明

目录

一. 项目背景

  • 现在很多网页都可以见到上传图片的功能,假如我们上传一张本地图片后,网页就会显示我们刚刚所上传的图片,比如博客上传一张图、个人信息提交头像页面等等。那么这背后的原理是什么呢?
  • 其实当我们浏览网页的时候,本质上是从 对端服务器 获取资源,浏览器在获得这些资源之后进行解析和渲染,呈现在我们用户面前的就是绚丽多彩的页面了。
  • 一般来讲这些资源文档主要有三种格式:HTML、CSS、JS。HTML相当于网页的骨架,CSS相当于网页的衣服,用来规定网页的样式,比如字体大小以及排版等等,而JavaScript则主要负责一些动态的逻辑,比如在网页上按下一个按键后会显示什么等等。

二.项目使用技术栈与平台

所用技术

  • JDBC(Java操作MySQL)
  • 数据库设计(MySQL建库建表,增删查)
  • Gson(反序列化成json字符串)
  • Servlet(服务器端API设计,前后端交互)
  • 基于md5进行校验(决定文件是否要写入磁盘)

平台与环境

  • Windows
  • IDEA
  • Maven

三.项目功能

  • 核心就是实现一个 HTTP 服务器,实现对图片的增删查功能,同时搭配简单的页面辅助完成对图片的上传,显示,阅览功能。(实现一个 HTTP 服务器,然后用这个服务器来存储图片,针对每个图片提供一个唯一的 url,有了这个 url 之后就可以借助它把图片展示到其他网页上。)
  • 本项目的结构主要分为两个部分,数据存储模块和服务器模块。使用MySQL存储图片的属性信息,将图片内容保存到本地磁盘,服务器向外提供诸如上传图片、获取单个图片的属性信息、获取所有图片的属性信息、和删除图片等API接口。

四.项目具体实现

4.1:数据库、表的设计

简易图片服务器项目说明
(1)imageId:图片的 id ,设置为自增主键
(2)imageName:图片名称
(3)size:图片大小
(4)uploadTime:图片的上传时间
(5)contentType:图片的类型(image/jpg,image/png等)
(6)path:图片在磁盘上的存储路径
(7)md5:一种计算校验和的算法(主要用来判断两张图片是否内容相同,即是否两张图片一样)

知识扫盲:什么是md5

这是一种常见的字符串 hash 算法, 具有三个特性:

  • 不管源字符串多长, 得到的最终 md5 值都是固定长度
  • 源字符串稍微变化一点点内容, md5 值就会变化很大(降低冲突概率)
  • 通过原字符串很容易计算得到 md5 值,但是根据 md5 推导出原字符串很难(几乎不可能)
  • md5 常用于哈希算法,加密算法,校验和

4.2:pom.xml文件中引入依赖

:JSON 是一种常见的数据格式组织方式,源于 JavaScript , 是一种键值对风格的数据格式。Java 中可以使用 Gson 库来完成 JSON 的解析和构造. 在 Maven 中新增 对 Gson 库的依赖就可以使用 JSON 了

<!-- 打包方式是 war 包,一种用于 web 应用的包,原理类似 jar 包 -->
    <packaging>war</packaging>

    <!-- 指定属性信息 -->
    <properties>
        <encoding>UTF-8</encoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>

    <dependencies>
        <!-- 加入 servlet 依赖 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <!-- servlet 版本和 tomcat 版本有对应关系,切记 -->
            <version>3.1.0</version>
            <!-- 这个意思是我们只在开发阶段需要这个依赖,部署到 tomcat 上时就不需要了 -->
            <scope>provided</scope>
        </dependency>
        <!--单元测试矿浆junit依赖 -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>
        <!--JSON库,gson-->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.2</version>
        </dependency>
        <!--对应上传图片操作 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.14</version>
        </dependency>
    </dependencies>

    <build>
        <!-- 指定最终 war 包的名称 -->
        <finalName>image_server</finalName>

4.3:服务器端封装数据库的的设计

4.3.1:前期准备工作,首先创建一个maven项目

(1)Maven 是什么?

Maven是 Apache 下的一个纯 Java 开发的开源项目,是一个项目构建和管理的工具;它提供了帮助管理、 构建、文档、报告、依赖、发布、分发的方法。可以方便的编译代码、进行依赖管理、管理二进制库等等。Maven是专门用于构建和管理Java相关项目的工具

(2)使用 Maven 的好处?

maven 的目标是完成项目构建解决一切繁琐事宜。我们具体关注它的以下功能:

  • 提供一个标准的项目工程目录
  • 提供项目描述
  • 提供强大的版本管理工具
  • 可以分阶段的进行构建过程
  • 提供了丰富的插件库使用

4.3.2:dao 包下封装对数据库的相关操作
简易图片服务器项目说明
具体代码实现:
DBUtil工具类:

/**
 * 创建一个单例类来辅助创建连接,关闭连接
 */
public class DBUtil {
    private static volatile DataSource dataSource = null;//管理数据源

    // 通过这个方法来创建 DataSource 的实例
    public static DataSource getDataSource() {
        //单例模式(双重校验+锁+volatile的饿汉模式)
        //加锁实际上会牺牲效率,所以不要每次都加锁,只要判断datasource不为空,就直接返回dataSource对象,保证效率
        if (dataSource == null) {
            synchronized (DBUtil.class) {
                if (dataSource == null) {
                    dataSource = new MysqlDataSource();
                    MysqlDataSource tmpDataSource = (MysqlDataSource) dataSource;
                    tmpDataSource.setURL("jdbc:mysql://localhost:3306/image_server_project?user=root&password=1450618603&useSSL=false&characterEncoding=UTF-8");
                }
            }
        }
        return dataSource;
    }

    //建立数据库连接方法
    public static Connection getConnection() {
        try {
            return getDataSource().getConnection();
        } catch (SQLException e) {
           throw new RuntimeException("数据库连接失败");
        }
    }

    //关闭数据库连接方法
    public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet) {
        try {
            if (resultSet != null) {
                resultSet.close();
            }
            if (statement != null) {
                statement.close();
            }
            if (connection != null) {
                connection.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

Image图片类:

/**
 *  一个 Image 对象:和数据库表的设计相对应
 */
public class Image {
    private int imageId;
    private String imageName;
    private int size;
    private String uploadTime;    //图片上传时间
    private String contentType;   //图片的格式:image.jpg/image.png 等等
    private String path;           //图片应该往磁盘写的位置
    private String md5;            //校验和机制(用于判断两张图片的内容是否相同)

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getImageName() {
        return imageName;
    }

    public void setImageName(String imageName) {
        this.imageName = imageName;
    }

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }

    public String getUploadTime() {
        return uploadTime;
    }

    public void setUploadTime(String uploadTime) {
        this.uploadTime = uploadTime;
    }

    public String getContentType() {
        return contentType;
    }

    public void setContentType(String contentType) {
        this.contentType = contentType;
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }

    public String getMd5() {
        return md5;
    }

    public void setMd5(String md5) {
        this.md5 = md5;
    }

    @Override
    public String toString() {
        return "Image{" +
                "imageId=" + imageId +
                ", imageName='" + imageName + '\'' +
                ", size=" + size +
                ", uploadTime='" + uploadTime + '\'' +
                ", contentType='" + contentType + '\'' +
                ", path='" + path + '\'' +
                ", md5='" + md5 + '\'' +
                '}';
    }
}

数据库操作类:


/**
 *  用来对数据库的增删改查的一个类
 *  JDBC的操作流程
 *     1.获取数据库连接
 *     2.创建并拼装SQL语句
 *     3.执行SQL语句
 *     4.关闭结果集resultSet对象、关闭statement对象,关闭连接
 */


public class ImageDao {

    /**
     * 把一个 Image 对象插入到数据库中
     */
    public boolean insert(Image image){
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            //1.获取数据库连接
            connection = DBUtil.getConnection();

            //2.创建并拼接sql语句
            String sql = "insert into image_table values(null,?,?,?,?,?,?)";
            statement = connection.prepareStatement(sql);
            statement.setString(1,image.getImageName());
            statement.setInt(2,image.getSize());
            statement.setString(3,image.getUploadTime());
            statement.setString(4,image.getContentType());
            statement.setString(5,image.getPath());
            statement.setString(6,image.getMd5());

            //3.执行sql语句
            int ret = statement.executeUpdate();
            if (ret!=1) {
                throw new RuntimeException("插入数据库出错");
            }else {
                return true;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //4.关闭资源
            DBUtil.close(connection,statement,null);
        }
        return false;
    }


    /**
     *  查找数据库中所有图片的属性信息,并存储在 List 列表中
     * @return 所有图片信息
     */
    public List<Image> selectAll(){
        List<Image> images = new ArrayList<>();
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet= null;
        try {
            connection = DBUtil.getConnection();
            String sql = "select * from image_table";
            statement = connection.prepareStatement(sql);
            resultSet = statement.executeQuery();
            while (resultSet.next()) {
                Image image = new Image();
                image.setImageId(resultSet.getInt("imageId"));
                image.setImageName(resultSet.getString("imageName"));
                image.setSize(resultSet.getInt("size"));
                image.setUploadTime(resultSet.getString("uploadTime"));
                image.setContentType(resultSet.getString("contentType"));
                image.setPath(resultSet.getString("path"));
                image.setMd5(resultSet.getString("md5"));

                images.add(image);
            }
            return images;
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //关闭结果集,statement对象和连接
            DBUtil.close(connection,statement,resultSet);
        }
        return null;//出错的话返回空的结果集
    }


    /**
     * 根据 imageId 查找指定图片的属性信息
     * @param imageId
     * @return 返回根据id查找到的图片信息
     */
    public Image selectById(int imageId){
        Connection  connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "select * from image_table where imageId = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,imageId);

            resultSet = statement.executeQuery();
            while (resultSet.next()) {
                Image image = new Image();
                image.setImageId(resultSet.getInt("imageId"));
                image.setImageName(resultSet.getString("imageName"));
                image.setSize(resultSet.getInt("size"));
                image.setUploadTime(resultSet.getString("uploadTime"));
                image.setContentType(resultSet.getString("contentType"));
                image.setPath(resultSet.getString("path"));
                image.setMd5(resultSet.getString("md5"));
                return image;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            // 5.关闭连接和statement对象
           DBUtil.close(connection,statement,resultSet);
        }
        return null;  //如果失败的话返回null
    }


    /**
     * 根据 imageId 删除指定图片
     * @param imageId
     */
    public void delete(int imageId){
        Connection connection = null;
        String sql = "delete  from image_table where imageId = ?";
        PreparedStatement statement = null;
        try {
            connection = DBUtil.getConnection();
            statement = connection.prepareStatement(sql);
            statement.setInt(1,imageId);
            int ret = statement.executeUpdate();
            if (ret != 1) {
                throw  new RuntimeException("删除数据库异常");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(connection,statement,null);
        }
    }

    //根据MD5的值在数据库中查找数据
    public Image selectByMD5(String md5) {
        Connection  connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            connection = DBUtil.getConnection();
            String sql = "select * from image_table where md5 = ?";
            statement = connection.prepareStatement(sql);
            statement.setString(1,md5);

            resultSet = statement.executeQuery();
            while (resultSet.next()) {
                Image image = new Image();
                image.setImageId(resultSet.getInt("imageId"));
                image.setImageName(resultSet.getString("imageName"));
                image.setSize(resultSet.getInt("size"));
                image.setUploadTime(resultSet.getString("uploadTime"));
                image.setContentType(resultSet.getString("contentType"));
                image.setPath(resultSet.getString("path"));
                image.setMd5(resultSet.getString("md5"));
                return image;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            // 5.关闭连接和statement对象
            DBUtil.close(connection,statement,resultSet);
        }
        return null;  //如果失败的话返回null
    }
}

4.4:服务器端servlet接口的设计

简易图片服务器项目说明

首先创建一个 api 包,在这个包中创建两个 Servlet 类,这两个Servlet 类都继承自 HttpServlet类,然后重写了对应的 doxxx() 方法。
一个用来完成图片的增删查操作(ImageServlet类)
一个用来展示图片的详细内容(ImageShowServlet类)
注意:要把这两个Servlet 类都要配置到 web.xml 文件中,其中类名要写完整的带包名的名字

    <servlet>
        <servlet-name>ImageServlet</servlet-name>
        <servlet-class>api.ImageServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ImageServlet</servlet-name>
        <url-pattern>/image</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>ImageShowServlet</servlet-name>
        <servlet-class>api.ImageShowServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ImageShowServlet</servlet-name>
        <url-pattern>/imageShow</url-pattern>
    </servlet-mapping>

imageServlet类:

public class ImageServlet extends HttpServlet {


    /**
     * 查询所有图片/指定图片的内容
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //通过URL中是否带有imageId参数来区分是查看所有图片还是指定图片
        //例如:URL为  /image/imageId=100 name则是查看imageId为100的图片信息
        //     如果URL后面的键值对都不存在或者只存在键无值,就查询所有图片信息
        String imageId = request.getParameter("imageId");
        if (imageId == null || imageId.equals("")) {
            //查看所有图片信息
            selectAll(request,response);
        }else {
            //查看指定图片信息
            selectById(imageId,response);
        }
    }

    /**
     *  查看指定图片信息
     * @param imageId
     * @param response
     */
    private void selectById(String imageId, HttpServletResponse response) throws IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json");

        //1.创建一个ImageDao对象,根据指定id在数据库中查找
        ImageDao imageDao = new ImageDao();
        Image image = imageDao.selectById(Integer.parseInt(imageId));

        //2.创建Gson对象,将查到的数据转换成JSON字符串格式,并且写给响应response对象
        Gson gson = new GsonBuilder().create();
        String jsonData = gson.toJson(image);

        //发送响应给前端
        PrintWriter writer = response.getWriter();
        writer.println(jsonData);
    }

    private void selectAll(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json");

        ImageDao imageDao = new ImageDao();
        List<Image> images = imageDao.selectAll();
        Gson gson = new GsonBuilder().create();
        String jsonData = gson.toJson(images);
        PrintWriter writer = response.getWriter();
        writer.println(jsonData);
    }

    /**
     *  上传图片
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        //1.获取图片信息,并存入数据库
        //  1.1需要创建一个factory对象和upload对象,为了获取到图片属性做的准备工作
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        //  1.2通过upload对象进一步解析请求(解析HTTP请求中的 body 部分)
        //  理论上来说,HTTP 支持一个请求中同时上传多个文件,FileItem 就代表上传的一个文件对象,多个文件用 List 组织
        List<FileItem> items = null;
        try {
             items = upload.parseRequest(request);
        } catch (FileUploadException e) {
            //出现异常说明解析出错
            e.printStackTrace();
            //告诉客户端出现的具体错误信息
            PrintWriter writer = response.getWriter();
            response.setCharacterEncoding("utf-8");
            response.setContentType("application/json");
            writer.write("{\"ok\":false \"reason\":\"上传图片请求解析失败\"}");
            return;
        }
        //   1.3将FileItem中的对象提取出来转换成Image对象,才能存到数据库中
        FileItem fileItem = items.get(0);
        Image image = new Image();
        image.setImageName(fileItem.getName());
        image.setSize((int)fileItem.getSize());
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        Date date = new Date();
        String time = simpleDateFormat.format(date);
        image.setUploadTime(time);
        image.setContentType(fileItem.getContentType());
        //计算md5的值
        image.setMd5(DigestUtils.md5Hex(fileItem.get()));// md5 值是十六进制的字符串 图片内容相同时则md5值相同,图片内容不同时,md5值不同
        //自定义存储路径,加上数据保证不会出现连续插入两张图片报错,因为每时每刻时间戳是唯一的
        image.setPath("./image/"+image.getMd5());

        //存入数据库
        ImageDao imageDao = new ImageDao();
        //看看数据库中是否存在相同的md5值的图片,不存在则返回null
        Image existImage = imageDao.selectByMD5(image.getMd5());
        imageDao.insert(image);

        //2.获取图片的内容信息,如果相册中不存在该图片,写入磁盘文件中
        if (existImage==null) {
            File file = new File(image.getPath());
            try {
                fileItem.write(file);
            } catch (Exception e) {
                e.printStackTrace();
                //出现异常说明写入文件失败
                PrintWriter writer = response.getWriter();
                response.setCharacterEncoding("utf-8");
                response.setContentType("application/json");
                writer.write("{\"ok\":false \"reason\":\"图片内容写入磁盘失败\"}");
                return;
            }
        }


       /* PrintWriter writer = response.getWriter();
        writer.write("{\"ok\":true}");*/
        response.sendRedirect("index.html");
    }

    /**
     *  删除指定图片
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */

    @Override
    protected void doDelete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //1.先获取请求中的imageId
        String imageId = req.getParameter("imageId");
        if (imageId==null || imageId.equals("")) {
            resp.setStatus(200);
            resp.setCharacterEncoding("utf-8");
            resp.setContentType("application/json");
            PrintWriter writer = resp.getWriter();
            writer.write("{\"ok\":\"false\" \"reason\":\"解析请求失败\"}");
            return;
        }

        //2.创建ImageDao对象,查看到该图片对象对应的相关属性,若存在则要删除
        //  既要删除数据库中的内容,也要删除磁盘中存储的对应图片,因此要知道该 imageId 对应的图片对象的存储路径
        ImageDao imageDao = new ImageDao();
        Image image = imageDao.selectById(Integer.parseInt(imageId));
        if (image == null) {
            //说明请求中传入的id在数据库中不存在
            resp.setStatus(200);
            resp.setCharacterEncoding("utf-8");
            resp.setContentType("application/json");
            PrintWriter writer = resp.getWriter();
            writer.write("{\"ok\":\"false\" \"reason\":\"数据库中不存在该数据\"}");
            return;
        }

        //3.删除数据库中的记录
        imageDao.delete(Integer.parseInt(imageId));

        // 4.删除本地磁盘文件(注意:数据库中可能有多张相同的图片,但是磁盘中只写入了一张图片,删除要注意)
        //   刚刚已经从数据库中删除了那张图片,若此时数据库中还存有相同的图片,那么不应该删除磁盘图片文件
        //   相同图片的 md5 值是相同的
        Image existImage = imageDao.selectByMD5(image.getMd5());
        // 如果删除完毕后,数据库中没有相同的图片了,那么就删除磁盘文件,否则就不删除
        if (existImage == null) {
            File file = new File(image.getPath());
            file.delete();
            resp.setStatus(200);
        }
    }
}

imageShowServlet类:


public class ImageShowServlet extends HttpServlet {
    //基于白名单的防盗链机制
    static private HashSet<String> whiteList = new HashSet<>();
    //白名单
    static {
        whiteList.add("http://localhost:8080/index.html");
        whiteList.add("http://localhost:8080/image_server/index.html");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //防盗链功能,因为服务器同时访问人太多容易崩溃
        String referer = request.getHeader("Referer");
        if (!whiteList.contains(referer)) {
            response.setContentType("application/json; charset=utf-8");
            response.getWriter().write("{ \"ok\":false,\"reason\":\"该网站未授权访问\" }");
            return;
        }

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json");

        //1.解析出imageId
        String imageId = request.getParameter("imageId");
        if (imageId==null || imageId.equals("")) {
            PrintWriter writer = response.getWriter();
            writer.write("{\"ok\":\"false\" \"reason\":\"数据解析失败\"}");
            return;
        }
        //2.根据imageId查找数据库,得到对应的图片属性信息(需要知道图片存储的路径)
        ImageDao imageDao = new ImageDao();
        Image image = imageDao.selectById(Integer.parseInt(imageId));
        //3.根据路径打开文件,读取其中的内容,写入到响应体中
        response.setContentType(image.getContentType());
        File file = new File(image.getPath());

        //由于图片是二进制文件,因此使用字节流方式读取
        FileInputStream fileInputStream = new FileInputStream(file);
        ServletOutputStream outputStream = response.getOutputStream();
        byte[] buffer = new byte[1024];
        while (true) {
            int len = fileInputStream.read(buffer);
            if (len == -1) {
                //文件读取完毕
                break;
            }
            //此时已经读到一部分数据,在buffer中存着,应该写到响应对象中
            outputStream.write(buffer);
        }
        fileInputStream.close();
        outputStream.close();
    }

}

至此,后端代码告一段落

4.5:前端代码实现:

有句话说的好,下坡易上坡难,我们不会做加法,就学着去做减法,前端不太
了解的情况我们可以在网上下载一些前端模板,对其删减已达到我们想要的效果

基于模板进行删减修改:
(1)title 标签的修改
简易图片服务器项目说明
(2)页面的选择文件和提交按钮
简易图片服务器项目说明
注意:为了让 “提交按钮” 和前面的选择文件一样高, 这里加了一个style=“height:41px”
此处我们直接使用 style 属性调整样式, 这是一个简单粗暴的做法. 事实上专业的前端开发很少这样做, 因为代码的可维护性不好

(3)页面 Logo 的修改

简易图片服务器项目说明
简易图片服务器项目说明

(4)使用 Vue

Vue 是 JS 的框架,他做的核心工作是把页面显示的内容和 JS 中的代码相互关联到一起,修改 JS 中的变量就能很方便的影响到页面的显示情况。
简易图片服务器项目说明

Vue的基本用法:
简易图片服务器项目说明
var 声明这是一个变量,构造方法是使用了 JSON 形式的{} ,el 属性表示我要把当前这个对象关联上某一个 html 的标签(把 app 对象关联到 html 中一个 id=“app” 的标签)

主要JS代码:

第一步: id=“app” 把 JS 代码和 该标签绑定
第二步:使用 v-bind:src 把图片的内容 通过 ImageShowServlet 接口获取到.
第三步:使用 {{image.imageName}} 表示图片的名称
第四步:v-for 能够循环访问一个数据
注:只要访问 index.html 文件就要加载服务器中的所有图片,所以只要访问 index.html 文件,就要调用该方法


<script>
    var app=new Vue({
        // e1 属性表示我要把当前这个对象关联到某一个 html 的标签上(把 app 对象关联到 html 中的一个 id="app 的标签)
        el: '#app',
        data: {
            images: [    //一个集合数组
            ]
        },
        methods:{
            // 请求格式:   GET /image
            getImages(){
                $.ajax({   // ajax 是在JS中构造 http 请求发送给服务器的一种实现方式
                    url:"image",
                    type:"get",
                    context:this,
                    success:function (data,status) {
                        //此处的代码在浏览器收到响应之后,才会执行到
                        //参数中的 data 就相当于收到的 http 响应中的 body 部分
                        this.images=data;
                        $('#app').resize();   //触发浏览器,让它自动调整大小,让图片正确显示
                    }
                })
            },
            // 请求格式:   DELETE /image?imageId=
            remove(imageId){
                $.ajax({
                    url:"image?imageId="+imageId,
                    type:"delete",
                    context:this,
                    success:function (data,status) {
                        this.getImages(); //只要删除图片,就重新获取一下服务器上剩余的图片,保证页面显示的图片数量正常
                        alert("删除图片成功!");//弹出一个对话框
                    }
                })
            }
        }
    })
    app.getImages();         //项目只要访问 index.html 就自动调用该方法
</script>

(5)在返回完后端代码完善上传功能

当前的上传请求成功后会返回一个 JSON 格式的数据. 而我们需要的是直接能看到上传的效果,因此应该修改响应,直接重定向到 index.html 页面观察即可。
修改上传接口中的响应, 直接返回一个 302 响应, 重定向回主页即可。
简易图片服务器项目说明
(6)实现删除图片
简易图片服务器项目说明
此程序的事件冒泡机制:div 标签中有 3 个字标签
①点击 div 就会触发一个点击事件,div 就会处理这个点击事件并显示预览图
②点击 button 删除按钮的时候也会触发一个点击事件,触发删除操作
③点击 cilck 就会先被 button 处理,进行删除操作,然后顺着 button 的父标签,传递给 div 标签,然后 div 再处理一次,触发预览图效果

4.6:项目的两个拓展点:

4.6.1:防盗链机制:增加安全性
通过 HTTP 请求中的 Refer 字段判定是否是指定网站请求服务器图片,未授权网站就无法访问图片内容。

4.6.2:md5校验和机制:实现相同内容的图片在磁盘上只能存一份
整体思路:

  • 修改 dao 层代码,在 dao 层实现一个selectByMd5()的方法,根据 Md5 值来查找数据库中的图片信息(是否存在多张相同图片).
  • 修改上传图片代码,在磁盘上存储文件时先判定,该 md5 对应的图片是否已经存在于磁盘上了,若存在就不必再往磁盘写了.
  • 修改删除图片代码,先删除数据库记录,删除完毕后,看数据库中是否还存在刚刚相同的 md5 的记录.如果不存在,就删除磁盘文件.

五:项目实现具体

效果图:简易图片服务器项目说明

简易图片服务器项目说明
简易图片服务器项目说明
此处我们发现,数据库和浏览器都存有7张图片,然而本地磁盘只存有六张图片,这正是由于我们用了md5实现了相同内容的图片在磁盘上只能存一份,并加入了时间戳,保证每时每刻的时间是不相同的,所以即使两张图片的内容相同,但是由于时间是不同的,所以图片数据插入数据库不会报错,至此整个项目基本就告一段落了,由于本人能力有限,些许地方还有实现不当,希望各位小伙伴发现了可以不吝批评

上一篇:使用JDBC方式读取Kylin结果


下一篇:Selenium WebDriver中鼠标事件