网站静态页面克隆 | 学习笔记
克隆过程
软件准备以及系统环境
- IDEA （tomcat）
- windows 10
- 火狐浏览器 （我发现这是必要的，报错404内容比较完整，会带上完整链接，谷歌和Edge都不会）
整体流程
- 新建一个web 项目
- 找到喜欢的网站，copy源代码 （右键-查看源代码） 到index.html
- 配置服务器，在火狐浏览器打开；
- 找到它的检查报错，复制下来（视频里有讲），缺少的内容，大部分是图片，还有css文件，总之，它说缺什么，就下载下来，在idea里补上； a. 我下载的那个网页 还有一些ttf ,woff,woff2的文件，我也一并下载，复制进去了； b. up主用的vim整理需要下载的链接和批量下载404里的内容。我使用的excel格式化链接，和bat命令批量下载文件（win10自带），写在后面； c. 下载完成后补上。（视频里有讲）方法一是，一个一个右键新建package。方法二是在文件夹里批量新建文件夹，(win10也可以做到，写在后面)；
win10批量下载文件&批量创建文件夹
- 怎么用excel 把404里复制下来的无效内容剔除应该就不用说了吧， a. crtl+f - 替换 ：[*] 全部替换为 空 ； b. 再使用crtl +f替换为官方网址；
- 关于批量下载文件：将格式化后的链接保存到一个txt文件中，命名为imgs.txt;
- 再新建一个txt, 在里面输入
@echo off setlocal enabledelayedexpansion for /f %%i in (imgs.txt) do ( curl %%i -O ) pause
- 保存退出，重命名为dow.bat;
- 双击运行这个bat文件，imgs里的链接内容就会被下载到这两个txt所在目录下了。
- 关于批量创建文件夹，我是手动的，因为我copy的网站没几个package; 但是使用win10 的bat同样可以批量创建文件夹；
详情，请参考： (亲测可用) 如下代码：(创建了aa/aa1/aa2 三级文件夹目录) md aa md aa/aa1 md aa/aa1/aa2
出现的问题
- 默认打开的是index.jsp; 解决： 发现我放在了web-inf受保护的目录下，把index.html移到web目录下，同时删除index.jsp;
- 导入图片后打开不显示图片 解决：仍然是WEB-INF目录的问题，我拷贝的网站里的img地址链接都包含WEB-INF目录。最终我使用快捷键 ctrl+r批量替换img里的src链接中的 【WEB-INF/ -> / 】； 再把WEB-INF里的目录移动到web下，删除WEB-INF。
- 发现有一张图片显示不出来 解决：在火狐浏览器里右键检查-查看器定位到图片的代码处，在idea里看代码发现，代码里的图片名叫【20210529041606928.jpg】，但我下载下来后被重命名为【thumb_300_300_20210529041606928.jpg】,我修改了目录里的图片名，成功。
- 发现还有一张显示不出来 解决：定位 - 看代码 -图片在class里 -打开对应class文件 -发现里面的s3.png底下有红色波浪线- 从当初下载的地址里重新下载，粘贴进去。
5.我修改了href跳转的链接，可是实际浏览器上跳转的url一直不变 解决 : 浏览器右键检查发现改错位置了，上面跳转的链接没有改，只改了下面…
- 打开跳转页面后，报错如下：
来自“http://localhost:63342/qd/js/v.js”的资源已被阻止，因为 MIME 类型（“text/html”）不匹配（X-Content-Type-Options:nosniff）。
解决：百度得到把script标签的 type=text/html改为type=javascript，原本网页是在WEB-INF目录下，但是我拷贝后是放在WEB目录下
- 修改后仍然是之前的错误和页面 解决：删除ou缓存t文件，restart
总结
拷贝的是静态页面，本质就是看报错，打补丁 不是一个完整的项目，但是用于学习别人的前端代码是非常不错的 。 感谢up主
