index Final

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+public/mock
 
 # local env files
 .env.local

package-lock.json

@@ -2062,6 +2062,37 @@
       "integrity": "sha1-fjPY99RJs/ZzzXLeuavcVS2+Uo4=",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.19.2.tgz",
+      "integrity": "sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
+          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1580082237027&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
+          "integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1582676223200&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "fastclick": "^1.0.6",
     "path": "^0.12.7",

src/pages/home/components/Header.vue

@@ -6,13 +6,18 @@
     <div class="header-input">
       <span class="iconfont search-icon">&#xe63c;</span>输入城市景点游玩主题
     </div>
-    <div class="header-right">城市<span class="iconfont">&#xe65c;</span></div>
+    <div class="header-right">
+      {{ this.city }}<span class="iconfont">&#xe65c;</span>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "HomeHeader"
+  name: "HomeHeader",
+  props: {
+    city: String
+  }
 };
 </script>
 

src/pages/home/components/Icons.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="icons">
-    <swiper>
+    <swiper :options="swiperOption">
       <swiper-slide v-for="(page, index) of pages" :key="index">
         <div class="icon" v-for="item of page" :key="item.id">
           <div class="icon-img">
@@ -16,58 +16,21 @@
 <script>
 export default {
   name: "HomeIcons",
+  props: {
+    list: Array
+  },
   data: function() {
     return {
-      iconList: [
-        {
-          id: "0001",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
-          desc: "景点门票"
-        },{
-          id: "0002",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png",
-          desc: "万龙滑雪"
-        },{
-          id: "0003",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png",
-          desc: "故宫"
-        },{
-          id: "0004",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png",
-          desc: "静之湖滑雪"
-        },{
-          id: "0005",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
-          desc: "一日游"
-        },{
-          id: "0006",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1803/67/9a1678221b8e0e02.png",
-          desc: "古北水镇"
-        },{
-          id: "0007",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png",
-          desc: "北京滑雪"
-        },{
-          id: "0008",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png",
-          desc: "陶然亭冰雪"
-        },{
-          id: "0009",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
-          desc: "泡温泉"
-        },{
-          id: "0010",
-          imgUrl:"https://imgs.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png",
-          desc: "中国马镇"
-        }
-      ]
-    };
+      swiperOption: {
+        autoplay: false
+      }
+    }
   },
   computed: {
     // 将页面分为开，8个为一页
     pages: function() {
       const pages = [];
-      this.iconList.forEach((item, index) => {
+      this.list.forEach((item, index) => {
         // 取余
         const page = Math.floor(index / 8);
         // 判断数组是否为空，为空则创建二维数组

src/pages/home/components/Recommend.vue

@@ -3,11 +3,7 @@
     <div class="title">热销推荐</div>
     <ul>
       <!-- 这里的border-bottom是reset.css中的样式，为li标签下方添加1像素边框 -->
-      <li
-        class="item border-bottom"
-        v-for="item of recommendList"
-        :key="item.id"
-      >
+      <li class="item border-bottom" v-for="item of list" :key="item.id">
         <img class="item-img" :src="item.imgUrl" />
         <div class="item-info">
           <p class="item-title">{{ item.title }}</p>
@@ -22,46 +18,8 @@
 <script>
 export default {
   name: "HomeRecommend",
-  data: function() {
-    return {
-      recommendList: [
-        {
-          id: "0001",
-          imgUrl:
-            "https://imgs.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_250x250_50c99cf3.jpg",
-          title: "八达岭长城",
-          desc: "不到长城非好汉，将壮观诠释到完美"
-        },
-        {
-          id: "0002",
-          imgUrl:
-            "http://img1.qunarzz.com/sight/p0/1809/10/10d6568ad3ad4bb5a3.img.jpg_200x200_c6c1ed20.jpg",
-          title: "亚龙湾热带天堂森林公园",
-          desc: "您身边的天然森林氧吧"
-        },
-        {
-          id: "0003",
-          imgUrl:
-            "http://img1.qunarzz.com/sight/p0/1812/66/664b5e8f234743dda3.water.jpg_200x200_b7e57d57.jpg",
-          title: "三亚千古情景区",
-          desc: "置身传统黎村，领略黎族风情"
-        },
-        {
-          id: "0004",
-          imgUrl:
-            "http://img1.qunarzz.com/sight/p0/1802/1a/1a20dce5e03251cea3.img.jpg_200x200_3132798c.jpg",
-          title: "亚特兰蒂斯失落的空间水族馆",
-          desc: "失落的空间水族馆邀您一同揭开千年之谜"
-        },
-        {
-          id: "0005",
-          imgUrl:
-            "http://img1.qunarzz.com/sight/p0/1811/2f/2f9b29981c3c9f85a3.img.jpg_200x200_9d91fda5.jpg",
-          title: "蜈支洲岛",
-          desc: "带上心爱的人来浪漫情人岛吧~"
-        }
-      ]
-    };
+  props: {
+    list: Array
   }
 };
 </script>

src/pages/home/components/Swiper.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="wrapper">
-    <swiper :options="swiperOption">
+    <swiper :options="swiperOption" v-if="showSwiper">
       <!-- slides -->
-      <swiper-slide v-for="item of swiperList" v-bind:key="item.id">
+      <swiper-slide v-for="item of list" v-bind:key="item.id">
         <img class="Swiper-img" v-bind:src="item.imgUrl" />
       </swiper-slide>
       <!-- Optional controls -->
@@ -15,25 +15,22 @@
 <script>
 export default {
   name: "HomeSwiper",
+  props: {
+    list: Array
+  },
   data: function() {
     return {
       swiperOption: {
         pagination: ".swiper-pagination",
         loop: true
-      },
-      swiperList: [
-        {
-          id: "0001",
-          imgUrl:
-            "https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201912/0b26e9760c2673c63c05e1efce1275ea.jpg_750x200_495c0a72.jpg"
-        },
-        {
-          id: "0002",
-          imgUrl:
-            "https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/64d0b9e87e685d864add20d75c81bcc9.jpg_750x200_7a0937d7.jpg"
-        }
-      ]
+      }
     };
+  },
+  // 避免出现逻辑性的代码
+  computed: {
+    showSwiper: function() {
+      return this.list.length;
+    }
   }
 };
 </script>

src/pages/home/components/Weekend.vue

@@ -2,12 +2,8 @@
   <div>
     <div class="title">周末去哪儿</div>
     <ul>
-      <li
-        class="item border-bottom"
-        v-for="item of recommendList"
-        :key="item.id"
-      >
-        <div id="item-img-wrapper">
+      <li class="item border-bottom" v-for="item of list" :key="item.id">
+        <div class="item-img-wrapper">
           <img class="item-img" :src="item.imgUrl" />
         </div>
         <div class="item-info">
@@ -22,58 +18,21 @@
 <script>
 export default {
   name: "HomeWeekend",
-  data: function() {
-    return {
-      recommendList: [
-        {
-          id: "0001",
-          imgUrl:
-            "http://img1.qunarzz.com/sight/source/1812/e1/28d418ecf6e535.jpg_r_640x214_77e18cdc.jpg",
-          title: "情侣约会圣地",
-          desc: "你听，鸟语！你闻，花香！你听，海浪。你看，我的对面，是你……"
-        },
-        {
-          id: "0002",
-          imgUrl:
-            "http://img1.qunarzz.com/sight/p0/1501/a2/a2a129584cebcadb.img.jpg_r_640x214_329ee163.jpg",
-          title: "温泉不撞样",
-          desc: "三亚温泉是真正与大自然同生息的热带花园"
-        },
-        {
-          id: "0003",
-          imgUrl:
-            "http://img1.qunarzz.com/sight/source/1505/5e/6e13db8af6ec30.jpg_r_640x214_5c1b0fa9.jpg",
-          title: "三亚必打卡",
-          desc: "三亚温泉是真正与大自然同生息的热带花园"
-        },
-        {
-          id: "0004",
-          imgUrl:
-            "http://img1.qunarzz.com/sight/source/1505/3e/a588a413145dbe.jpg_r_640x214_b3729b6e.jpg",
-          title: "小清新帆船出海",
-          desc: "完整体验驾驶帆船出海的乐趣，感受不一样的海上休闲，体验无限驰骋的空间"
-        },
-        {
-          id: "0005",
-          imgUrl:
-            "http://img1.qunarzz.com/sight/source/1602/bf/a2ac57b8bfe7cd.jpg_r_640x214_406d4c7e.jpg",
-          title: "城会玩儿游艇大趴",
-          desc: "想不想和小伙伴们来一场刺激又好玩的游艇旅行，这里有最具特色的游艇大趴"
-        }
-      ]
-    };
+  props: {
+    list: Array
   }
-}
+};
 </script>
 
 <style lang="stylus" scoped>
 .title
-  margin-top .2rem
   line-height .8rem
   background #eeeeee
   text-indent .2rem
 .item-img-wrapper
   overflow hidden
+  height 0
+  padding-bottom 37.09%
   .item-img
     width 100%
 .item-info
@@ -87,4 +46,4 @@ export default {
     font-size .25rem
     color #cccccc
     ellipsis()
-</style>
+</style>

src/pages/home/home.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <home-header></home-header>
-    <home-swiper></home-swiper>
-    <home-icons></home-icons>
-    <home-recommend></home-recommend>
-    <home-weekend></home-weekend>
+    <home-header :city="city"></home-header>
+    <home-swiper :list="swiperList"></home-swiper>
+    <home-icons :list="iconList"></home-icons>
+    <home-recommend :list="recommendList"></home-recommend>
+    <home-weekend :list="weekendList"></home-weekend>
   </div>
 </template>
 
@@ -14,7 +14,8 @@ import HomeHeader from "./components/Header";
 import HomeSwiper from "./components/Swiper";
 import HomeIcons from "./components/Icons";
 import HomeRecommend from "./components/Recommend";
-import HomeWeekend from "./components/Weekend"
+import HomeWeekend from "./components/Weekend";
+import axios from "axios";
 
 export default {
   //单页组件名
@@ -26,6 +27,35 @@ export default {
     HomeIcons: HomeIcons,
     HomeRecommend: HomeRecommend,
     HomeWeekend: HomeWeekend
+  },
+  data: function() {
+    return {
+      city: "城市",
+      swiperList: [],
+      iconList: [],
+      recommendList: [],
+      weekendList: []
+    };
+  },
+  methods: {
+    getHomeInfo: function() {
+      axios.get("/api/index.json").then(this.getHomeInfoSucc);
+    },
+    getHomeInfoSucc: function(res) {
+      res = res.data;
+      if (res.ret && res.data) {
+        const data = res.data;
+        this.city = data.city;
+        this.swiperList = data.swiperList;
+        this.iconList = data.iconList;
+        this.recommendList = data.recommendList;
+        // 发现一个彩蛋：如果这里没有在data指定weekendList，实际上也是可以直接操纵传值数据的
+        this.weekendList = data.weekendList;
+      }
+    }
+  },
+  mounted: function() {
+    this.getHomeInfo();
   }
 };
 </script>

vue.config.js

@@ -1,3 +1,4 @@
+// vue.config.js文件被修改后需要重启Vue服务
 const path = require("path");
 function resolve(dir) {
   return path.join(__dirname, dir);
@@ -8,5 +9,16 @@ module.exports = {
       .set("@", resolve("src"))
       .set("styles", resolve("src/assets/styles"));
   },
-  lintOnSave: false
+  lintOnSave: false,
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+        pathRewrite: {
+          "^/api": "/mock"
+        }
+      }
+    }
+  }
 };