• Java项目---图片服务器

    图片服务器--->服务器（图床）

    • 核心功能：上传图片、展示图片等

    比如：编写博客时我们会插入图片，本质上是往文章中放了一个链接（URL），这个URL资源在另外一个服务器上。

    • 核心知识点：

    （1）简单的Web服务器设计开发能力（Servlet）

    Web服务器--->HTTP服务器

    Servlet是Tomcat这个HTTP服务器所提供的一组编程接口

    （2）使用数据库来进行存储（MySQL)JDBC操作MySql

    （3）数据库设计（根据实际场景设计数据库表结构）

    （4）前后端交互的API的设计（基于HTTP协议）

    （5）认识JSON数据格式，学习使用Java中的Gson这个库操作JSON数据

    （6）学习测试一个HTTP服务器（Postman）

    （7）使用HTML CSS JavaScript技术构建一个简单的网页

    一、服务器设计

    1.数据库设计

    数据库中存储的是图片的属性（元信息）；图片正文是以文件的形式直接存在磁盘上的；数据库中就记录一个path，path就对应到磁盘上的一个文件。

    • md5：图片的md5校验和（字符串哈希算法，哈希表）
    • 校验和：通过一个更短的字符串，来验证整体数据是否正确，短的字符串是根据原串内容通过一定的规则来计算出来的。

    2.服务器API设计（前后端交互接口设计）

    （1）JSON

    一种数据组织的格式，格式键值对的结构。JSON只是一种数据格式，和编程语言无关。

    JSON结构展示：

    1. {
    2.    "name":"曹操",
    3.    "skill1":"剑气",
    4.    "skill2":"三段跳",
    5.    "skill3":"加攻击和吸血",
    6.    "skill4":"加攻速",
    7. }

    使用JSON完成数据的序列化方便完成网络传输。

    （2）Gson:google搞得一个开源的JSON解析库

    （3）文件上传操作在HTML中是如何完成的（用到form表单）

    文件上传在HTTP协议中是如何完成的

    • 开始设计前后端交互API

    1>新增图片

    请求：使用POST，POST到/image这个路径上

    Content-Type:multipart/from-data;

    （正文内容包含图片自身的一些信息）

    （图片正文的二进制内容）

    响应：(1)上传成功

    ①HTTP/1.1 200 OK 

    ②{

            "ok":true,

    }

    (2)上传失败

    ①HTTP/1.1 200 OK 

    ②{

            "ok":false,

            "reason":"具体的失败原因"

    }

    2>查看所有图片信息（数据库里面存的属性信息）

    请求：GET/image

    响应：①成功：HTTP/1.1 200 OK

    成功返回的数组：

    [

        {

              imageid:1,

              imageName:"1.png",

              contentType:"image/png",

              size:1000,

              uploadTime:"20200222",

              path:"./data/1.png",

              md5:"11223344",

         },

        {

             .........

        }

    ]

    ②：失败：HTTP/1.1 200 OK

    失败返回的数组：

    []（返回一个空数组）

    3>查看指定图片属性

    请求：GET/image?imageid=[具体的数值]

    响应：

    ①：成功

    HTTP/1.1 200 OK

    {

              imageid:1,

              imageName:"1.png",

              contentType:"image/png",

              size:1000,

              uploadTime:"20200222",

              path:"./data/1.png",

              md5:"11223344",

    }

    ②：失败

    HTTP/1.1 200 OK

    {

           ok:false,

           reason:"具体出错的原因"

    }

    4>删除指定图片

    请求：DELETE/image?image=[具体的图片id]

    响应：

    ①：成功

    HTTP/1.1 200 OK

    {

           ok:true,

    }

    ②：失败

    HTTP/1.1 200 OK

    {

            ok:false,

            reason:"具体的出错原因"，

    }

    服务器实现代码的时候就可以判断方法，如果是DELETE方法就执行删除操作

    删除不一定非要用DELETE方法，也可以用：GET/image?image=xxx&delete=1

    5>查看指定图片内容

    请求：GET/imageShow?imageid=[具体的图片id]

    响应：

    ①：成功：

    HTTP/1.1 200 OK

    Content-Tpye:image/png

    [图片的二进制内容]

    ②：失败

    HTTP/1.1 200 OK

    {

          ok:false,

          reason:"[具体的出错原因]"

    }

    3.源码的开发

    1.数据库操作

    先创建DBUtil，封装一下获取数据库链接的过程

    dao--->数据访问层，这里面的类围绕着数据操作展开

    ctrl+alt+t--->选中一些代码，在这些代码外面包上一些其他代码

    二、实现代码

    1. package dao;
    2.  
    3. public class Image {
    4.     private int imageId;
    5.     private String imageName;
    6.     private int size;
    7.     private String uploadTime;
    8.     private String contentType;
    9.     private String path;
    10.     private String md5;
    11.  
    12.     public int getImageId() {
    13.         return imageId;
    14.     }
    15.  
    16.     public void setImageId(int imageId) {
    17.         this.imageId = imageId;
    18.     }
    19.  
    20.     public String getImageName() {
    21.         return imageName;
    22.     }
    23.  
    24.     public void setImageName(String imageName) {
    25.         this.imageName = imageName;
    26.     }
    27.  
    28.     public int getSize() {
    29.         return size;
    30.     }
    31.  
    32.     public void setSize(int size) {
    33.         this.size = size;
    34.     }
    35.  
    36.     public String getUploadTime() {
    37.         return uploadTime;
    38.     }
    39.  
    40.     public void setUploadTime(String uploadTime) {
    41.         this.uploadTime = uploadTime;
    42.     }
    43.  
    44.     public String getContentType() {
    45.         return contentType;
    46.     }
    47.  
    48.     public void setContentType(String contentType) {
    49.         this.contentType = contentType;
    50.     }
    51.  
    52.     public String getPath() {
    53.         return path;
    54.     }
    55.  
    56.     public void setPath(String path) {
    57.         this.path = path;
    58.     }
    59.  
    60.     public String getMd5() {
    61.         return md5;
    62.     }
    63.  
    64.     public void setMd5(String md5) {
    65.         this.md5 = md5;
    66.     }
    67.  
    68.     @Override
    69.     public String toString() {
    70.         return "Image{" +
    71.                 "imageId=" + imageId +
    72.                 ", imageName='" + imageName + '\'' +
    73.                 ", size=" + size +
    74.                 ", uploadTime='" + uploadTime + '\'' +
    75.                 ", contentType='" + contentType + '\'' +
    76.                 ", path='" + path + '\'' +
    77.                 ", md5='" + md5 + '\'' +
    78.                 '}';
    79.     }
    80. }

    1.封装数据库操作（DAO层）

    DBUtil封装获取数据库链接的操作；

    Image对应到一个图片对象（包含图片的相关属性）；

    ImageDao Image对象管理器，借助这个类完成Image对象的增删改查操作；

    ImageDao有一个selectAll方法，查找出所有数据库中的数据，但是如果有上亿条数据这样查找很低效，更科学的方法可以指定一些其他筛选条件（分页）；

    • 出现异常之后的具体措施：
    • 1.当前接触过的大部分都是打印调用栈
    • 2.让程序直接终止
    • 3.通过监控报警通知程序员

    （JAR：类似于zip这样的压缩包，一大堆.class文件放在一起,打包成一个文件）

    ImageDao：
    1. package dao;
    2. import common.JavaImageServerException;
    3.  
    4. import java.sql.Connection;
    5. import java.sql.PreparedStatement;
    6. import java.sql.ResultSet;
    7. import java.sql.SQLException;
    8. import java.util.ArrayList;
    9. import java.util.List;
    10.  
    11. public class ImageDao {
    12.     //把image对象插入到数据库中
    13.     public void insert(Image image)  {
    14.         //1.获取数据库连接
    15.         Connection connection=DBUtil.getConnection();
    16.         //2.创建并拼装SQL语句
    17.         String sql="insert into image_table values(null,?,?,?,?,?)";
    18.         PreparedStatement statement=null;
    19.         try {
    20.             statement=connection.prepareStatement(sql);
    21.             statement.setString(1, image.getImageName());
    22.             statement.setInt(2,image.getSize());
    23.             statement.setString(3,image.getUploadTime());
    24.             statement.setString(4,image.getContentType());
    25.             statement.setString(5,image.getPath());
    26.             statement.setString(6,image.getMd5());
    27.  
    28.             //3.执行SQL语句
    29.             int ret=statement.executeUpdate();
    30.             if(ret!=1){
    31.                 //程序出现问题，抛出一个异常
    32.                 throw new JavaImageServerException("插入大户巨款出错");
    33.             }
    34.         } catch (SQLException e) {
    35.             e.printStackTrace();
    36.         }catch (JavaImageServerException e){
    37.             e.printStackTrace();
    38.         }finally{
    39.             //4.关闭连接和statement对象
    40.             DBUtil.close(connection,statement,null);
    41.         }
    42.     }
    43.  
    44.     //查找数据库中的所有图片的信息
    45.     public List selectAll(){
    46.         List images=new ArrayList<>();
    47.         //1、获取数据库连接
    48.         Connection connection=DBUtil.getConnection();
    49.         //2.构造SQL语句
    50.         String  sql="select * from image_table";
    51.         PreparedStatement statement=null;
    52.         ResultSet resultSet=null;
    53.         try {
    54.             //3.执行sql语句
    55.             statement=connection.prepareStatement(sql);
    56.              resultSet=statement.executeQuery();
    57.             //4.处理结果集
    58.             while(resultSet.next()){
    59.                 Image image=new Image();
    60.                 image.setImageId(resultSet.getInt("imageId"));
    61.                 image.setImageName(resultSet.getString("imageName"));
    62.                 image.setSize(resultSet.getInt("size"));
    63.                 image.setUploadTime(resultSet.getString("uploadTime"));
    64.                 image.setContentType(resultSet.getString("contentType"));
    65.                 image.setPath(resultSet.getString("path"));
    66.                 image.setMd5(resultSet.getString("md5"));
    67.                 images.add(image);
    68.             }
    69.             return images;
    70.         }catch (SQLException e){
    71.             e.printStackTrace();
    72.         }finally{
    73.             //关闭连接
    74.             DBUtil.close(connection,statement,resultSet);
    75.         }
    76.         return null;
    77.     }
    78.     //根据imageId查找指定的图片信息
    79.     public Image selectOne(int imageId){
    80.         //1.获取数据库连接
    81.         Connection connection=DBUtil.getConnection();
    82.         //2.构造SQL语句
    83.         String  sql="select * from image_table where imageId = ?";
    84.         PreparedStatement statement=null;
    85.         ResultSet resultSet=null;
    86.         //3.执行SQL语句
    87.         try {
    88.             statement=connection.prepareStatement(sql);
    89.             statement.setInt(1,imageId);
    90.             resultSet =statement.executeQuery();
    91.  
    92.             //4.处理结果集
    93.             if(resultSet.next()){
    94.                 Image image=new Image();
    95.                 image.setImageId(resultSet.getInt("imageId"));
    96.                 image.setImageName(resultSet.getString("imageName"));
    97.                 image.setSize(resultSet.getInt("size"));
    98.                 image.setUploadTime(resultSet.getString("uploadTime"));
    99.                 image.setContentType(resultSet.getString("contentType"));
    100.                 image.setPath(resultSet.getString("path"));
    101.                 image.setMd5(resultSet.getString("md5"));
    102.                 return image;
    103.             }
    104.         } catch (SQLException e) {
    105.             e.printStackTrace();
    106.         }finally{
    107.             //5.关闭连接
    108.             DBUtil.close(connection,statement,resultSet);
    109.         }
    110.         return null;
    111.     }
    112.     //根据imageId删除指定图片
    113.     public void delete(int imageId){
    114.         //1、获取数据库连接
    115.         Connection connection=DBUtil.getConnection();
    116.         //2.拼装SQL语句
    117.         String  sql="delete * from image_table where imageId = ?";
    118.         PreparedStatement statement=null;
    119. //        ResultSet resultSet=null;
    120.         //3.执行SQL语句
    121.         try {
    122.             statement=connection.prepareStatement(sql);
    123.             statement.setInt(1,imageId);
    124.             int ret =statement.executeUpdate();
    125.  
    126.             //4.处理结果集
    127.             if(ret!=1){
    128.                 throw new JavaImageServerException("删除数据库操作失败")
    129.             }
    130.         } catch (SQLException | JavaImageServerException e) {
    131.             e.printStackTrace();
    132.         }finally{
    133.             //4.关闭连接
    134.             DBUtil.close(connection,statement,null);
    135.         }
    136.     }
    137.  
    138.  
    139.     public static void main(String[] args) {
    140.         //用于进行简单的测试
    141.         //1.测试插入数据
    142. //        Image image=new Image();
    143. //        image.setImageName("1.png");
    144. //        image.setSize(100);
    145. //        image.setUploadTime("2023");
    146. //        image.setContentType("image/png");
    147. //        image.setPath("./date/1.png");
    148. //        image.setMd5("112233");
    149. //        ImageDao imageDao=new ImageDao();
    150. //        imageDao.insert(image);
    151.  
    152.         //2.测试查找所有图片信息
    153. //        ImageDao imageDao=new ImageDao();
    154. //        List images=imageDao.selectAll();
    155. //        System.out.println(images);
    156.  
    157.         //3.测试查找指定图片信息
    158.         ImageDao imageDao=new ImageDao();
    159.         Image image=imageDao.selectOne(1);
    160.         System.out.println(image);
    161.         //4.测试查找指定图片信息
    162.         ImageDao imageDao=new ImageDao();
    163.         imageDao.delete(1);
    164.     }
    165. }

    2.基于Servlet来搭建服务器

    （1）安装Servlet

    （2）创建一个类，继承HttpServlet父类（重写父类中的一些重要方法）

    如果服务器收到的是GET方法，就会自动调用HttpServlet的doGet方法；

    如果服务器收到的是POST方法，就会自动调用HttpServlet的doPost方法；

    如果服务器收到的是DELETE方法，就会自动调用HttpServlet的doDelete方法；

    HttpServletRequest req--->请求（方法、url、各种header、body）
HttpServletResponse resp--->响应（状态码、各种header、body）

    给网页上显示一个hello world，修改请求还是修改响应--->修改响应；当代码写完之后，还需要修改webapp/WEB-INF/web.xml把新创建的Servlet注册进去：

    1. xml version ="1.0" encoding =" UTF -8"?>
    2.  
    3. app xmlns ="http://xmlns.jcp.org/xml/ns/javaee"
    4.          xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"
    5.          xsi:schemaLocation ="http://xmlns.jcp.org/xm1/ns/javaee
    6.          http://xmIns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    7.         version ="3.1"
    8.         metadata-complete =" true ">
    9.   
    10.     Hello
    11.     HelloServlet 
    12.   
    13.   
    14.      Hello 
    15.     / hello-servlet 
    16.

    标签-->>告诉Tomcat当前这个servlet对应到代码中的那个类

    标签-->>告诉Tomcat当前这个servlet对应到的URL的path是什么

    三、基于Servlet搭建好项目的后端部分

    部署：

    （1）使用maven打包（war） maven package

    （2）把war包拷贝到tomcat的webapps目录中

    部署完之后，就可以在浏览器（http客户端）中访问服务器了。

    http://47.98.116.42:8080/java_image_server/image

    java_image_server----->war包的名字；image---->web.xml配置的内容

    • ImageServlet:

    （1）上传图片

    需要用到第三方库

    对于JSON格式的响应，需要把content-type设定成指定格式

    如果有两个图片,内容不同，但是名字相同，此时会出现上传失败的情况；应该让每次上传图片对应的路径都不相同（在路径上加上时间戳）

    （2）查看所有图片信息

    （3）查看所有指定图片信息

    （4）删除指定图片

    代码：

    1. package api;
    2.  
    3. import dao.Image;
    4. import dao.ImageDao;
    5.  
    6. import javax.servlet.ServletException;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.File;
    11. import java.io.IOException;
    12. import java.text.SimpleDateFormat;
    13. import java.util.Date;
    14. import java.util.List;
    15.  
    16. public class ImageServlet extends HttpServlet {
    17.     //查看图片属性,既能查看所有,也能查看指定
    18.     @Override
    19.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws SecurityException, ServletException, IOException {
    20.         //考虑到查看所有图片属性和查看指定图片属性
    21.         //通过是否URL中带有imageId参数来进行区分
    22.         //存在imageId查看指定图片属性,否则就查看所有图片属性
    23.         //例如:URL/image?imageId=100
    24.         //imageId的值就是"100"
    25.         //如果URL中不存在imageId那么返回null
    26.         String imageId =req.getParameter("imageId");
    27.         if(imageId==null || imageId.equals("")){
    28.             //查看所有图片属性
    29.             selectAll(req,resp);
    30.         }else{
    31.             //查看指定图片
    32.             selectOne(imageId,resp);
    33.         }
    34.  
    35. //        //req对象中包含了请求中的所有信息
    36. //        //resp对象要生成的结果就放到里面去
    37. //        //当前这个doGet方法就是要根据请求,生成响应
    38. //        resp.setStatus(200);
    39. //        //这个代码就是把hello这个字符串放到http响应的body中了
    40. //        resp.getWriter().write("hello");
    41.     }
    42.  
    43.     private void selectAll(HttpServletRequest req,HttpServletResponse resp){
    44.         //1.创建一个ImageDao对象,并查找数据库
    45.         ImageDao imageDao=new ImageDao();
    46.         List images=imageDao.selectAll();
    47.         //2.把查找到的结果转成JSON格式的字符串,并且写回到resp对象
    48.         Gson gson=new GsonBuilder().create();
    49.         //jsonData就是一个json格式的字符串,和之前约定的格式是一样的
    50.         String jsonDate=gson.toJson(images);
    51.         resp.getWriter().write(jsonDate);
    52.     }
    53.     private void selectOne(String imageId,HttpServletResponse resp){
    54.         resp.setContentType("application/json;charset=utf-8");
    55.         //1.创建ImageDao对象
    56.         ImageDao imageDao=new ImageDao();
    57.         Image image=imageDao.selectOne(Integer.parseInt(imageId));
    58.         //2.使用gson把查看到的数据转成json格式,并写回给响应对象
    59.         Gson gson=new GsonBuilder().create;
    60.         String jsonData=gson.toJson(image);
    61.         resp.getWriter().write(jsonData);
    62.     }
    63.  
    64.     //上传图片
    65.     @Override
    66.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    67.         //1.获取图片的属性信息,并且存入数据库
    68.         //1>需要创建一个factory对象,和upload对象,为了获取到图片属性做的准备工作
    69.         FileItemFactory factory=new DiskFileItemFactory();
    70.         ServletFileUpload upload=new ServletFileUpload(factory);
    71.         //2>通过upload对象进一步解析请求
    72.         List items=null;
    73.         try{
    74.             items=upload.paresRequest(req); 
    75.         }catch(FileUploadException e){
    76.             //出现异常说明解析出错
    77.             e.printStackTrace();
    78.             //告诉客户端出现的具体的错误是什么
    79.             resp.setContentType("application/json;charset=utf-8");
    80.             resp.getWriter().write("{\"ok\":false,\"reason\",\"请求解析失败\"}");
    81.             return;
    82.         }
    83.         //3>把FileItem中的属性提取出来,转换成Image对象,才能存到数据库中
    84.         //当前只考虑一张图片的情况
    85.         FileItem fileItem=item.get(0);
    86.         Image image=new Image();
    87.         image.setImageName(fileItem.getName());
    88.         image.setSize((int)fileItem.getSize());
    89.         //手动获取一下当前日期,并转换成格式化日期
    90.         SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyyMMdd");
    91.         image.setUploadTime(simpleDateFormat.format(new Date()));
    92.         image.setContentType(fileItem.getContentType());
    93.         //自己构造一个路径来保存,引入时间戳为了让文件能够唯一
    94.         image.setPath("./image/"+System.currentTimeMillis()+"_"+image.getImageName());
    95.         //TODO MD5(先不管,写死)
    96.         image.setMD5("112233");
    97.         //存到数据库中
    98.         ImageDao imageDao=new ImageDao();
    99.         imageDao.insert(image);
    100.  
    101.         //2.获取图片的内容信息,并且写入磁盘文件
    102.         File file=new File(image.getPath());
    103.         try{
    104.             fileItem.write(file);
    105.         }catch(Exception e){
    106.             e.printStackTrace();
    107.  
    108.             resp.setContentType("application/json;charset=utf-8");
    109.             resp.getWriter().write("{\"ok\":false,\"reason\",\"写磁盘失败\"}");
    110.             return;
    111.         }
    112.         //3.给客户端返回一个结果数据
    113.         //resp.setContentType("application/json;charset=utf-8");
    114.        // resp.getWriter().write("{\"ok\":true}");
    115.         resp.sendRedirect("index.html");
    116.     }
    117.     //删除指定图片
    118.     @Override
    119.     protected void doDelete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    120.         resp.setContentType("application/json;charset=utf-8");
    121.         //1.先获取到请求中的imageId
    122.         String imageId=req.getParameter("imageId");
    123.         if(imageId==null || imageId.equals("")){
    124.             resp.setStatus(200);
    125.             resp.getWriter().write("{\"ok\":false,\"reason\",\"解析请求失败\"}");
    126.             return;
    127.         }
    128.         //2.传教imageDao对象,查看到该图片对象对应的相关属性(为了知道这个图片对应的文件路径)
    129.         ImageDao imageDao=new ImageDao();
    130.         Image image=imageDao.selectOne(Integer.parseInt(ImageId));
    131.         if(image==null){
    132.             //此时请求中传入的id在数据库中不存在
    133.             resp.setStatus(200);
    134.             resp.getWriter().write("{\"ok\":false,\"reason\",\"image在数据库中不存在\"}");
    135.             return;
    136.         }
    137.         //3.删除数据库中的记录
    138.         imageDao.delete(Integer.parseInt(imageId));
    139.         //4.删除本地磁盘文件
    140.         File fule=new File(image.getPath());
    141.         file.delete();
    142.         resp.setStatus(200);
    143.         resp.getWriter().write("{\"ok\":true}");
    144.     }
    145. }
    • ImageShowServlet

    代码：

    1. package api;
    2.  
    3. import dao.Image;
    4. import dao.ImageDao;
    5.  
    6. import javax.servlet.ServletException;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.File;
    11. import java.io.FileInputStream;
    12. import java.io.IOException;
    13. import java.io.OutputStream;
    14.  
    15. public class ImageShowServlet extends HttpServlet {
    16.     @Override
    17.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    18.         //1.解析出imageId
    19.         String imageId=req.getParameter("imageId");
    20.         if(imageId==null || imageId.equals("")){
    21.             resp.setContentType("application/json;charset=utf-8");
    22.             resp.getWriter().write("{\"ok\":false,\"reason\",\"imageId解析失败\"}");
    23.             return;
    24.         }
    25.         //2.根据imageId查找数据库,得到对应的图片属性信息(需要知道图片存储的路径
    26.         ImageDao imageDao=new ImageDao();
    27.         Image image=imageDao.selectOne(Integer.parseInt(ImageId));
    28.         //3.根据路径打开文件,读取其中的内容,写入到响应对象中
    29.         resp.setContentType(image.getContentType());
    30.         File file=new File(image.getPath());
    31.         //由于图片是二进制文件,应该使用字节流的方式读取文件
    32.         OutputStream outputStream=resp.getOutputStream();
    33.         FileInputStream fileInputStream=new FileInputStream(file);
    34.         byte[] buffer=new byte[1024];
    35.         while(true){
    36.             int len=fileInputStream.read(buffer);
    37.             if(len==-1){
    38.                 //文件读取结束
    39.                 break;
    40.             }
    41.             //此时语句读到一部分数据,放到buffer里面,把buffer中的内容写到响应对象中
    42.             outputStream.write(buffer);
    43.         }
    44.         fileInputStream.close();
    45.         outputStream.close();
    46.     }
    47. }

    四、实现前端页面（展示图片，增删操作）、

    • 实现前端页面主要应用的技术：

    （1）HTML-->网页的骨架；

    （2）CSS--->描述网页上组件的样式（位置、大小、颜色等）；

    （3）JavaScript：描述前端页面上的一些动作（和用户具体交互的行为）

    （HTML、CSS、JavaScript可以写到一个HTML文件中，也可以分开写）

    把网页上显示的这些预览图片替换成服务器上保存的图片，img标签中scr改成服务器上存在的图片的url就可以了；

    需要获取到服务器上所有图片的url(ImageServlet),需要通过JS先获取到所有图片的属性，再分别加载每一个图片；使用JS来完成。

    • 主流的前端框架

    （1）Vue

    1.  
    2. var app = new Vue({ 
    3.   el: '#app', 
    4.   data: { 
    5.     message: 'Hello Vue!' 
    6.   } 
    7. })

    （2）React(facebook)

    （3）Auglar(google)

    JS中变量类型都是在初始化的时候自动推导的

    var声明这是一个变量；

    Vue所做的最核心的工作，把页面显示的内容和JS中的代码相互关联到一起；

    修改js中的变量就能很方便的影响的页面的显示情况。

    1. var app = new Vue({ 
    2.     el:'#app', 
    3.     data: { 
    4.         images: [ 
    5.           { 
    6.             imageId: 1, 
    7.             imageName: "1.png", 
    8.             contentType: "image/png", 
    9.             md5: "aabbccdd", 
    10.           }, 
    11.           { 
    12.             imageId: 2, 
    13.             imageName: "2.png", 
    14.             contentType: "image/png", 
    15.             md5: "aabbccdd", 
    16.           } 
    17.         } 
    18.     }, 
    19.     methods: {
    20.  
    21.     }, 
    22. });

    Vue对象中构造一组写死的数据，先去借助这组数据来渲染页面

    Vue中的命令：

    1>v-for--->>循环访问一个数据

    2>v-bind-->>把数据绑定到html标签上的某个属性

    1. "am-g am-g-fixed blog-fixed blog-content"> 
    2.   
      "figure" class="am am-figure am-figure-default " data-am-figure="
    3. { pureview: 'true' }"> 
    4.      
      "container"> 
    5.        
      for="image in images"> 
    6.          " 'imageShow?imageId=' + image.imageId " 
    7.          style="height:200px;width:200px"> 
    8.        
      {{image.imageName}}
       
    9.

    • 3>v-on-->>绑定某种事件的处理函数（点击鼠标、双击、右键等）

    1. remove(image_id) { 
    2.     $.ajax({ 
    3.         url:"image?image_id=" + image_id, 
    4.         type:"delete", 
    5.         context: this, 
    6.         success: function(data, status) { 
    7.             this.getImages(); 
    8.             alert("删除成功"); 
    9.         } 
    10.     }) 
    11. }

    如果是在标签内部使用Vue对象中的数据，就需要使用插值表达式；

    如果是在标签属性中使用Vue对象中的数据，步需要使用插值表达式，但要搭配Vue的命令；

    images这个数组里面的内容是写死的，接下里通过浏览器中JS代码请求服务器，获取到服务器上都有那些图片，把这个数据作为Vue渲染的依据（Vue对象中的images数组）

    1. getImages() { 
    2.     $.ajax({ 
    3.       url: "image", 
    4.       type: "get", 
    5.       context: this, 
    6.       success: function(data, status) { 
    7.           this.images = data; 
    8.           // 这个代码用来触发 resize 事件. 
    9.           $("#app").resize(); 
    10.       } 
    11.    }) 
    12. },

    ajax:JSz中构造HTTP请求发送给服务器的一种实现方式

    原来页面的渲染过程：

    1>先加载图片

    2>再根据图片大小设定图片的位置，设定显示图片的空间大小

    使用ajax来渲染：

    1>页面先尝试获取页面的大小，并设定显示图片的空间（当前图片还没有获取到，不知道图片的大小）

    2>通过ajax获取图片内容

    改进上传操作，上传成功之后，自动跳转到主页index.html  HTTP重定向

    实现删除图片，浏览器给服务器发送一个DELETE/image?imageId=xxx这样的请求就可以了（ajax完成）

    拓展：

    （1）简单的防盗链机制（通过一定的机制来限制其他人来使用图片）

    可以判定当前请求的referer爱段（HTTP请求协议中的header部分），是不是在我们代码指定的白名单中，如果是，就可以访问。

    referer-->表示当前请求的上一个页面的地址

    再代码中用一个hashSet存一下允许访问的Referer就可以了，展示图片的时候判断一下是否再hashSet中存在即可。

    （2）优化磁盘空间

    应用到MD5，如果两个图片内容完全一样，就在磁盘上存一份就可以了。通过MD5可以判断两个图片内容是否一样。

    图片文件虽然是二进制数据，但是本质上也是字符串，针对图片内容计算MD5。

    如果两个图片内容相同，得到的MD5一定是相同的，反之，近似认为MD5相同，原图内容一定相同。

    理论上使是有可能两个图片的内容不同，MD5相同，但实际上出现概率极低（MD5自身算法设计上引起的特性）

    实现思路：

    上传图片的时候，先判定新图片的MD5在数据库中是否存在，如果已经存在了，就不用把图片内容写到磁盘上，如果不存在就写到磁盘上。

    1>该上传代码的逻辑，磁盘文件名用md5值来表示

    2>修改ImageDao新增一个接口，能按照MD5查找数据库内容

    3>修改上传图片的逻辑，根据MD5判定当前图片是是否要写磁盘

  • 相关阅读:
    vueDay04——v-if else show
    【Python爬虫】过来人告诉你：为什么找工作抓住这个细节，能少踩很多坑哦~（招聘网站实战）
    MediaBox助力企业一站式获取音视频能力
    gitlab安装配置及应用
    ts学习02-数据类型
    在 Azure ML 上用 .NET 跑机器学习
    QT基础教程(QDebug和QString)
    小猿圈Java讲师分享开发9年Java进阶大全
    数据可视化之交通可视化
    手写vue路由
  • 原文地址：https://blog.csdn.net/m0_58272200/article/details/132800586