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值无法逆推出原串。