将 /news 更改为 /blog 路由

src/api/blog.js

@@ -0,0 +1,19 @@
+import { delete0, get, post } from '@/utils/request'
+
+const blogApi = {
+  getBlogPostApi: '/api/blog/post',
+  newsListApi: '/api/content/post/news/list',
+  newsDetailApi: '/api/content/post/news/detail'
+}
+
+export function getBlogPost(postId) {
+  return get(blogApi.getBlogPostApi + '?articleId=' + postId)
+}
+
+export function getNewsList(page) {
+  return get(blogApi.newsListApi + '?pn=' + page)
+}
+
+export function getNewsDetail(newsId) {
+  return get(blogApi.newsDetailApi + '/' + newsId)
+}

src/api/news.js

@@ -1,14 +0,0 @@
-import { delete0, get, post } from '@/utils/request'
-
-const newsApi = {
-  newsListApi: '/api/content/post/news/list',
-  newsDetailApi: '/api/content/post/news/detail'
-}
-
-export function getNewsList(page) {
-  return get(newsApi.newsListApi + '?pn=' + page)
-}
-
-export function getNewsDetail(newsId) {
-  return get(newsApi.newsDetailApi + '/' + newsId)
-}

src/router/news.js → src/router/blog.js

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

src/router/index.js

@@ -5,6 +5,7 @@ import DiskRouter from './disk'
 import UserRouter from './user'
 import SearchRouter from './search'
 import DevopsRouter from './devops'
+import BlogRouter from './blog'
 import BackgroundAccountRouter from './background_account'
 import BackgroundMyRouter from './background_my'
 import BackgroundPostRouter from './background_post'
@@ -29,7 +30,6 @@ const ShortVideoIndex = () => import('views/home/ShortVideo')
 const VideoPage = () => import('views/home/VideoPage')
 const AudioIndex = () => import('views/home/Audio')
 const AudioPage = () => import('views/home/AudioPage')
-const ArticlePage = () => import('views/news/ArticlePage')
 const ImagePage = () => import('views/home/ImagePage')
 const PlaylistIndex = () => import('views/home/PlaylistIndex')
 const PlaylistView = () => import('views/home/PlaylistView')
@@ -43,6 +43,7 @@ export const constantRoutes = [
   UserRouter,
   SearchRouter,
   DevopsRouter,
+  BlogRouter,
   BackgroundAccountRouter,
   BackgroundMyRouter,
   BackgroundPostRouter,
@@ -104,12 +105,6 @@ export const constantRoutes = [
         component: AudioPage,
         meta: { needAuth: false }
       },
-      {
-        path: '/article/:articleId',
-        name: 'ArticlePage',
-        component: ArticlePage,
-        meta: { needAuth: false }
-      },
       {
         path: '/image/:albumId',
         name: 'ImagePage',

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

@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import { getNewsList } from '@/api/news'
+import { getNewsList } from '@/api/blog'
 
 export default {
   name: 'ArticleIndex',

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

@@ -6,33 +6,11 @@
           <div slot="header" class="clearfix">
             <el-row>
               <span v-html="article.title" />
-              <span v-if="article.originalUrl !== null">
-                <a style="text-decoration-line: none" target="_blank" :href="`${article.originalUrl}`">
-                  原始链接
-                </a>
-              </span>
             </el-row>
             <el-divider />
             <el-row>
               <span v-html="article.publishAt" />
             </el-row>
-<!--            <el-row v-if="userAvatar !== null">
-              <el-col :md="2">
-                <router-link target="_blank" :to="`/user/` + userAvatar.userId">
-                  <el-avatar>
-                    <el-image :src="userAvatar.avatarUrl" />
-                  </el-avatar>
-                </router-link>
-              </el-col>
-              <el-col :md="10">
-                <el-row>
-                  <span v-html="userAvatar.screenName" />
-                </el-row>
-                <el-row>
-                  <span>-</span>
-                </el-row>
-              </el-col>
-            </el-row>-->
           </div>
           <div class="text item">
             <el-row>
@@ -40,9 +18,6 @@
             </el-row>
             <el-divider />
             <el-row>
-              <span>
-                <i :class="collectedIcon" @click="collectItem" />
-              </span>
             </el-row>
           </div>
         </el-card>
@@ -68,7 +43,7 @@
 <script>
 // import { getArticle } from '@/api/article'
 // import { getUserInfo } from '@/api/user'
-import { getNewsDetail } from '@/api/news'
+import { getBlogPost, getNewsDetail } from '@/api/blog'
 
 export default {
   name: 'ArticlePage',
@@ -98,19 +73,17 @@ export default {
   },
   created() {
     const articleId = this.$route.params.articleId
-    getNewsDetail(articleId).then(resp => {
-      if (resp.code === 0) {
-        this.article = resp.data
-        document.title = this.article.title
-        /* getUserInfo(this.article.userId).then(resp => {
-          if (resp.code === 0) {
-            this.userAvatar = resp.data
-          }
-        })*/
-      }
-    })
+    this.getData(articleId)
   },
   methods: {
+    getData(articleId) {
+      getBlogPost(articleId).then(resp => {
+        if (resp.code === 0) {
+          this.article = resp.data
+          document.title = this.article.title
+        }
+      })
+    },
     collectItem() {
       this.$message.info('暂未实现')
       if (this.collected) {

src/views/blog/Blog.vue

@@ -0,0 +1,64 @@
+<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="/blog" style="color: #007bff;text-decoration-line: none">
+                <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
+                MyBlog
+              </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="/blog/category">
+              <template slot="title">
+                <span style="color: #007bff">分类</span>
+              </template>
+            </el-menu-item>
+            <el-menu-item index="/blog/about">
+              <template slot="title">
+                <span style="color: #007bff">关于</span>
+              </template>
+            </el-menu-item>
+          </el-menu>
+        </el-col>
+      </el-row>
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: 'Blog',
+  data() {
+    return {
+    }
+  },
+  watch: {
+    // 地址栏 url 发生变化时重新加载本页面
+    $route() {
+      this.$router.go()
+    }
+  },
+  created() {
+    document.title = 'MyBlog'
+  }
+}
+</script>
+
+<style>
+.logo {
+  width: 30px;
+  position: relative;
+}
+</style>

src/views/news/News.vue

@@ -1,93 +0,0 @@
-<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>