admin

12_vuecli/mediaapp/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.7.9",
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1"

12_vuecli/mediaapp/src/components/DescComp.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="desc-comp">
+        <div class="desc-text">
+            {{ descText }}
+            <span v-if="isShowMore" @click="showMore">...展开</span>
+        </div>
+    </div>
+</template>
+<style scoped>
+    .desc-text span{
+        color: #111;
+    }
+</style>
+<script>
+export default {
+    data() {
+        return {
+            descText:"",
+            isShowMore:false
+        }
+    },
+    props:["val"],
+    beforeMount() {
+        this.descHandle();
+    },
+    methods: {
+        // 展开事件
+        showMore(){
+            this.descText = this.val;
+            this.isShowMore = false;
+        },
+        descHandle(){
+            if(this.val.length > 80){
+                this.descText = this.val.substring(0,80);
+                this.isShowMore = true;
+            }else{
+                this.descText = this.val;
+            }
+        }
+    },
+}
+</script>

12_vuecli/mediaapp/src/views/tv/TvPage.vue

@@ -23,7 +23,7 @@
                     </div>
                 </div>
                 <div class="tv-desc">
-                     温以凡回到家乡工作，意外遇到了高中同学桑延。久别重逢，两人彼此装不认识，却又一次次巧遇。温以凡遭到隔壁男人骚扰，无奈决定搬家。桑延的公寓被邻居家失火殃及，也需要 
+                     <DescComp :val="testDesc"/>
                 </div>
             </div>
         </div>
@@ -99,10 +99,13 @@
     }
 </style>
 <script>
-import TvRate from "@/components/TvRate.vue"
+import TvRate from "@/components/TvRate.vue";
+import DescComp from "@/components/DescComp.vue";
+import axios from "axios";
 export default {
     data() {
         return {
+            testDesc:"温以凡回到家乡工作，意外遇到了高中同学桑延。久别重逢，两人彼此装不认识，却又一次次巧遇。温以凡遭到隔壁男人骚扰，无奈决定搬家。桑延的公寓被邻居家失火殃及，也需要搬家。桑延和温以凡因此再次相遇，两人决定合租。桑延的毒舌和温以凡的温柔，让彼此的生活都发生了变化。",
             rateObj:{
                 star_count:2.5,
                 value: 0
@@ -112,8 +115,16 @@ export default {
     beforeMount() {
         this.$emit('changePage','1001')
     },
+    created() {
+        axios.get("/api/subject_collection/tv_domestic/items?start=0&count=18").then((res)=>{
+            console.log(res)
+        }).catch((err)=>{
+            console.log(err)
+        })
+    },
     components:{
-        TvRate
+        TvRate,
+        DescComp
     }
 }
 </script>

12_vuecli/mediaapp/vue.config.js

@@ -1,4 +1,15 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
+  devServer:{
+    proxy:{
+      '/api':{
+        target:'https://m.douban.com/rexxar/api/v2',
+        changeOrigin:true,
+        pathRewrite:{
+          '^/api':''
+        }
+      }
+    }
+  },
   transpileDependencies: true
 })