零基础小白亦可编写解析demo

前言

很久没有写博客了，今天分享的是前段时间，无聊整的一个解析项目，那这个有啥功能呢？这个问题问的非常好，解析顾名思义，也就是可以解析相关资源，好的闲话不多说直接上部分代码：仅供参考（源码资源已经上传到CSDN，需要的小伙伴，自己下载）

vip影视解析，部分代码展示及操作界面。

一、操作演示

前端页面显示，具体操作请看教程，下方是托管的在线演示demo。

打包源码看这里:点我传送.

二、部分代码

1.前端html

代码如下（示例）：

<div id='app'><van-sticky ><van-notice-bar scrollable="true"   left-icon="volume-o" text="感谢您的使用，如有任何问题，邮箱联系站长"></van-notice-bar><div><van-search v-model="selectUrl" shape="round" background="#4fc08d" placeholder="粘贴网页播放地址点击播放"  show-action ><template #action><select v-model="selected"><option v-for="(value,index) in urlsObject" :key="index" :value="value.url" v-text="value.text"></option></select></template></van-search></div></van-sticky>    <div style="margin-top: 40px;"><van-row type="flex" justify="space-between"><van-col span="6" > <van-button type="primary" @click="play"><span class="glyphicon glyphicon-play-circle" aria-hidden="true">播放</span></van-button></van-col><van-col span="6"> <van-button type="primary"@click="showPopup"><span class="glyphicon glyphicon-cog" aria-hidden="true">接口</span></van-button></van-col><van-col span="6"> <van-button type="primary" @click="getMoney()" v-text="des"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true">微信小店（扫码查看）</span></van-button></van-col><van-button type="primary" @click="eduflag=!eduflag;jiaochengSrc='https://7875-xu123-1257701916.tcb.qcloud.la/08ee76fb1959312c40ac09723e21fd61.mp4?sign=ff9e7351fa3c8ef694c944deac21d82d&t=1619515311'"><span class="glyphicon glyphicon-book" aria-hidden="true">教程</span></van-button></van-row></div><div class="zan" v-show="flag"><van-image  :src="zanzhumaSrc"  v-show="flag"><template v-slot:loading><van-loading type="spinner" size="20" /></template></van-image></div>     <div style="text-align: center;" v-show="eduflag"><video v-show="eduflag" style="width:80rpx;height:50rpx;"  :src="jiaochengSrc" controls></video></div><!--弹出框内容--><div v-show="danmushow"><van-popup  v-model="show" position="top" :style="{ height: '100px' }"   closeable close-icon="close"><van-cell-group><van-fieldv-model="keyWords"label="密码"left-icon="https://cdn.jsdelivr.net/gh/coldfrontXu/movies/file-lock2.svg"type="password"placeholder="请填写密码"/></van-cell-group><div style="margin-top: 25px;" v-show="danmushow"><van-row type="flex" justify="space-between"  ><van-col span="3.5"> <van-button type="primary" size="small" @click="getUrls" >确定</van-button></van-col><van-col span="3.5"> <van-button type="danger" size="small" @click="cancel">取消</van-button></van-col></van-row></div></van-popup></div>   <!--iframe播放位置--><main id="main-404-content" class="main-content-particle-js"><iframe name="iframes" v-if="ifrmeShow" id="palybox" :src="ifrmeUrl" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen="true"></iframe></main><!--描述信息--><h4 style="color: blue;">适用于解析以下资源:</h4><!--适用于一下平台--><div style="text-align: center;margin-top: 20px;border: 3px dashed rgb(49, 156, 218);"><div style="margin-top:20px;"><van-row gutter="20" ><van-col span="6"><van-image width="60" height="30" lazy-load   src="https://cdn.jsdelivr.net/gh/coldfrontXu/movies/aiqiyi.png"><template v-slot:loading><van-loading type="spinner" size="20" /></template></van-image><div><a href="https://www.iqiyi.com" style="color: green" target="_blank">爱奇艺</a></div></van-col><van-col span="6"><van-image width="60" height="30"  lazy-load src="https://cdn.jsdelivr.net/gh/coldfrontXu/movies/tengxun.png"><template v-slot:loading><van-loading type="spinner" size="20" /></template></van-image><div><a href="https://v.qq.com" style="color: #31e4ca" target="_blank">腾讯视频</a></div></van-col><van-col span="6"><van-image width="60" height="30"  lazy-load  src="https://cdn.jsdelivr.net/gh/coldfrontXu/movies/youku.png"><template v-slot:loading><van-loading type="spinner" size="20" /></template></van-image><div><a href="https://www.youku.com" style="color: #0d7fdf" target="_blank">优酷视频</a></div></van-col><van-col span="6"><van-image width="60" height="30"  lazy-load  src="https://cdn.jsdelivr.net/gh/coldfrontXu/movies/bilibili.png"><template v-slot:loading><van-loading type="spinner" size="20" /></template></van-image><div><a href="https://www.bilibili.com" style="color: #f1146c" target="_blank">哔哩哔哩</a></div></van-col></van-row></div></div>
</div>

总结

没啥技术难点，前端界面主要采用了vant的前端框架。因前段时间想白嫖追一下最近比较火的电影和电视剧，就随便写了一个简约版的，很适合前端小白练习。喜欢的小伙伴可自行下载到本地直接使用，也可部署到国内的gitee仓库分享给自己的好友一起使用，下次追剧再也不用担心没有VIP了。

打包源码看这里:点我传送.