记实训（二）

最新推荐文章于 2022-03-23 17:52:04 发布

qq_45785543

最新推荐文章于 2022-03-23 17:52:04 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/qq_45785543/article/details/103230375

版权

实训虽已过去，但我还是记忆犹新。上周分享了python爬取数据的源码，这周就分享以下后端可视化对应的全段代码叭！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style type="text/css">
			.tubiao {
				text-align: right;
			}

			.anniu {
				width: 40%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.anniu > div {

				height: 100%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}
			.mui-input-row {
				width: 86%;
			}

			.news {
			width: 100%;
			height: 380px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			}
			.news > div {
			width: 18%;
			height: 90%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			}
			.news > div > img {
			width: 100%;
			height: 100%;
			}


		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">
				<div class="tubiao">
					<span class="mui-icon mui-icon-reload"></span>
					<span class="mui-icon mui-icon-download"></span>
					<span class="mui-icon mui-icon-gear"></span>
					<span class="mui-icon mui-icon-redo"></span>
				</div>
			</h1>
			<div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="吴亦凡杨紫簪中录">
			</div>
			</h1>
		</header>

		<div class="mui-input-row">
			<label></label>
			<label></label>
			<input type="text" placeholder="">
		</div>

		<div class="anniu">
			<div>
				<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">首页</button>
			</div>
			<div>
				<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">喜剧</button>
			</div>
			<div>
				<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">悬疑</button>
			</div>
			<div>
				<button type="button" class="mui-btn mui-btn-blue">动作</button>
			</div>
			<div>
				<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">惊悚</button>
			</div>
			<div>
				<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">爱情</button>
			</div>

		</div>


	</body>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery.sql.js"></script>
	<script type="text/javascript" src="down.js"></script>
	<script type="text/javascript">
    // 第一步: 82~84行
	var xhr = new XMLHttpRequest(); // JS语法严格区分大小写
	xhr.open('GET', 'movie.db', true); // 标准的ajax的代码
	xhr.responseType = 'arraybuffer';

	// 定义查询数据库代码
	function queryBy(sql, t) {
		var uInt8Array = new Uint8Array(t.response);
		var db = new SQL.Database(uInt8Array);
		var content = db.exec(sql);
		return content;
	}

	// 第二步: 读取数据,进行数据渲染
	function templateHTML(content, name) {
		moviedata = content[0].values; // 数据库里面的数据
		console.log(moviedata); // 数据测试
		html = '<div class="news">';
		for (i = 0; i < moviedata.length; i++) {
			html += '<div>';
			html += '<img src="'+ moviedata[i][1] +'">';
			html += '<span>'+ moviedata[i][0] +'</span>';
			html += '</div>';
		}
		html += '</div>';
		$("body").append(html);
	}

	// 第三步: 发送SQL语句
	xhr.onload = function(e) {
		content = queryBy('select * from movie limit 5 offset 0', this);
		templateHTML(content, 'main_recommand');

		content = queryBy('select * from movie limit 5 offset 5', this);
		templateHTML(content, 'main_recommand');

		content = queryBy('select * from movie limit 5 offset 10', this);
		templateHTML(content, 'main_recommand');
	}

	// 第四步: 执行
	xhr.send();
</script>
</html>

qq_45785543

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记实训（二）

实训虽已过去，但我还是记忆犹新。上周分享了python爬取数据的源码，这周就分享以下后端可视化对应的全段代码叭！<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-...
复制链接

扫一扫