Complete TagList with api

src/api/tag.js

@@ -4,25 +4,37 @@ const baseUrl = '/admin/api/tags'
 
 const tagApi = {}
 
-tagApi.listAll = () => {
+tagApi.listAll = (more = false) => {
   return service({
     url: baseUrl,
-    method: 'get'
+    params: {
-  })
+      more: more
-}
+    },
-
-tagApi.listAllAddition = () => {
-  return service({
-    url: `${baseUrl}/addition`,
     method: 'get'
   })
 }
 
 tagApi.create = tag => {
   return service({
-    url: `${baseUrl}`,
+    url: baseUrl,
+    data: tag,
     method: 'post'
   })
 }
 
+tagApi.update = (tagId, tag) => {
+  return service({
+    url: `${baseUrl}/${tagId}`,
+    data: tag,
+    method: 'put'
+  })
+}
+
+tagApi.delete = tagId => {
+  return service({
+    url: `${baseUrl}/${tagId}`,
+    method: 'delete'
+  })
+}
+
 export default tagApi

src/views/post/TagList.vue

@@ -1,52 +1,59 @@
 <template>
   <div>
     <a-row :gutter="12">
-      <a-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
+      <a-col
-        <a-card hoverable title="添加标签">
+        :xl="10"
-          <a-form :layout="horizontal">
+        :lg="10"
-            <a-form-item label="名称：" help="*页面上所显示的名称">
+        :md="10"
-              <a-input/>
+        :sm="24"
+        :xs="24"
+      >
+        <a-card
+          hoverable
+          title="添加标签"
+        >
+          <a-form layout="horizontal">
+            <a-form-item
+              label="名称："
+              help="*页面上所显示的名称"
+            >
+              <a-input v-model="tagToCreate.name" />
             </a-form-item>
-            <a-form-item label="路径名称：" help="*这是文章路径上显示的名称，最好为英文">
+            <a-form-item
-              <a-input/>
+              label="路径名称："
+              help="*这是文章路径上显示的名称，最好为英文"
+            >
+              <a-input v-model="tagToCreate.slugName" />
             </a-form-item>
             <a-form-item>
-              <a-button type="primary">保存</a-button>
+              <a-button
+                type="primary"
+                @click="createTag"
+              >保存</a-button>
             </a-form-item>
           </a-form>
         </a-card>
       </a-col>
-      <a-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24">
+      <a-col
-        <a-card hoverable title="所有标签">
+        :xl="14"
-          <a-tooltip placement="topLeft">
+        :lg="14"
+        :md="14"
+        :sm="24"
+        :xs="24"
+      >
+        <a-card
+          hoverable
+          title="所有标签"
+        >
+          <a-tooltip
+            placement="topLeft"
+            v-for="tag in tags"
+            :key="tag.id"
+          >
             <template slot="title">
-              <span>10 篇文章</span>
+              <span>{{ tag.postCount }} 篇文章</span>
             </template>
-            <a-tag color="pink">Java</a-tag>
+            <a-tag color="green">{{ tag.name }}</a-tag>
-          </a-tooltip>
-          <a-tooltip placement="topLeft">
-            <template slot="title">
-              <span>10 篇文章</span>
-            </template>
-            <a-tag color="red">PHP</a-tag>
-          </a-tooltip>
-          <a-tooltip placement="topLeft">
-            <template slot="title">
-              <span>10 篇文章</span>
-            </template>
-            <a-tag color="orange">.NET</a-tag>
-          </a-tooltip>
-          <a-tooltip placement="topLeft">
-            <template slot="title">
-              <span>10 篇文章</span>
-            </template>
-            <a-tag color="green">Python</a-tag>
-          </a-tooltip>
-          <a-tooltip placement="topLeft">
-            <template slot="title">
-              <span>10 篇文章</span>
-            </template>
-            <a-tag color="pink">Golang</a-tag>
           </a-tooltip>
         </a-card>
       </a-col>
@@ -55,7 +62,41 @@
 </template>
 
 <script>
-export default {}
+import tagApi from '@/api/tag'
+export default {
+  data() {
+    return {
+      tags: [],
+      tagToCreate: {},
+      tagToUpdate: {}
+    }
+  },
+  created() {
+    this.loadTags()
+  },
+  methods: {
+    loadTags() {
+      tagApi.listAll(true).then(response => {
+        this.tags = response.data.data
+      })
+    },
+    createTag() {
+      tagApi.create(this.tagToCreate).then(response => {
+        this.loadTags()
+      })
+    },
+    updateTag(tagId) {
+      tagApi.update(tagId, this.tagToUpdate).then(response => {
+        this.loadTags()
+      })
+    },
+    deleteTag(index) {
+      tagApi.delete(this.tags[index]).then(response => {
+        this.loadTags()
+      })
+    }
+  }
+}
 </script>
 
 <style scoped>