|
|
@@ -0,0 +1,125 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+ <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 id="app">
|
|
|
+ <button @click="getData">获取商品列表</button>
|
|
|
+ <div class="box">
|
|
|
+ <div class="goods-card" v-for="item in productDtoList">
|
|
|
+ <div class="goods-pic">
|
|
|
+ <img v-bind:src="item.pic" alt="phone">
|
|
|
+ </div>
|
|
|
+ <div class="goods-title">
|
|
|
+ <span>{{item.prodName}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="goods-info">
|
|
|
+ {{item.brief}}
|
|
|
+ </div>
|
|
|
+ <div class="goods-price">
|
|
|
+ <span>¥{{item.price}}</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ productDtoList: []
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ // 定义that指向vue实例
|
|
|
+ let that = this;
|
|
|
+ // 第一个步创建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);
|
|
|
+ // 将获取到的值放到data中
|
|
|
+ that.productDtoList = obj.data[0].productDtoList
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
