Complete post api and comment api

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true
+}

package.json

@@ -64,6 +64,10 @@
       "parser": "babel-eslint"
     },
     "rules": {
+      "space-before-function-paren": [
+        "error",
+        "never"
+      ],
       "generator-star-spacing": "off",
       "no-mixed-operators": 0,
       "vue/max-attributes-per-line": [

src/api/comment.js

@@ -0,0 +1,14 @@
+import service from '@/utils/service'
+
+const baseUrl = '/admin/api/comments'
+
+const commentApi = {}
+
+commentApi.listLatest = () => {
+  return service({
+    url: `${baseUrl}/latest`,
+    method: 'get'
+  })
+}
+
+export default commentApi

src/api/post.js

@@ -1,5 +1,14 @@
 import service from '@/utils/service'
 
+const baseUrl = '/admin/api/posts'
+
 const postApi = {}
 
+postApi.listLatest = () => {
+  return service({
+    url: `${baseUrl}/latest`,
+    method: 'get'
+  })
+}
+
 export default postApi

src/views/dashboard/Dashboard.vue

@@ -1,17 +1,45 @@
 <template>
   <div class="page-header-index-wide">
     <a-row :gutter="12">
-      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+      <a-col
-        <a-card :loading="loading" :bordered="false" title="最新文章" :bodyStyle="{ padding: '0px' }">
+        :xl="12"
-          <a-table :columns="postColumns" :dataSource="postData" :pagination="false">
+        :lg="24"
-
+        :md="24"
+        :sm="24"
+        :xs="24"
+      >
+        <a-card
+          :loading="postLoading"
+          :bordered="false"
+          title="最新文章"
+          :bodyStyle="{ padding: '0px' }"
+        >
+          <a-table
+            :columns="postColumns"
+            :dataSource="postData"
+            :pagination="false"
+          >
           </a-table>
         </a-card>
       </a-col>
-      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+      <a-col
-        <a-card :loading="loading" :bordered="false" title="最新评论" :bodyStyle="{ padding: '0px' }">
+        :xl="12"
-          <a-table :columns="commentColumns" :dataSource="commentData" :pagination="false">
+        :lg="24"
-
+        :md="24"
+        :sm="24"
+        :xs="24"
+      >
+        <a-card
+          :loading="commentLoading"
+          :bordered="false"
+          title="最新评论"
+          :bodyStyle="{ padding: '0px' }"
+        >
+          <a-table
+            :columns="commentColumns"
+            :dataSource="commentData"
+            :pagination="false"
+          >
           </a-table>
         </a-card>
       </a-col>
@@ -20,95 +48,82 @@
 </template>
 
 <script>
+import postApi from '@/api/post'
+import commentApi from '@/api/comment'
 
-const postColumns = [{
+const postColumns = [
-  title: '标题',
+  {
-  dataIndex: 'title',
+    title: '标题',
-  scopedSlots: { customRender: 'name' }
+    dataIndex: 'title',
-}, {
+    scopedSlots: { customRender: 'name' }
-  title: '状态',
+  },
-  className: 'status',
+  {
-  dataIndex: 'status'
+    title: '状态',
-}, {
+    className: 'status',
-  title: '发布时间',
+    dataIndex: 'status'
-  dataIndex: 'date'
+  },
-}]
+  {
+    title: '发布时间',
+    dataIndex: 'date'
+  }
+]
 
-const commentColumns = [{
+const commentColumns = [
-  title: '评论者',
+  {
-  dataIndex: 'author',
+    title: '评论者',
-  scopedSlots: { customRender: 'name' }
+    dataIndex: 'author',
-}, {
+    scopedSlots: { customRender: 'name' }
-  title: '状态',
+  },
-  className: 'status',
+  {
-  dataIndex: 'status'
+    title: '状态',
-}, {
+    className: 'status',
-  title: '内容',
+    dataIndex: 'status'
-  className: 'content',
+  },
-  dataIndex: 'content'
+  {
-}, {
+    title: '内容',
-  title: '发布时间',
+    className: 'content',
-  dataIndex: 'date'
+    dataIndex: 'content'
-}]
+  },
-
+  {
-const postData = [{
+    title: '发布时间',
-  key: '1',
+    dataIndex: 'date'
-  title: '测试文章1',
+  }
-  status: '已发布',
+]
-  date: '2019-03-20'
-}, {
-  key: '2',
-  title: '测试文章3',
-  status: '草稿',
-  date: '2019-03-20'
-}, {
-  key: '3',
-  title: '测试文章3',
-  status: '回收站',
-  date: '2019-03-20'
-}]
-
-const commentData = [{
-  key: '1',
-  author: 'test1',
-  status: '已发布',
-  content: '测试评论1',
-  date: '2019-03-20'
-}, {
-  key: '2',
-  author: 'test1',
-  status: '草稿',
-  content: '测试评论1',
-  date: '2019-03-20'
-}, {
-  key: '3',
-  author: 'test1',
-  status: '回收站',
-  content: '测试评论1',
-  date: '2019-03-20'
-}]
 
 export default {
   name: 'Dashboard',
-  components: {
+  components: {},
-  },
+  data() {
-  data () {
     return {
       loading: true,
+      postLoading: true,
+      commentLoading: true,
       postColumns,
-      postData,
+      postData: [],
       commentColumns,
-      commentData
+      commentData: []
     }
   },
-  created () {
+  created() {
-    setTimeout(() => {
+    this.listLatestPosts()
-      this.loading = !this.loading
+    this.listLatestComments()
-    }, 1000)
+  },
+  methods: {
+    listLatestPosts() {
+      postApi.listLatest().then(response => {
+        this.postLoading = false
+        this.postData = response.data.data
+      })
+    },
+    listLatestComments() {
+      commentApi.listLatest().then(response => {
+        this.commentLoading = false
+        this.commentData = response.data.data
+      })
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
-
 </style>