|
|
@@ -0,0 +1,85 @@
|
|
|
+<!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>
|
|
|
+ /* css reset */
|
|
|
+ *{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ width: 200px;
|
|
|
+ padding: 30px;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
+ margin: 30px;
|
|
|
+ }
|
|
|
+ .goods-img img{
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ .goods-title{
|
|
|
+ font-size: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .goods-desc,.goods-price{
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <ul>
|
|
|
+ <li v-for="item in goodsList">
|
|
|
+ <div class="goods-img">
|
|
|
+ <img v-bind:src="item.pic" alt="商品图片">
|
|
|
+ </div>
|
|
|
+ <h2 class="goods-title">{{item.prodName}}</h2>
|
|
|
+ <p class="goods-desc">{{item.brief}}</p>
|
|
|
+ <p class="goods-price">¥{{item.price}}</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+ <script src="./js/ajax.js"></script>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data:{
|
|
|
+ goodsList:[]
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ // 调用获取商品列表方法
|
|
|
+ this.getGoodsList();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // 获取商品列表
|
|
|
+ getGoodsList(){
|
|
|
+ // let _this = this;
|
|
|
+ // 发送ajax请求
|
|
|
+ ajax("GET","http://shop-api.edu.koobietech.com/prod/tagProdList",(res)=>{
|
|
|
+ // 处理响应数据
|
|
|
+ let _goodsList = res.data[0].productDtoList;
|
|
|
+ // console.log(_goodsList);
|
|
|
+ // console.log(_this)
|
|
|
+ // console.log(this);
|
|
|
+ this.goodsList = _goodsList;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
