【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡

简介: 【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡

【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡

开发背景

本次看到了小影很好看,但是目前看了稍微有些知名的平台都是vue,毕竟vue超过普通html+css性能太多了,vue的渲染机制决定的,请注意奥我们python开发的落地页修改下只是临时用,并且赠送给客户,python使用一定要注意合法合规!!

实战开发

目标网站是由 Vue.js 编译后生成的单页应用程序(SPA)时,爬取和保存网页内容的步骤会有所不同。Vue.js 和其他前端框架(如 React 和 Angular)生成的 SPA 通常依赖于动态加载的资源和客户端渲染。要完整保存这些网页的内容,通常需要执行以下步骤:

  1. 使用无头浏览器:为了正确处理客户端渲染和动态加载,建议使用无头浏览器(如 Puppeteer 或 Selenium)来模拟用户在浏览器中的操作。这些工具可以渲染页面并下载所有相关的静态资源。
  2. 保存页面内容:通过无头浏览器获取页面的 HTML、CSS、JS 文件和其他静态资源,并将其保存到本地。

根据已知信息我们需要用到node.js,因此我们切换掉python,新建download.js

写入编写的js爬虫代码

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');
const url = require('url');
// 目标URL
const targetUrl = 'https://www.xiaoying.tv/';
// 创建保存目录
const saveDirectory = 'xiaoying_tv';
const cssDirectory = path.join(saveDirectory, 'css');
const jsDirectory = path.join(saveDirectory, 'js');
const assetsDirectory = path.join(saveDirectory, 'assets');
if (!fs.existsSync(saveDirectory)) fs.mkdirSync(saveDirectory);
if (!fs.existsSync(cssDirectory)) fs.mkdirSync(cssDirectory);
if (!fs.existsSync(jsDirectory)) fs.mkdirSync(jsDirectory);
if (!fs.existsSync(assetsDirectory)) fs.mkdirSync(assetsDirectory);
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(targetUrl, { waitUntil: 'networkidle2' });
    // 保存HTML文件
    const html = await page.content();
    fs.writeFileSync(path.join(saveDirectory, 'index.html'), html, 'utf8');
    // 下载并保存CSS文件
    const cssLinks = await page.$$eval('link[rel="stylesheet"]', links => links.map(link => link.href));
    for (const link of cssLinks) {
        const response = await page.goto(link);
        const cssContent = await response.text();
        const cssFileName = path.basename(url.parse(link).pathname);
        fs.writeFileSync(path.join(cssDirectory, cssFileName), cssContent, 'utf8');
    }
    // 下载并保存JS文件
    const jsLinks = await page.$$eval('script[src]', scripts => scripts.map(script => script.src));
    for (const script of jsLinks) {
        const response = await page.goto(script);
        const jsContent = await response.text();
        const jsFileName = path.basename(url.parse(script).pathname);
        fs.writeFileSync(path.join(jsDirectory, jsFileName), jsContent, 'utf8');
    }
    // 下载并保存图片等静态文件
    const imgLinks = await page.$$eval('img[src]', imgs => imgs.map(img => img.src));
    for (const img of imgLinks) {
        const response = await page.goto(img);
        const imgBuffer = await response.buffer();
        const imgFileName = path.basename(url.parse(img).pathname);
        fs.writeFileSync(path.join(assetsDirectory, imgFileName), imgBuffer);
    }
    // 下载并保存其他静态文件(如视频、音频等)
    const staticLinks = await page.$$eval('a[href], video[src], audio[src]', elements => elements.map(el => el.href || el.src).filter(src => src));
    for (const link of staticLinks) {
        const response = await page.goto(link);
        const fileBuffer = await response.buffer();
        const fileName = path.basename(url.parse(link).pathname);
        const fileExtension = path.extname(fileName).toLowerCase();
        let filePath = '';
        if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.mp3'].includes(fileExtension)) {
            filePath = path.join(assetsDirectory, fileName);
        } else if (fileExtension === '.css') {
            filePath = path.join(cssDirectory, fileName);
        } else if (fileExtension === '.js') {
            filePath = path.join(jsDirectory, fileName);
        }
        fs.writeFileSync(filePath, fileBuffer);
    }
    await browser.close();
    console.log('网页内容下载完成!');
})();

完成后,我分了一下目录 ,此前python也是有用的,于是我这样

由于安装了node依赖因此我默认根目录是node,继续我们的爬取

思路

详细说明:

  1. 安装 Puppeteer:使用 npm 安装 Puppeteer 库。
  2. 设置保存目录:创建保存 HTML、CSS、JS 文件和静态资源的目录。
  3. 使用 Puppeteer 模拟浏览器操作
  • 启动浏览器并导航到目标 URL。
  • 保存 HTML 内容到本地文件。
  • 查找并下载所有 CSS 文件,并保存到 /css 目录。
  • 查找并下载所有 JS 文件,并保存到 /js 目录。
  • 查找并下载所有图片等静态资源,并保存到 /assets 目录。

实战

以下是使用 Puppeteer 爬取 Vue.js 编译后网站的示例代码:

步骤 1:安装 Puppeteer

首先,安装 Puppeteer 库。在终端中运行以下命令:

npm install puppeteer

步骤 2:编写爬虫脚本

使用 Puppeteer 模拟浏览器操作并下载页面内容。以下是详细的代码示例:

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');
const url = require('url');
// 目标URL
const targetUrl = 'https://www.xiaoying.tv/';
// 创建保存目录
const saveDirectory = 'xiaoying_tv';
const cssDirectory = path.join(saveDirectory, 'css');
const jsDirectory = path.join(saveDirectory, 'js');
const assetsDirectory = path.join(saveDirectory, 'assets');
if (!fs.existsSync(saveDirectory)) fs.mkdirSync(saveDirectory);
if (!fs.existsSync(cssDirectory)) fs.mkdirSync(cssDirectory);
if (!fs.existsSync(jsDirectory)) fs.mkdirSync(jsDirectory);
if (!fs.existsSync(assetsDirectory)) fs.mkdirSync(assetsDirectory);
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(targetUrl, { waitUntil: 'networkidle2' });
    // 保存HTML文件
    const html = await page.content();
    fs.writeFileSync(path.join(saveDirectory, 'index.html'), html, 'utf8');
    // 下载并保存CSS文件
    const cssLinks = await page.$$eval('link[rel="stylesheet"]', links => links.map(link => link.href));
    for (const link of cssLinks) {
        const response = await page.goto(link);
        const cssContent = await response.text();
        const cssFileName = path.basename(url.parse(link).pathname);
        fs.writeFileSync(path.join(cssDirectory, cssFileName), cssContent, 'utf8');
    }
    // 下载并保存JS文件
    const jsLinks = await page.$$eval('script[src]', scripts => scripts.map(script => script.src));
    for (const script of jsLinks) {
        const response = await page.goto(script);
        const jsContent = await response.text();
        const jsFileName = path.basename(url.parse(script).pathname);
        fs.writeFileSync(path.join(jsDirectory, jsFileName), jsContent, 'utf8');
    }
    // 下载并保存图片等静态文件
    const imgLinks = await page.$$eval('img[src]', imgs => imgs.map(img => img.src));
    for (const img of imgLinks) {
        const response = await page.goto(img);
        const imgBuffer = await response.buffer();
        const imgFileName = path.basename(url.parse(img).pathname);
        fs.writeFileSync(path.join(assetsDirectory, imgFileName), imgBuffer);
    }
    // 下载并保存其他静态文件(如视频、音频等)
    const staticLinks = await page.$$eval('a[href], video[src], audio[src]', elements => elements.map(el => el.href || el.src).filter(src => src));
    for (const link of staticLinks) {
        const response = await page.goto(link);
        const fileBuffer = await response.buffer();
        const fileName = path.basename(url.parse(link).pathname);
        const fileExtension = path.extname(fileName).toLowerCase();
        let filePath = '';
        if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.mp4', '.mp3'].includes(fileExtension)) {
            filePath = path.join(assetsDirectory, fileName);
        } else if (fileExtension === '.css') {
            filePath = path.join(cssDirectory, fileName);
        } else if (fileExtension === '.js') {
            filePath = path.join(jsDirectory, fileName);
        }
        fs.writeFileSync(filePath, fileBuffer);
    }
    await browser.close();
    console.log('网页内容下载完成!');
})();

执行

node download.js

完成爬取

查看代码,完美,

查看预览效果,也很完美

下一步我们来做安卓下载和苹果下载,以及修改网页整体内容

目录
打赏
0
7
7
0
205
分享
相关文章
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
109 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
移动端数据抓取:Android App的TLS流量解密方案
本文介绍了一种通过TLS流量解密技术抓取知乎App热榜数据的方法。利用Charles Proxy解密HTTPS流量,分析App与服务器通信内容;结合Python Requests库模拟请求,配置特定请求头以绕过反爬机制。同时使用代理IP隐藏真实IP地址,确保抓取稳定。最终成功提取热榜标题、内容简介、链接等信息,为分析热点话题和用户趋势提供数据支持。此方法也可应用于其他Android App的数据采集,但需注意选择可靠的代理服务。
67 11
移动端数据抓取:Android App的TLS流量解密方案
Python 高级编程与实战:深入理解性能优化与调试技巧
本文深入探讨了Python的性能优化与调试技巧,涵盖profiling、caching、Cython等优化工具,以及pdb、logging、assert等调试方法。通过实战项目,如优化斐波那契数列计算和调试Web应用,帮助读者掌握这些技术,提升编程效率。附有进一步学习资源,助力读者深入学习。
[oeasy]python081_ai编程最佳实践_ai辅助编程_提出要求_解决问题
本文介绍了如何利用AI辅助编程解决实际问题,以猫屎咖啡的购买为例,逐步实现将购买斤数换算成人民币金额的功能。文章强调了与AI协作时的三个要点:1) 去除无关信息,聚焦目标;2) 将复杂任务拆解为小步骤,逐步完成;3) 巩固已有成果后再推进。最终代码实现了输入验证、单位转换和价格计算,并保留两位小数。总结指出,在AI时代,人类负责明确目标、拆分任务和确认结果,AI则负责生成代码、解释含义和提供优化建议,编程不会被取代,而是会更广泛地融入各领域。
88 28
Python 高级编程与实战:深入理解数据科学与机器学习
本文深入探讨了Python在数据科学与机器学习中的应用,介绍了pandas、numpy、matplotlib等数据科学工具,以及scikit-learn、tensorflow、keras等机器学习库。通过实战项目,如数据可视化和鸢尾花数据集分类,帮助读者掌握这些技术。最后提供了进一步学习资源,助力提升Python编程技能。
|
2月前
|
[oeasy]python074_ai辅助编程_水果程序_fruits_apple_banana_加法_python之禅
本文回顾了从模块导入变量和函数的方法,并通过一个求和程序实例,讲解了Python中输入处理、类型转换及异常处理的应用。重点分析了“明了胜于晦涩”(Explicit is better than implicit)的Python之禅理念,强调代码应清晰明确。最后总结了加法运算程序的实现过程,并预告后续内容将深入探讨变量类型的隐式与显式问题。附有相关资源链接供进一步学习。
41 4
Python 高级编程与实战:深入理解设计模式与软件架构
本文深入探讨了Python中的设计模式与软件架构,涵盖单例、工厂、观察者模式及MVC、微服务架构,并通过实战项目如插件系统和Web应用帮助读者掌握这些技术。文章提供了代码示例,便于理解和实践。最后推荐了进一步学习的资源,助力提升Python编程技能。
Python 高级编程与实战:深入理解性能优化与调试技巧
本文深入探讨了Python的性能优化和调试技巧,涵盖使用内置函数、列表推导式、生成器、`cProfile`、`numpy`等优化手段,以及`print`、`assert`、`pdb`和`logging`等调试方法。通过实战项目如优化排序算法和日志记录的Web爬虫,帮助你编写高效稳定的Python程序。
在线编程实现!如何在Java后端通过DockerClient操作Docker生成python环境
以上内容是一个简单的实现在Java后端中通过DockerClient操作Docker生成python环境并执行代码,最后销毁的案例全过程,也是实现一个简单的在线编程后端API的完整流程,你可以在此基础上添加额外的辅助功能,比如上传文件、编辑文件、查阅文件、自定义安装等功能。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
在线编程实现!如何在Java后端通过DockerClient操作Docker生成python环境
Python 高级编程与实战:构建 RESTful API
本文深入探讨了使用 Python 构建 RESTful API 的方法,涵盖 Flask、Django REST Framework 和 FastAPI 三个主流框架。通过实战项目示例,详细讲解了如何处理 GET、POST 请求,并返回相应数据。学习这些技术将帮助你掌握构建高效、可靠的 Web API。

热门文章

最新文章

推荐镜像

更多