添加 news 模块, 将 Article.vue 和 ArticlePage.vue 移到该模块

src/router/index.js

@@ -10,6 +10,7 @@ import ChartRouter from './chart'
 import GeoRouter from './geo'
 import SearchRouter from './search'
 import DiskRouter from './disk'
+import NewsRouter from './news'
 import AdminRouter from './admin'
 
 // 懒加载引入页面组件，es6语法
@@ -30,8 +31,6 @@ const VideoPage = () => import('views/home/VideoPage')
 const AudioIndex = () => import('views/home/Audio')
 const AudioPage = () => import('views/home/AudioPage')
 const ImagePage = () => import('views/home/ImagePage')
-const ArticleIndex = () => import('views/home/Article')
-const ArticlePage = () => import('views/home/ArticlePage')
 const Chat = () => import('views/home/Chat')
 const PlaylistIndex = () => import('views/home/PlaylistIndex')
 const PlaylistView = () => import('views/home/PlaylistView')
@@ -51,6 +50,7 @@ const routes = [
   GeoRouter,
   SearchRouter,
   DiskRouter,
+  NewsRouter,
   AdminRouter,
   {
     path: '/login',
@@ -154,18 +154,6 @@ const routes = [
         component: ImagePage,
         meta: { needAuth: false }
       },
-      {
-        path: '/article',
-        name: 'ArticleIndex',
-        component: ArticleIndex,
-        meta: { needAuth: false }
-      },
-      {
-        path: '/article/:articleId',
-        name: 'ArticlePage',
-        component: ArticlePage,
-        meta: { needAuth: false }
-      },
       {
         path: '/playlist',
         name: 'PlaylistIndex',

src/router/news.js

@@ -0,0 +1,30 @@
+const News = () => import('views/news/News')
+const ArticleIndex = () => import('views/news/Article')
+const ArticlePage = () => import('views/news/ArticlePage')
+
+export default {
+  path: '/news',
+  name: 'News',
+  component: News,
+  meta: { needAuth: true },
+  children: [
+    {
+      path: '',
+      name: 'News',
+      component: ArticleIndex,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/news',
+      name: 'ArticleIndex',
+      component: ArticleIndex,
+      meta: { needAuth: false }
+    },
+    {
+      path: '/news/:articleId',
+      name: 'ArticlePage',
+      component: ArticlePage,
+      meta: { needAuth: false }
+    }
+  ]
+}

src/views/home/Article.vue → src/views/news/Article.vue

@@ -1,17 +1,16 @@
 <template>
   <div>
-    <el-row v-if="totalSize !== 0" class="movie-list">
-      <el-col :md="18">
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+    <el-row class="movie-list">
+      <el-col :md="12">
+        <el-row v-for="(item, index) in dataList" :key="index" class="movie-list">
           <el-card class="box-card">
             <div slot="header" class="clearfix">
-              <span>文章列表</span>
-              <el-button style="float: right; padding: 3px 0" type="text" @click="refresh">刷新</el-button>
+              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.publishAt }}</span>
             </div>
-            <div class="text item" v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+            <div class="text item">
               <el-row>
                 <el-col :md="4">
-                  <router-link target="_blank" :to="`/article/${item.contentId}`">
+                  <router-link target="_blank" :to="`/news/${item.contentId}`">
                     <el-image
                       lazy
                       fit="cover"
@@ -21,7 +20,7 @@
                   </router-link>
                 </el-col>
                 <el-col :md="20">
-                  <router-link style="text-decoration-line: none" target="_blank" :to="`/article/${item.contentId}`">
+                  <router-link style="text-decoration-line: none" target="_blank" :to="`/news/${item.contentId}`">
                     <el-row>
                       <div style="padding: 14px">
                         <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
@@ -35,57 +34,40 @@
                   </el-row>
                 </el-col>
               </el-row>
-              <el-row>
-                <div style="padding: 14px">
-                  <span style="left: 0;margin-bottom: 0px;color: black;">发布于: {{ item.publishAt }}</span>
-                </div>
-              </el-row>
-              <el-divider />
             </div>
-            <el-col :span="18" class="pagination">
-              <el-pagination
-                :small="screenWidth <= 768"
-                layout="prev, pager, next"
-                :page-size="pageSize"
-                :current-page="currentPage"
-                :total="totalSize"
-                @current-change="handleCurrentChange"
-              />
-            </el-col>
           </el-card>
         </el-row>
+        <el-row>
+          <div v-if="hasMore" style="display: flex; justify-content: center;">
+            <el-button link type="plain" icon="el-icon-bottom" @click="loadMore">
+              加载更多
+            </el-button>
+          </div>
+        </el-row>
       </el-col>
       <el-col :md="6">
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-row class="movie-list">
           <el-card class="box-card">
             <div slot="header" class="clearfix">
               <el-row>
-                <span>热门文章</span>
+                <span>热门</span>
               </el-row>
             </div>
             <div class="text item">
-              <el-row>
-              </el-row>
+              <el-row />
             </div>
           </el-card>
         </el-row>
       </el-col>
     </el-row>
-    <el-row v-else class="not-result">
-      <el-col :span="12" :offset="6">
-        <img src="@/assets/img/icon/not-result.png">
-        <div>没有文章数据</div>
-      </el-col>
-    </el-row>
   </div>
 </template>
 
 <script>
-// import {getArticles} from "@/api/article";
 import { getNewsList } from '@/api/news'
 
 export default {
-  name: 'Article',
+  name: 'ArticleIndex',
   metaInfo: {
     meta: [
       { name: 'referrer', content: 'no-referrer' }
@@ -110,10 +92,11 @@ export default {
       pageSize: 12,
       totalSize: 0,
       dataList: [],
+      hasMore: true
     }
   },
   created() {
-    document.title = '文章主页'
+    document.title = 'News'
     this.getArticlesWrapper(this.currentPage)
   },
   mounted() {
@@ -136,11 +119,17 @@ export default {
       getNewsList(page).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
-          this.dataList = respData.list
-          this.totalSize = respData.totalSize
+          this.hasMore = respData.hasNext
+          for (const item of respData.list) {
+            this.dataList.push(item)
+          }
         }
       })
     },
+    loadMore() {
+      this.currentPage = this.currentPage + 1
+      this.getArticlesWrapper(this.currentPage)
+    },
     refresh() {
       this.$message.info('暂未实现')
     }
@@ -152,20 +141,15 @@ export default {
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px) {
   .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
+    padding: 5px;
   }
-
   .coverImg {
     height: 120px !important;
   }
 }
 
 .movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
+  padding: 5px;
 }
 
 .coverImg {

src/views/home/ArticlePage.vue → src/views/news/ArticlePage.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row class="movie-list">
     <el-col :md="18">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-row class="movie-list">
         <el-card class="box-card" v-if="article !== null">
           <div slot="header" class="clearfix">
             <el-row>
@@ -14,10 +14,9 @@
             </el-row>
             <el-divider />
             <el-row>
-              发布于 <span v-html="article.publishAt" />
+              <span v-html="article.publishAt" />
             </el-row>
-            <el-divider />
-            <el-row v-if="userAvatar !== null">
+<!--            <el-row v-if="userAvatar !== null">
               <el-col :md="2">
                 <router-link target="_blank" :to="`/user/` + userAvatar.userId">
                   <el-avatar>
@@ -33,7 +32,7 @@
                   <span>-</span>
                 </el-row>
               </el-col>
-            </el-row>
+            </el-row>-->
           </div>
           <div class="text item">
             <el-row>
@@ -50,7 +49,7 @@
       </el-row>
     </el-col>
     <el-col :md="6">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-row class="movie-list">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <el-row>
@@ -102,7 +101,7 @@ export default {
     getNewsDetail(articleId).then(resp => {
       if (resp.code === 0) {
         this.article = resp.data
-        document.title = '文章 - ' + this.article.title
+        document.title = this.article.title
         /* getUserInfo(this.article.userId).then(resp => {
           if (resp.code === 0) {
             this.userAvatar = resp.data
@@ -132,16 +131,12 @@ export default {
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px) {
   .movie-list {
-    padding-top: 5px;
-    padding-left: 3px;
-    padding-right: 3px;
+    padding: 5px;
   }
 }
 
 .movie-list {
-  padding-top: 5px;
-  padding-left: 3px;
-  padding-right: 3px;
+  padding: 5px;
 }
 
 .clearfix:before,

src/views/news/News.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-row class="el-menu-demo">
+        <el-col :md="2">
+          <ul role="menubar" class="el-menu--horizontal el-menu">
+            <li role="menuitem" class="el-menu-item">
+              <a href="/news" style="color: #007bff;text-decoration-line: none">
+                <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
+                news
+              </a>
+            </li>
+          </ul>
+        </el-col>
+        <el-col :md="20">
+          <el-menu
+            class="el-menu--horizontal el-menu"
+            :default-active="this.$route.path"
+            router
+            mode="horizontal"
+          >
+            <el-menu-item index="/news">
+              <template slot="title">
+                <span style="color: #007bff">新闻</span>
+              </template>
+            </el-menu-item>
+          </el-menu>
+        </el-col>
+        <el-col :md="2">
+          <ul class="el-menu--horizontal el-menu">
+            <li class="el-menu-item">
+              <el-dropdown v-if="user">
+                <img
+                  :src="user.avatarUrl"
+                  class="el-avatar--circle el-avatar--medium"
+                  style="margin-right: 10px; margin-top: 15px"
+                  alt=""
+                >
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item
+                    icon="el-icon-s-platform"
+                    class="size"
+                    @click.native="goToHome"
+                  >主站</el-dropdown-item>
+                  <el-dropdown-item
+                    icon="el-icon-error"
+                    class="size"
+                    @click.native="goToLogout"
+                  >退出</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <span
+                v-else
+                style="color: #007bff"
+              >登录</span>
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { getAuthedUser } from '@/utils/auth'
+
+export default {
+  name: 'News',
+  data() {
+    return {
+      user: null
+    }
+  },
+  watch: {
+    // 地址栏 url 发生变化时重新加载本页面
+    $route() {
+      this.$router.go()
+    }
+  },
+  created() {
+    document.title = 'News'
+    this.user = getAuthedUser()
+  }
+}
+</script>
+
+<style>
+.logo {
+  width: 30px;
+  position: relative;
+}
+</style>