简易图片服务器项目说明

2024-02-18 19:30:22

一. 项目背景

现在很多网页都可以见到上传图片的功能，假如我们上传一张本地图片后，网页就会显示我们刚刚所上传的图片，比如博客上传一张图、个人信息提交头像页面等等。那么这背后的原理是什么呢？
其实当我们浏览网页的时候，本质上是从对端服务器获取资源，浏览器在获得这些资源之后进行解析和渲染，呈现在我们用户面前的就是绚丽多彩的页面了。
一般来讲这些资源文档主要有三种格式：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实现了相同内容的图片在磁盘上只能存一份，并加入了时间戳，保证每时每刻的时间是不相同的，所以即使两张图片的内容相同，但是由于时间是不同的，所以图片数据插入数据库不会报错，至此整个项目基本就告一段落了，由于本人能力有限，些许地方还有实现不当，希望各位小伙伴发现了可以不吝批评

码农公寓

目录