图片服务器准备工作

1.创建项目

编译环境：IDEA+ Linux + MySQL

2.相关知识

1.简单的Web服务器设计开发(Servlet)。

• Servlet是Tomcat这个HTTP服务器所提供的一组编程接口。
• 链接：Servlet详解

2.使用数据库(MySQL)，通过JDBC操作MySQL。

3.数据库设计(设计数据库表结构等)。

4.前后端API设计(基于HTTP协议)。

5.认识JSON数据格式，学习使用Java中的Gson库操作JSON数据。

6.测试HTTP服务器(Postman)。

7.使用 HTML + CSS + JavaScrip 技术构建一个简单的网页。

• HTML：网页的骨架 —— 骨。
• CSS：描述网页上组件的样式(位置、颜色、大小、背景等) —— 皮。
• JavaScrip：描述前端页面上的一些动作(和用户具体交互的行为) —— 魂。
  此处使用：JavaScript 框架 —— Vue.js
• 链接：HTML教程
• 链接：CSS教程
• 链接：JavaScrip教程
• 链接：Vue.js中文社区

8.本地代码部署到云服务器

9.项目测试

3.名词解释

resources\ 这里是我们项目中用到的资源文件的根路径
   src\
      main\
        java\ 这里是我们 java 代码的根路径
           HelloServlet.java 我们要写 Servlet 的地方   
      test\
         java\ 这里用来存放单元测试代码用的

   webapp\ 这里是静态文件的根路径
        index.html 静态文件
        
   WEB-INF\ 这里是存放 web.xml 的路径
        web.xml 相关配置
        pom.xml

v-for：循环访问数据
v-bind：
v-on：绑定某种事件的处理函数(事件指)
ajax：JS中构造HTTP请求发送给服务器

4.问题调试

问题：页面显示内容乱码。
原因：编码不一致。
解决：编码统一，指定浏览器编码为UTF-8，resp.setCon。

问题：如果有两张图片，内容不同，名字相同，则“写磁盘失败”。
原因：因为代码当前按照设定，文件存储路径是image/图片名，所以存储失败。
解决：在文件名上加上时间戳，避免同名图片无法写入磁盘。

问题：使用ajax来渲染页面，产生的问题
原因：1.页面先尝试获取页面大小，
解决：调用 方法，动态调整。

问题：页面显示图片大小不一，不美观。
原因：页面图片大小按原始大小直接展示。
解决：在网页里固定图片显示的大小，使所有图片大小一致。

问题：图片上传成功，页面显示{“200”,“true”}，客户看不懂。
解决：直接上传成功后自动跳转到主页 。

问题：删除图片成功后自动预览图片，与逻辑不符。
原因：click自动触发xx
解决：

扩展：
1.实现简单防盗链机制
解决问题：图片链接可能会被其他人使用
解决方法：将安全允许访问的网站放在数据集中，每次引用进行判断，未被允许的网站不能复制图片链接。

2.优化磁盘存储空间
解决方法：通过MD5判断图片内容是否一致

【补充】MD5特点
1.不管原串多长，得到的MD5值是固定长度
2.原串只要改动(即使只改动一个字节)，MD5值会变动很大。
3.计算MD5值过程简单，而且通过MD5值无法逆推出原串。