Chapter18

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_ERUDA=true
+VUE_APP_ERUDA=false
 NODE_ENV="development";
 BASE_URL='/'
 VUE_APP_BASE_API="/dev-api"

README.md

@@ -1,4 +1,4 @@
-# dou-yin
+# 视频类WebApp
 
 ## Project setup
 ```

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "babel-plugin-import": "^1.13.0",
     "core-js": "^3.6.5",
     "lib-flexible": "^0.3.2",

public/static/data.json

@@ -0,0 +1,44 @@
+{
+  "list": [
+    {
+        "id": "1",
+        "url": "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",
+        "perLikes": "7008",
+        "perComments": "81",
+        "perForward": "391",
+        "perName": "@小孟儿",
+        "perDesc": "女柚子的比赛之路，报告大家，目前一路顺畅",
+        "perMusicName": "@小孟儿创作的原生"
+      },
+      {
+        "id": "2",
+        "url": "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",
+        "perLikes": "238",
+        "perComments": "6",
+        "perForward": "",
+        "perName": "@克拉拉ClaraLee",
+        "perDesc": "你进今天健身了吗",
+        "perMusicName": "@克拉拉创作的原生"
+      },
+      {
+        "id": "3",
+        "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
+        "perLikes": "5.4w",
+        "perComments": "1401",
+        "perForward": "784",
+        "perName": "@普通闲话",
+        "perDesc": "普通百姓买房子是资产保值增值的最好方面是吗",
+        "perMusicName": "@普通闲话创作的原生"
+      },
+      {
+        "id": "4",
+        "url": "http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4",
+        "perLikes": "2640",
+        "perComments": "734",
+        "perForward": "43",
+        "perName": "@萌宠动漫社",
+        "perDesc": "这哪还是龙啊，就是一只二哈",
+        "perMusicName": "@萌宠动漫社创作的原生"
+      }
+  ]
+}

public/static/me.json

@@ -0,0 +1,89 @@
+{
+    "userInfo": {
+          "name": "前端逗逗飞",
+          "sn": "201509094607",
+          "sub": "带你走进前端开发",
+          "age": "23",
+          "desc": "公众号前端逗逗飞",
+          "tag": "标签",
+          "like": "2",
+          "fans": "20000"
+
+        },
+        "vlist": {
+            "works": [{
+                "id": "001",
+                "url": "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",
+                "icon": "/assets/img/1.png"
+            },
+            {
+              "id": "002",
+              "url": "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",
+              "icon": "/assets/img/1.png"
+          },
+          {
+              "id": "002",
+              "url": "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",
+              "icon": "/assets/img/1.png"
+          },
+          {
+              "id": "003",
+              "url": "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",
+              "icon": "/assets/img/1.png"
+          }
+          ],
+            "movs": [
+              {
+                  "id": "001",
+                  "url": "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",
+                  "icon": "/assets/img/2.png"
+              },
+              {
+                  "id": "002",
+                  "url": "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",
+                  "icon": "/assets/img/2.png"
+              },
+              {
+                  "id": "003",
+                  "url": "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",
+                  "icon": "/assets/img/2.png"
+              },                {
+                  "id": "004",
+                  "url": "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",
+                  "icon": "/assets/img/2.png"
+              }
+            ],
+            "likes": [
+              {
+                  "id": "001",
+                  "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
+                  "icon": "/assets/img/3.png"
+              },
+              {
+                  "id": "002",
+                  "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
+                  "icon": "/assets/img/3.png"
+              },
+              {
+                  "id": "003",
+                  "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
+                  "icon": "/assets/img/3.png"
+              },
+              {
+                  "id": "004",
+                  "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
+                  "icon": "/assets/img/3.png"
+              },
+              {
+                  "id": "005",
+                  "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
+                  "icon": "/assets/img/3.png"
+              },
+              {
+                  "id": "006",
+                  "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
+                  "icon": "/assets/img/3.png"
+              }
+            ]
+        }
+  }

src/App.vue

@@ -6,8 +6,8 @@
 
 <style lang="less">
   #app {
-    height: 100%;
-    background-color: #000;
+    height: 100vh;
+    background-color: #101821;
     p {
       margin-top: 5px;
       margin-bottom: 5px;

src/assets/fonts/iconfont.css

@@ -1,10 +1,10 @@
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1599093955247'); /* IE9 */
-  src: url('iconfont.eot?t=1599093955247#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('iconfont.woff?t=1599093955247') format('woff'),
-  url('iconfont.ttf?t=1599093955247') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1599093955247#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1614668528569'); /* IE9 */
+  src: url('iconfont.eot?t=1614668528569#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1614668528569') format('woff'),
+  url('iconfont.ttf?t=1614668528569') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1614668528569#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -15,6 +15,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bqxin:before {
+  content: "\e68c";
+}
+
 .icon-tanhao:before {
   content: "\e690";
 }

src/assets/fonts/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "106851",
+      "name": "心",
+      "font_class": "bqxin",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
     {
       "icon_id": "2057047",
       "name": "叹号",

src/common/components/index/InfoBar.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="info-bar">
-    <div class="infobar-item">逗逗飞</div>
-    <div class="infobar-item">Vue 从0到1 实战</div>
+    <div class="infobar-item">{{item.perName}}</div>
+    <div class="infobar-item">{{item.perDesc}}</div>
     <div class="infobar-item music-item">
       <span class="iconfont icon-douyinbiaoshishang"></span>
       <div class="music-name">
-        <span data-text="千岛群岛群无多">千岛群岛群无多</span>
+        <span data-text="千岛群岛群无多">{{item.perMusicName}}</span>
       </div>
     </div>
   </div>
@@ -14,6 +14,14 @@
 <script>
 export default {
   name: 'InfoBar',
+  props: {
+    item: { // 父组件通过props将数据传递到子组件
+      type: Object,
+      default() { // 默认为空对象
+        return {};
+      },
+    },
+  },
 };
 </script>