perf:滚动条出现的逻辑修复和天气标题由后端控制

src/App.vue

@@ -108,9 +108,8 @@
             <div class="footer_font">
               <div style="float: left"></div>
               <span>
-                Copyright &copy;2021-2022 yongma16.xyz
-                个人空间&nbsp;&nbsp;&nbsp;</span
-              >
+                Copyright &copy;{{startTime}} yongma16.xyz
+                个人空间&nbsp;&nbsp;&nbsp;</span>
               <span> 足迹:{{ readCount }}&nbsp;&nbsp;&nbsp;</span>
               <span
                 ><img
@@ -122,9 +121,7 @@
                     padding-bottom: 0;
                   "
                 />&nbsp;&nbsp;<span style="cursor: pointer" @click="jumpIpDns"
-                  >黔ICP备20001426号-1</span
-                ></span
-              >
+                  >黔ICP备20001426号-1</span></span>
             </div>
             <!--            <div></div>-->
           </div>
@@ -140,6 +137,8 @@ export default {
     name: 'App',
     data () {
         return {
+            // 开始时间
+            startTime: '',
             authSlogan: 'yma16',
             chat_flag: false,
             msg: 'yma16',
@@ -164,10 +163,16 @@ export default {
         }
     },
     mounted () {
+        this.initStartTime()
         this.addReadCountFun()
         this.readCountFun()
     },
     methods: {
+        initStartTime () {
+            const now = new Date()
+            const year = now.getFullYear()
+            this.startTime = `2021-${year}`
+        },
         jumpIpDns: function () {
             try {
                 window.open('https://beian.miit.gov.cn')

src/components/Article.vue

@@ -13,7 +13,7 @@
           <ul v-for="(item, index) in md_title" :key="item" class="ul_style">
             <div
               v-bind:class="[
-                { li_active: index == article_loc },
+                { li_active: index === article_loc },
                 li_errorClass,
               ]"
             >
@@ -28,7 +28,7 @@
             :current-page="currentPage"
             :page-sizes="pageArray"
             background
-            :pager-count="3"
+            :page-count="pageCount"
             :page-size="pageSize"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
@@ -105,7 +105,7 @@
     </div>
     <!-- 中间 markdown-->
     <div class="midclass" ref="mark-down-ref">
-      <a name="home" id="hometitle" style="transition: 1s"></a>
+      <a name="home" id="homeTitleId" style="transition: 1s"></a>
       <el-card shadow="hover" style="line-height: 10px">
         <div class="block" style="line-height: 20px">
           <h1>{{ the_title }}</h1>
@@ -229,6 +229,7 @@ export default {
     name: 'Article',
     data () {
         return {
+            pageCount: 3,
             msgDrawTitle: '~邮件沟通~',
             direction: 'rtl',
             drawObj: {
@@ -261,7 +262,7 @@ export default {
             toTopIsShow: false,
             article_loc: 0,
             challenge_loc: -1,
-            topshow: false,
+            topShow: false,
             userImg: '',
             username: '匿名',
             articleCommit: '评论区',
@@ -280,7 +281,7 @@ export default {
         }
     },
     watch: {
-        topshow: function (newvalue, oldvalue) {
+        topShow: function (newvalue, oldvalue) {
             if (newvalue === true) {
                 document.getElementById('topiconid').style.display = 'none'
             } else {
@@ -289,13 +290,30 @@ export default {
         }
     },
     beforeDestroy () {
-        window.removeEventListener('onload', this.topvisible())
+        window.removeEventListener('onload', this.topVisible())
+        this.articleScrollListen('remove')
     },
     mounted () {
+        this.articleScrollListen('add')
         this.initPageSpliteFun()
-        window.addEventListener('onload', this.topvisible())
+        window.addEventListener('onload', this.topVisible())
     },
     methods: {
+        /**
+       * dom的滚动事件监听
+       */
+        articleScrollListen (key) {
+            const dom = this.$refs['mark-down-ref']
+            if (dom && key === 'add') {
+                dom.addEventListener('scroll', function (e) {
+                    this.topShow = e.scrollTop > 0
+                })
+            } else if (dom && key === 'remove') {
+                dom.removeEventListener('scroll', function (e) {
+                    this.topShow = e.scrollTop > 0
+                })
+            }
+        },
         initPageSpliteFun () {
             this.splitLength = this.pageArray[0]
         },
@@ -314,9 +332,7 @@ export default {
             let that = this
             that.total = allTitleArray.length // 总数
             let splitLength = that.splitLength
-            if (!selectListLength) {
-                that.splitLength = that.splitLength
-            } else {
+            if (selectListLength) {
                 this.currentPage = 1
                 that.splitLength = selectListLength // 划分长度
             }
@@ -324,7 +340,7 @@ export default {
             let splitNum = Math.ceil(that.total / splitLength) // 向上取整
             that.pageAnalys.childNum = splitNum // 子数组个数
             that.pageAnalys.allTitle = allTitleArray // 所有标题
-            that.pageAnalys.titleArray = new Array() // 子数组个数
+            that.pageAnalys.titleArray = [] // 子数组个数
             let locSplit = 0
             let locLength = splitLength // 每一页的条数
             while (splitNum--) {
@@ -359,10 +375,10 @@ export default {
         increment: function () {
             this.$store.commit('increment')
         },
-        topvisible: function () {
-            let dom = document.getElementById('hometitle')
-            this.topshow = this.elementIsVisibleInViewport(dom)
-            setTimeout(this.topvisible)
+        topVisible: function () {
+            let dom = document.getElementById('homeTitleId')
+            this.topShow = this.elementIsVisibleInViewport(dom)
+            setTimeout(this.topVisible)
         },
         elementIsVisibleInViewport: function (el, partiallyVisible = false) {
             try {

src/weather/EchartWeather.vue

@@ -44,9 +44,7 @@ export default {
                 await that.getWeatherData()
                 await that.weatherInint()
             }
-            waitGetWeatherData().then((o) => {
-                console.log(o)
-            }) // 同步
+            waitGetWeatherData()
         },
         getWeatherData () {
             let that = this
@@ -55,9 +53,9 @@ export default {
                     that.$axios
                         .get(that.baseurl + 'article/weather/')
                         .then((res) => {
-                            console.log('天气接口返回', res)
-                            let resdata = res.data
-                            let weather = resdata.weather
+                            let resData = res.data
+                            let weather = resData.weather
+                            that.msg = weather.location
                             let title = weather.title
                             let high = weather.high
                             let low = weather.low
@@ -96,10 +94,9 @@ export default {
                                 discribeText.windwl = that.weather_windwl[loc]
                                 that.tableData.push(discribeText)
                             }
-                            console.log(that.tableData, 'that.tableData')
                         })
                         .catch((r) => {
-                            console.log('r', r)
+                            throw Error(r)
                         })
                 }, 1000)
                 resolve('获取后端天气成功的promise')
@@ -114,9 +111,7 @@ export default {
                     let highData = Array.from(...[that.weather_high])
                     let lowData = Array.from(...[that.weather_low])
                     let titleData = Array.from(...[that.weather_title])
-                    console.log('绘制折线图数据', titleData, highData, lowData)
                     let dom = document.getElementById('echart_weather')
-                    // console.log('dom', dom)
                     let myChart = echarts.init(dom)
                     // 绘制图表
                     let option = {