|
|
@@ -0,0 +1,116 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .box{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .goods-card {
|
|
|
+ width: 234px;
|
|
|
+ box-shadow: 0 0 5px gray;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-pic img {
|
|
|
+ width: 234px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-title,
|
|
|
+ .goods-info,
|
|
|
+ .goods-price {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-title {
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-info {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b0b0b0;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-wrap: nowrap;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-price {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-price span {
|
|
|
+ color: #ff6700;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-price del {
|
|
|
+ color: #b0b0b0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+ // 第一个步创建XMLHttpRequest对象
|
|
|
+ let xhr = new XMLHttpRequest();
|
|
|
+ // 第二个步调用open方法配置请求信息
|
|
|
+ xhr.open("GET", "http://shop-api.edu.koobietech.com/prod/tagProdList");
|
|
|
+ // 第三步发送请求
|
|
|
+ xhr.send();
|
|
|
+ // 第四步监听响应
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ if (xhr.readyState == 4 && xhr.status == 200) {
|
|
|
+ let jsonStr = xhr.responseText;
|
|
|
+ // 服务端返回的数据为JSON字符串
|
|
|
+ // 把JSON字符串转换为对象
|
|
|
+ let obj = JSON.parse(jsonStr);
|
|
|
+ console.log(obj.data[0].productDtoList);
|
|
|
+ let productDtoList = obj.data[0].productDtoList;
|
|
|
+ let htmlStr = ""
|
|
|
+ let oBox = document.querySelector(".box");
|
|
|
+ productDtoList.forEach(function (val) {
|
|
|
+ htmlStr += `
|
|
|
+ <div class="goods-card">
|
|
|
+ <div class="goods-pic">
|
|
|
+ <img src="${val.pic}" alt="phone">
|
|
|
+ </div>
|
|
|
+ <div class="goods-title">
|
|
|
+ <span>${val.prodName}</span>
|
|
|
+ </div>
|
|
|
+ <div class="goods-info">
|
|
|
+ ${val.brief}
|
|
|
+ </div>
|
|
|
+ <div class="goods-price">
|
|
|
+ <span>${val.price}元起</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ });
|
|
|
+ oBox.innerHTML = htmlStr;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
