鱼C论坛

 找回密码
 立即注册
查看: 1215|回复: 2

[已解决]爬虫求助。。。vue框架

[复制链接]
发表于 2021-12-29 14:31:48 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
家里的小朋友买了一套书,后面附带的有一个二维码扫码听音频。因为每次需要听音频都需要拿出来一部手机去扫二维码很是麻烦就萌生了爬取音频的想法。结果通过解析网站发现是vue的框架搭建的。研究了一上午感觉有点懵逼。还求大神指点一二。。。。

原地址:https://tstt.dolphinmedia.cn/wap/dibble/index.html?id=36
另外还发现微信可以正常播放,用浏览器就无法正常播放了。。。



  1. <html lang="zh-CN" class="pixel-ratio-1 watch-active-state">
  2. <head>
  3.   <meta charset="utf-8">
  4.   <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
  5.   <title></title>
  6.   <meta name="description" content="启蒙听听,智能故事机">
  7.   <meta name="keywords" content="启蒙云店,启蒙听听,智能故事机">
  8.   <meta name="apple-mobile-web-app-capable" content="yes">
  9.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10.   <meta name="format-detection" content="telephone=no">
  11.   <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
  12.   <meta name="applicable-device" content="mobile">
  13.   <script src="https://res.wx.qq.com/open/js/jweixin-1.5.0.js"></script>
  14.   <script>
  15.     (function (win,doc){
  16.       if (!win.addEventListener) return;
  17.       var html=document.documentElement;
  18.       function setFont()
  19.       {
  20.         var cliWidth=html.clientWidth;
  21.         html.style.fontSize=100*(cliWidth/750)+'px';
  22.       }
  23.       win.addEventListener('resize',setFont,false);
  24.       setFont();
  25.     })(window,document);
  26.   </script>
  27.   <link rel="stylesheet" href="./css/style.css">
  28. </head>
  29. <body>
  30.   <div class="wrap" id="app">
  31.     <div class="header">
  32.       <img src="./imgs/logo.png" alt="海豚传媒" class="logo">
  33.       <h1>海豚传媒点播系统升级啦!</h1>
  34.     </div>
  35.     <div class="code">
  36.       <p class="txt">
  37.         <span>微信小程序,体验稳定流畅!</span>
  38.         <span>自动收藏,下次直接收听!</span>
  39.         <span>海量资源,等你免费畅享!</span>
  40.       </p>
  41.       <div class="tingcode">
  42.         <img :src="audioData.codeurl" alt="海豚听书小程序">
  43.         <p>关注后即可体验</p>
  44.       </div>
  45.     </div>
  46.     <div class="con">
  47.       <h2 class="tit">{{audioData.album}}</h2>
  48.       <ul class="list-audio">
  49.         <li v-bind:class="[current == index && isPlaying ? 'act' : '']" v-for="(item , index) in audioData.music" :key="item.id"   @click="playAudio(index,item.musicurl)">
  50.           <span class="num">{{index < 9 ? '0'+(index+1) : (index+1) }}</span>
  51.           <span class="name">{{item.name}}</span>
  52.           <div class="icon ">
  53.             <span class="paused"></span>
  54.             <img src="./imgs/play.gif" class="play">
  55.           </div>
  56.         </li>
  57.       </ul>
  58.     </div>
  59.     <div class="server">
  60.       <p class="tit">微信扫码添加“海豚童学”服务号<span>免费畅享更多学习资源!</span></p>
  61.       <img src="./imgs/code.png" alt="“海豚童学”服务号" class="code">
  62.       <p class="ps">有任何问题也可以通过“海豚童学”及时反馈!</p>
  63.     </div>
  64.     <div class="footer">
  65.       <p>&#169; Copyright : 2016 - 2017 - All Rights Reserved</p>
  66.       <p>Powered by 海豚传媒股份有限公司 ||鄂ICP备06015671号</p>
  67.     </div>
  68.     <div class="fixbot">
  69.       <p>
  70.         <span>加入海豚书友会(同龄同城群)</span>
  71.         <span>与优秀宝妈一起交流学习&#12316;</span>
  72.       </p>
  73.       <a >立即加入</a>
  74.     </div>
  75.   </div>
  76.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  77.   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  78.   <script>
  79.     var audioContent = new Audio()
  80.     var app = new Vue({
  81.       el:'#app',
  82.       data:{
  83.         audioData:{},
  84.         isPlaying:false,
  85.         current:null
  86.       },
  87.       created: function(){
  88.         let _this = this
  89.         let ids = this.getQueryVariable("id")
  90.         // console.log(ids)
  91.         axios.get("./json/data.json").then(function (res) {
  92.           let aData = res.data.filter(function(e){
  93.             return e.id == ids
  94.           })
  95.           _this.audioData = aData[0]
  96.           // console.log(_this.audioData,res.data)
  97.           document.title = _this.audioData.album
  98.         }).catch(function (error) {
  99.         });
  100.         //监听播放
  101.         audioContent.addEventListener('ended',function(){
  102.           // let index = _this.current + 1
  103.           // let src = _this.audioData.music[index].musicurl
  104.           // console.log(index,src)
  105.           // _this.playAudio(index , src)
  106.           _this.isPlaying = false
  107.         })
  108.       },
  109.       methods:{
  110.         getQueryVariable(variable){
  111.           let query = window.location.search.substring(1);
  112.           let vars = query.split("&");
  113.           for (let i = 0; i < vars.length; i++) {
  114.             let pair = vars[i].split("=");
  115.             if (pair[0] == variable) { return pair[1]; }
  116.           }
  117.           return (false);
  118.         },
  119.         playAudio(index,src){
  120.           // console.log(this.current,index)
  121.           if(this.current == index && this.isPlaying){
  122.             audioContent.pause();
  123.             this.isPlaying = false
  124.             return
  125.           }
  126.           if(this.current == index && !this.isPlaying){
  127.             audioContent.play();
  128.             this.isPlaying = true
  129.             return
  130.           }
  131.           if(this.current !== index){
  132.             audioContent.src = src;
  133.             audioContent.play();
  134.             this.isPlaying = true
  135.             this.current = index
  136.             return
  137.           }
  138.         }
  139.       }
  140.     })
  141.   </script>
  142. </body>
  143. </html>
复制代码
最佳答案
2022-1-2 20:07:23
本帖最后由 suchocolate 于 2022-1-2 20:18 编辑

这个页面把数据都放到json里了:
  1. import requests

  2. headers = {'Uer-agent': 'Mozilla/5.0'}
  3. # 总页面:https://tstt.dolphinmedia.cn/wap/dibble/index.html?id=36
  4. # 数据页面url在总页码的html里搜 data.json就知道具体位置了。
  5. url = 'https://tstt.dolphinmedia.cn/wap/dibble/json/data.json'
  6. r = requests.get(url, headers=headers)
  7. print(r.text)

复制代码
Untitled.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2021-12-29 18:37:31 From FishC Mobile | 显示全部楼层
爬虫也是模拟浏览器,如果浏览器做不到,爬虫也做不到
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-12-30 11:18:54 | 显示全部楼层

数据源链接:  戳我前进
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-1-2 20:07:23 | 显示全部楼层    本楼为最佳答案   
本帖最后由 suchocolate 于 2022-1-2 20:18 编辑

这个页面把数据都放到json里了:
  1. import requests

  2. headers = {'Uer-agent': 'Mozilla/5.0'}
  3. # 总页面:https://tstt.dolphinmedia.cn/wap/dibble/index.html?id=36
  4. # 数据页面url在总页码的html里搜 data.json就知道具体位置了。
  5. url = 'https://tstt.dolphinmedia.cn/wap/dibble/json/data.json'
  6. r = requests.get(url, headers=headers)
  7. print(r.text)

复制代码
Untitled.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2022-1-3 13:01:54 | 显示全部楼层
suchocolate 发表于 2022-1-2 20:07
这个页面把数据都放到json里了:

大神厉害。您是怎么找到这里的
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-30 20:33

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表