假面的假面 发表于 2021-12-29 14:31:48

爬虫求助。。。vue框架

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

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



<html lang="zh-CN" class="pixel-ratio-1 watch-active-state">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title></title>
<meta name="description" content="启蒙听听,智能故事机">
<meta name="keywords" content="启蒙云店,启蒙听听,智能故事机">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta name="applicable-device" content="mobile">
<script src="https://res.wx.qq.com/open/js/jweixin-1.5.0.js"></script>
<script>
    (function (win,doc){
      if (!win.addEventListener) return;
      var html=document.documentElement;
      function setFont()
      {
      var cliWidth=html.clientWidth;
      html.style.fontSize=100*(cliWidth/750)+'px';
      }
      win.addEventListener('resize',setFont,false);
      setFont();
    })(window,document);
</script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrap" id="app">
    <div class="header">
      <img src="./imgs/logo.png" alt="海豚传媒" class="logo">
      <h1>海豚传媒点播系统升级啦！</h1>
    </div>
    <div class="code">
      <p class="txt">
      <span>微信小程序，体验稳定流畅！</span>
      <span>自动收藏，下次直接收听！</span>
      <span>海量资源，等你免费畅享！</span>
      </p>
      <div class="tingcode">
      <img :src="audioData.codeurl" alt="海豚听书小程序">
      <p>关注后即可体验</p>
      </div>
    </div>
    <div class="con">
      <h2 class="tit">{{audioData.album}}</h2>
      <ul class="list-audio">
      <li v-bind:class="" v-for="(item , index) in audioData.music" :key="item.id"   @click="playAudio(index,item.musicurl)">
          <span class="num">{{index < 9 ? '0'+(index+1) : (index+1) }}</span>
          <span class="name">{{item.name}}</span>
          <div class="icon ">
            <span class="paused"></span>
            <img src="./imgs/play.gif" class="play">
          </div>
      </li>
      </ul>
    </div>
    <div class="server">
      <p class="tit">微信扫码添加“海豚童学”服务号<span>免费畅享更多学习资源！</span></p>
      <img src="./imgs/code.png" alt="“海豚童学”服务号" class="code">
      <p class="ps">有任何问题也可以通过“海豚童学”及时反馈！</p>
    </div>
    <div class="footer">
      <p>© Copyright : 2016 - 2017 - All Rights Reserved</p>
      <p>Powered by 海豚传媒股份有限公司 ||鄂ICP备06015671号</p>
    </div>
    <div class="fixbot">
      <p>
      <span>加入海豚书友会（同龄同城群）</span>
      <span>与优秀宝妈一起交流学习〜</span>
      </p>
      <a >立即加入</a>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var audioContent = new Audio()
    var app = new Vue({
      el:'#app',
      data:{
      audioData:{},
      isPlaying:false,
      current:null
      },
      created: function(){
      let _this = this
      let ids = this.getQueryVariable("id")
      // console.log(ids)
      axios.get("./json/data.json").then(function (res) {
          let aData = res.data.filter(function(e){
            return e.id == ids
          })
          _this.audioData = aData
          // console.log(_this.audioData,res.data)
          document.title = _this.audioData.album
      }).catch(function (error) {
      });
      //监听播放
      audioContent.addEventListener('ended',function(){
          // let index = _this.current + 1
          // let src = _this.audioData.music.musicurl
          // console.log(index,src)
          // _this.playAudio(index , src)
          _this.isPlaying = false
      })
      },
      methods:{
      getQueryVariable(variable){
          let query = window.location.search.substring(1);
          let vars = query.split("&");
          for (let i = 0; i < vars.length; i++) {
            let pair = vars.split("=");
            if (pair == variable) { return pair; }
          }
          return (false);
      },
      playAudio(index,src){
          // console.log(this.current,index)
          if(this.current == index && this.isPlaying){
            audioContent.pause();
            this.isPlaying = false
            return
          }
          if(this.current == index && !this.isPlaying){
            audioContent.play();
            this.isPlaying = true
            return
          }
          if(this.current !== index){
            audioContent.src = src;
            audioContent.play();
            this.isPlaying = true
            this.current = index
            return
          }
      }
      }
    })
</script>
</body>
</html>

wp231957 发表于 2021-12-29 18:37:31

爬虫也是模拟浏览器，如果浏览器做不到，爬虫也做不到

Stubborn 发表于 2021-12-30 11:18:54


数据源链接：戳我前进

suchocolate 发表于 2022-1-2 20:07:23

本帖最后由 suchocolate 于 2022-1-2 20:18 编辑

这个页面把数据都放到json里了：import requests

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

假面的假面 发表于 2022-1-3 13:01:54

suchocolate 发表于 2022-1-2 20:07
这个页面把数据都放到json里了：

大神厉害。您是怎么找到这里的
页: [1]
查看完整版本: 爬虫求助。。。vue框架