bs
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>网络数据采集-爬虫</title>
		<!-- 网站说明 -->
		<meta name="description" content="采集,爬虫,豆瓣视频采集,音乐采集,跨站请求,调用官方API" />
		<!-- 关键字 -->
		<meta name="keywords" content="php采集,豆瓣视频采集,音乐,电影"/>
		<meta name="referrer" content="no-referrer" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<!-- jquery -->
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- jQuery Cookie 插件在线地址用于方便获取cookie的值 -->
		<!-- <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> -->
		<script src="js/jquery-cookie.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="biBox">
			<!-- 微信公众号二维码 -->
			<!-- <div class="ads"><img src="img/微信公众号.jpg"/></div> -->
			<!-- 导航栏 -->
			<div id="banner">
				<!-- 网站logon -->
				<div id="logo">
					<img src="img/diylogo1.png">
				</div>
				<!-- 导航栏左边标题 -->
				<div id="title">
					<ul>
						<a href="javascript:void(0);" v-for="(item,index) in navigationBar" @click="changeStyle(index)" :style="index==setIndex?navigationBarStyle:''"
						 v-text="item">首页</a>
					</ul>
				</div>
				<!-- 导航栏右边标题,onclick="return false":表示点击不跳转 -->
				<div id="titleRight">
					<select @click="doSelect($event)" v-if='isGetName!="登录"'>
						<option value ="设置" style="display: none;"></option>
						<option value ="个人中心" style="display: none;">个人中心</option>
						<option value ="后台管理">后台管理</option>
						<option value ="退出登录" >退出登录</option>
					</select>
					<!-- <select v-model="slect-value">
						<option v-for="item in array" :value="item"></option>
					</select> -->
					<a href="login.html" target="_blank" v-text="isGetName"  @click.prevent="isLogged($event)">登录</a>
				</div>
			</div>
			<div id="mainContent">
				<div id="search">
					<!-- <img src="img/search.png" style="width: 30px;height: 30px;margin-left: 82%;float: right;position: absolute;"/> :style="searchStyle"-->
					<input type="search" v-model="valueSearch" placeholder="输入关键字/按下Enter搜索" @keyup.enter="doSearch" class="search"/>
				</div>
				<strong id="newRecommend">正在热映</strong>
				<!-- rotationArr[rotationIndex]!=null:这句是判断数组是否为空,如果为空,则不进行数据渲染,
				因为数据是从后台获取的，请求数据需要时间,没有获得数据之前就进行渲染会报这样的错误
				(Error in render: "TypeError: Cannot read property 'XXXXX' of undefined")
				 -->
				<!-- 头部显示区域轮番 -->
				<div id="rotation" v-if="rotationArr[rotationIndex]!=null">
					<!-- 轮播图片 -->
					<div id="image">
						<!-- style="object-fit: cover; cover等比缩放, none-->
						<img :src="rotationArr[rotationIndex].image"  @click="play(rotationArr[rotationIndex].title,rotationArr[rotationIndex].url)" @mouseover="oStop" @mouseout="oStart">
					</div>
					<!-- 轮播图片对应内容 -->
					<div id="content">
						<div id="nr">
							<!-- 左右切换图片按钮 -->
							<input type="button" value="<" @click='left' @mouseover="oStop" @mouseout="oStart"/>
							<input type="button" value=">" @click='right' @mouseover="oStop" @mouseout="oStart"/>
							<h3 v-text="rotationArr[rotationIndex].title">哪吒</h3>
							<span v-text="rotationArr[rotationIndex].rate==null?'暂无评分':rotationArr[rotationIndex].rate+'分'">3.5分</span>
						</div>
						<a href="Javascript:void(0)" target="_blank" @click="details(rotationArr[rotationIndex].url,rotationArr[rotationIndex].title,rotationArr[rotationIndex].image,$event)">了解详情---&gt;</a>
					</div>
				</div>
				<!-- 列表区域 -->
				<div id="list">
					<div id="hotMovieList">
						<strong v-text="videoNavigationTitle">热门电影</strong>
						<!-- 下拉选择列表 -->
						<select name="slectVideoType" @click="getSelectIndex($event)">
							<option value="movie">热门电影</option>
							<option value="tv">热门电视</option>
						</select>
						<!-- 热门电影状态栏列表 -->
						<ul>
							<li v-for="(hotItme,index) in hotNavigationBar">
								<a href="javascript:void(0)" v-text="hotItme" :style="index==hotSetIndedx?navigationBarStyle:''" @click='hotChangeStyle(index,$event)'></a>
							</li>
						</ul>
					</div>
					<!-- 视频列表 -->
					<div id="listBox" v-for="(hot,index) in hotMovie">
						<div id="listImage">
							<div class="videoplay" @click="play(hot.title,hot.id)"></div>
							<img :src="hot.cover"><br>
							<strong v-text="hot.rate==''?'无评分':hot.rate+'分'"></strong><label>{{hot.title}}<br />
								<a @click="details(hot.id,hot.title,hot.cover,$event)" style="color: #0080CC;">本站评论</a>
								<a @click="comments(hot.id,hot.title,hot.cover,$event)" style="color: hotpink;margin-left: 15px;">豆瓣评论</a></label>
						</div>
					</div>
				</div>
				<!-- 上下页翻页 -->
				<div id="more">
					<a href="javascript:void(0)" @click='addContent($event)'>上一页</a>
					<a href="javascript:void(0)" v-text="loadingTip" @click="loadMore">点击加载更多</a>
					<a href="javascript:void(0)" @click='addContent($event)'>下一页</a>
				</div>
			</div>
			<!-- 页尾网站信息布局 -->
			<div id="footer">
				<div id="footerLeft">
					<span><img style="width: 40px;height: 40px;border-radius: 20px;vertical-align: middle;" src="img/qqhead.jpg" /></span>
					<a href='tencent://message/?uin=1724940500&Site=&Menu=yes' title="点击与开发者聊一聊">开发者QQ:1724940500</a>
				</div>
				<div id="footerMind">
					<div>
						<span>本站提供的播放资源均采集于互联网,本站只提供web页面服务。网站正在陆续完善中</span>
						<a href="app/index.html" style="color: yellow;">(Android手机客户端下载)</a>
					</div>
				</div>
				<div id="footerRight">
					<button type="button" onclick="javascript:location='#newRecommend'">^</button>
					<div class="ads"><img title="微信公众号" src="img/微信公众号.jpg"/></div>
				</div>
			</div>
		</div>
	</body>
	<!-- js实现代码-->
	<script type="text/javascript" src="js/index.js"></script>
</html>