master

分支 (1)

管理

管理

master

heima_vue
/
index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>黑马购物商场</title>
	<link rel="stylesheet" href="http://shop.com:5500/resources/css/bootstrap.min.css" type="text/css" />
	<script src="http://shop.com:5500/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script src="http://shop.com:5500/resources/js/bootstrap.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://shop.com:5500/resources/js/jquery-heima-0.0.1.js"></script>
	<script type="text/javascript" src="http://shop.com:5500/resources/js/heima-include.js"></script>
	<script type="text/javascript" src="http://shop.com:5500/resources/js/vue.js"></script>
</head>

<body>
	<div class="container-fluid">
		<div id="header" style="min-height: 130px;"></div>
		<!--
            	描述：轮播条
            -->
		<div class="container-fluid">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="http://shop.com:5500/resources/products/hao/1.jpg">
						<div class="carousel-caption">

						</div>
					</div>
					<div class="item">
						<img src="http://shop.com:5500/resources/products/hao/2.jpg">
						<div class="carousel-caption">

						</div>
					</div>
					<div class="item">
						<img src="http://shop.com:5500/resources/products/hao/3.jpg">
						<div class="carousel-caption">

						</div>
					</div>
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
		<!--
            	描述：商品显示
            -->
		<div class="container-fluid">
			<div class="col-md-12">
				<h2>热门商品&nbsp;&nbsp;<img src="http://shop.com:5500/resources/img/title2.jpg" /></h2>
			</div>
			<div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;">
				<img src="http://shop.com:5500/resources/products/hao/big01.jpg" width="205" height="404"
					style="display: inline-block;" />
			</div>
			<div class="col-md-10" id="hot_product">
				<!-- <div class="col-md-6" style="text-align:center;height:200px;padding:0px;">
						<a href="product_info.htm">
							<img src="http://shop.com:5500/resources/products/hao/middle01.jpg" width="516px" height="200px" style="display: inline-block;">
						</a>
					</div> -->

				<!-- <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="http://shop.com:5500/resources/products/hao/small03.jpg" width="100" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div> -->
			</div>
		</div>
		<!--
            	描述：广告部分
            -->
		<div class="container-fluid">
			<img src="http://shop.com:5500/resources/products/hao/ad.jpg" width="100%" />
		</div>
		<!--
            	描述：商品显示
            -->
		<div id="footer" style="min-height: 203px;"></div>
	</div>
	<script>
		// 入口函数
		$(function () {
			$.ajax({
				url: "http://api.shop.com:8080/product?md=findhot",
				type: "post",
				success: function (response) {
					// 处理字符串
					var hots = eval("(" + response + ")");

					// console.log(response);
					// alert(response);
					//拿到数组
					var hotlist = hots.data;
					var html = "";
					// 遍历数组
					for (p of hotlist) {
						html += "<div class=\"col-md-2\" style=\"text-align:center;height:200px;padding:10px 0px;\">\n" +
							"\t\t\t\t\t\t<a href=\"/view/product/info.html?pid=" + p.pid + "\">\n" +
							"\t\t\t\t\t\t\t<img src=\"http://shop.com:5500/" + p.pimage + "\" width=\"100\" height=\"130\" style=\"display: inline-block;\">\n" +
							"\t\t\t\t\t\t</a>\n" +
							"\t\t\t\t\t\t<p><a href=\"/view/product/info.html?pid=" + p.pid + "\" style='color:#666'>" + p.pname + "</a></p>\n" +
							"\t\t\t\t\t\t<p><font color=\"#E4393C\" style=\"font-size:16px\">&yen;" + p.shop_price + "</font></p>\n" +
							"\t\t\t\t\t</div>";
					}
					$("#hot_product").append(html);
				}
			})
		})
	</script>
</body>

</html>