添加文章贴发布与获取接口

src/api/mblog/status.js

@@ -3,8 +3,7 @@ import $axios from '../index'
 const statusApi = {
   statusPubApi: '/api/mblog/status',
   statusRecommendApi: '/api/mblog/status',
-  userStatusApi: '/api/mblog/status/user',
-  answerRecommendApi: '/api/mblog/answer'
+  userStatusApi: '/api/mblog/status/user'
 }
 
 // 状态发布接口
@@ -21,7 +20,3 @@ export function statusRecommend(page) {
 export function userStatus(userId, page) {
   return $axios.get(statusApi.userStatusApi + '?userId=' + userId + '&page=' + page)
 }
-
-export function answerRecommend(page) {
-  return $axios.get(statusApi.answerRecommendApi + '/' + page)
-}

src/api/post/article.js

@@ -0,0 +1,16 @@
+import $axios from '../index'
+
+const articlePostApi = {
+  articlePostApi: '/api/media/article/post/submit',
+  articleInfoApi: '/api/media/article/post'
+}
+
+// 发布文章贴
+export function submitArticlePost(data) {
+  return $axios.post(articlePostApi.articlePostApi, data)
+}
+
+// 获取文章贴
+export function getArticleInfo(articleId) {
+  return $axios.get(articlePostApi.articleInfoApi + '/' + articleId)
+}

src/components/card/answer-card.vue

@@ -2,7 +2,7 @@
   <v-card
     class-name="mx-auto"
     color="white"
-    max-width="720"
+    width="720"
   >
     <v-card-title>
       <v-avatar>

src/components/card/question-card.vue

@@ -2,7 +2,7 @@
   <v-card
     class-name="mx-auto"
     color="white"
-    max-width="720"
+    width="720"
   >
     <v-card-title>
       <span class="text-body-1 font-weight-light">{{ question.title }}</span>

src/components/upload/publish-article.vue

@@ -35,6 +35,7 @@
 
 <script>
 import RichText from '@/components/upload/rich-text'
+import { submitArticlePost } from '@/api/post/article'
 
 export default {
   components: {
@@ -76,7 +77,14 @@ export default {
         return
       }
 
-      console.log(this.articlePost)
+      submitArticlePost(this.articlePost).then(res => {
+        if (res.code !== 0) {
+          this.message = '稿件发布失败'
+          this.showMessage = true
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
     }
   }
 }

src/router/index.js

@@ -352,10 +352,10 @@ const routes = [
         meta: { title: '图片' },
         children: [
           {
-            path: '/article/:id',
+            path: '/image/:id',
             name: 'ImagePage',
-            component: () => import('@/views/message/home.vue'),
-            meta: { title: '文章主页' }
+            component: () => import('@/views/image/index.vue'),
+            meta: { title: '图片主页' }
           }
         ]
       },
@@ -366,14 +366,15 @@ const routes = [
         component: () => import('@/views/article/index.vue'),
         meta: { title: '文章' },
         children: [
-          {
-            path: '/article/:id',
-            name: 'ArticlePage',
-            component: () => import('@/views/message/home.vue'),
-            meta: { title: '文章主页' }
-          }
         ]
       },
+      {
+        path: '/article/:id',
+        name: 'ArticlePage',
+        component: () => import('@/views/article/zhihu.vue'),
+        // component: () => import('@/views/article/article.vue'),
+        meta: { title: '文章主页' }
+      },
       /* 直播模块 */
       {
         path: '/live',

src/views/article/article.vue

@@ -106,7 +106,7 @@ export default {
     }
   },
   created() {
-    this.getFollowingStatus(this.page)
+    // this.getFollowingStatus(this.page)
   },
   mounted() {
   },

src/views/article/index.vue

@@ -1,8 +1,8 @@
 <template>
   <v-container>
     <v-tabs>
-      <v-tab @click="selectTab(0)">视频</v-tab>
-      <v-tab @click="selectTab(1)">图片</v-tab>
+      <v-tab @click="selectTab(0)">推荐</v-tab>
+      <v-tab @click="selectTab(1)">热门</v-tab>
     </v-tabs>
     <v-simple-table>
       <template v-slot:default>

src/views/article/zhihu.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-container class="grey lighten-5">
+    <v-row dense justify="center">
+      <question-card :question="question" />
+    </v-row>
+    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="true" infinite-scroll-distance="10">
+      <v-row
+        v-for="item in cardList"
+        :key="item.answerId"
+        justify="center"
+      >
+        <answer-card :answer="item" />
+      </v-row>
+    </div>
+    <v-snackbar
+      v-model="showMessage"
+      :top="true"
+      :timeout="3000"
+    >
+      {{ message }}
+      <template v-slot:action="{ attrs }">
+        <v-btn
+          color="pink"
+          text
+          v-bind="attrs"
+          @click="showMessage = false"
+        >
+          关闭
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script>
+import { getArticleInfo } from '@/api/post/article'
+import AnswerCard from '@/components/card/answer-card'
+import QuestionCard from '@/components/card/question-card'
+
+export default {
+  name: 'Home',
+  components: {
+    QuestionCard,
+    AnswerCard
+  },
+  data() {
+    return {
+      question: {
+        title: '你最照骗的一张照片是什么样子？',
+        detail: ''
+      },
+      cardList: [],
+      busy: false,
+      page: 1,
+      showMessage: false,
+      message: ''
+    }
+  },
+  created() {
+    this.getArticleList(this.page)
+  },
+  mounted() {
+  },
+  methods: {
+    loadMore: function() {
+      this.busy = true
+      setTimeout(() => {
+        console.log('加载更多数据')
+      }, 1000)
+    },
+    getArticleList(page) {
+      getArticleInfo(page)
+        .then(res => {
+          if (res.code === 0) {
+            if (page === 1) {
+              this.cardList = []
+            }
+
+            for (const item of res.data.list) {
+              this.cardList.push(item)
+            }
+            this.page += 1
+            this.busy = false
+          } else {
+            this.message = res.msg
+            this.showMessage = true
+          }
+        })
+        .catch(error => {
+          this.message = error.message
+          this.showMessage = true
+        })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/home/zhihu.vue

@@ -1,148 +0,0 @@
-<template>
-  <v-container class="grey lighten-5">
-    <v-row justify="space-between">
-      <v-col>
-        <v-row dense justify="center">
-          <question-card :question="question" />
-        </v-row>
-        <v-row dense>
-          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="true" infinite-scroll-distance="10">
-            <v-col cols="12">
-              <v-row
-                v-for="item in cardList"
-                :key="item.answerId"
-                justify="center"
-              >
-                <answer-card :answer="item" />
-              </v-row>
-            </v-col>
-          </div>
-        </v-row>
-      </v-col>
-      <v-col md="4">
-        <v-row dense>
-          <v-col cols="12">
-            <v-card
-              color="#385F73"
-              light
-            >
-              <v-card-title class="text-h5">
-                热门问题
-              </v-card-title>
-              <v-card-text>
-                <p class="text-body-1 text--primary">
-                  1.第1条
-                </p>
-                <p class="text-body-1 text--primary">
-                  2.第2条
-                </p>
-              </v-card-text>
-            </v-card>
-          </v-col>
-          <v-col cols="12">
-            <v-card
-              color="#385F73"
-              light
-            >
-              <v-card-title class="text-h5">
-                热门回答
-              </v-card-title>
-              <v-card-text>
-                <p class="text-body-1 text--primary">
-                  1.第1条
-                </p>
-                <p class="text-body-1 text--primary">
-                  2.第2条
-                </p>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
-
-    <v-snackbar
-      v-model="showMessage"
-      :top="true"
-      :timeout="3000"
-    >
-      {{ message }}
-      <template v-slot:action="{ attrs }">
-        <v-btn
-          color="pink"
-          text
-          v-bind="attrs"
-          @click="showMessage = false"
-        >
-          关闭
-        </v-btn>
-      </template>
-    </v-snackbar>
-  </v-container>
-</template>
-
-<script>
-import { answerRecommend } from '@/api/mblog/status'
-import AnswerCard from '@/components/card/answer-card'
-import QuestionCard from '@/components/card/question-card'
-
-export default {
-  name: 'Home',
-  components: {
-    QuestionCard,
-    AnswerCard
-  },
-  data() {
-    return {
-      question: {
-        title: '你最照骗的一张照片是什么样子？',
-        detail: ''
-      },
-      cardList: [],
-      busy: false,
-      page: 1,
-      showMessage: false,
-      message: ''
-    }
-  },
-  created() {
-    this.getFollowingStatus(this.page)
-  },
-  mounted() {
-  },
-  methods: {
-    loadMore: function() {
-      this.busy = true
-      setTimeout(() => {
-        console.log('加载更多数据')
-      }, 1000)
-    },
-    getFollowingStatus(page) {
-      answerRecommend(page)
-        .then(res => {
-          if (res.code === 0) {
-            if (page === 1) {
-              this.cardList = []
-            }
-
-            for (const item of res.data.list) {
-              this.cardList.push(item)
-            }
-            this.page += 1
-            this.busy = false
-          } else {
-            this.message = res.msg
-            this.showMessage = true
-          }
-        })
-        .catch(error => {
-          this.message = error.message
-          this.showMessage = true
-        })
-    }
-  }
-}
-</script>
-
-<style>
-</style>