更新 views/blog 模块

src/api/blog.js

@@ -8,7 +8,9 @@ const blogApi = {
   getAbout: '/api/blog/about',
   getSearchList: '/api/blog/search',
   getBlogTag: '/api/blog/v2/tag',
-  getBlogCategory: '/api/blog/v2/category'
+  getBlogCategory: '/api/blog/v2/category',
+  getBlogPost: '/api/blog/v2/post',
+  getBlogQuestion: '/api/blog/v2/question'
 }
 
 export function getPostList(pn) {
@@ -51,3 +53,11 @@ export function addBlogCategory(formData) {
 export function deleteBlogCategory(formData) {
   return postForm(blogApi.getBlogCategory + '/delete', formData)
 }
+
+export function getBlogPostList(queryInfo) {
+  return get(blogApi.getBlogPost + '/list', queryInfo)
+}
+
+export function getBlogQuestionList(queryInfo) {
+  return get(blogApi.getBlogQuestion + '/list', queryInfo)
+}

src/router/background_blog.js

@@ -1,8 +1,8 @@
 const Background = () => import('views/admin/Background')
-const AdminStoreNode = () => import('views/admin/oss/AdminStoreNode')
-const AdminUserNode = () => import('views/admin/oss/AdminUserNode')
-const AdminUploadChannel = () => import('views/admin/oss/AdminUploadChannel')
-const AdminStoreObject = () => import('views/admin/oss/AdminStoreObject')
+const BlogCategory = () => import('views/blog/BlogCategory')
+const BlogTag = () => import('views/blog/BlogCategory')
+const BlogPost = () => import('views/blog/BlogPost')
+const BlogQuestion = () => import('views/blog/BlogQuestion')
 
 export default {
   path: '/background/blog',
@@ -14,25 +14,25 @@ export default {
     {
       path: '/background/blog/category',
       name: 'AdminStoreConfig',
-      component: AdminStoreNode,
+      component: BlogCategory,
       meta: { needAuth: true }
     },
     {
       path: '/background/blog/tag',
-      name: 'AdminUserNode',
-      component: AdminUserNode,
+      name: 'BlogTag',
+      component: BlogTag,
       meta: { needAuth: true }
     },
     {
       path: '/background/blog/post',
-      name: 'AdminUploadChannel',
-      component: AdminUploadChannel,
+      name: 'BlogPost',
+      component: BlogPost,
       meta: { needAuth: true }
     },
     {
       path: '/background/blog/question',
-      name: 'AdminStoreObject',
-      component: AdminStoreObject,
+      name: 'BlogQuestion',
+      component: BlogQuestion,
       meta: { needAuth: true }
     }
   ]

src/views/blog/BlogCategory.vue

@@ -0,0 +1,154 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <h3>文章分类</h3>
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="dataType"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        >
+          <el-option label="category" value="category" />
+          <el-option label="tag" value="tag" />
+        </el-select>
+        <el-button type="success" icon="el-icon-plus" style="margin-left: 5px" @click="handleAdd">添加</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-col :md="12">
+        <el-table
+          :data="dataList"
+          border
+          height="480"
+          style="width: 100%"
+        >
+          <el-table-column
+            fixed="left"
+            label="No"
+            type="index"
+          />
+          <el-table-column
+            prop="name"
+            label="分类"
+          >
+            <template slot-scope="scope">
+              <el-tag disable-transitions>
+                <span>{{ scope.row.name }}</span>
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="total"
+            label="文章总数"
+          />
+          <el-table-column
+            fixed="right"
+            label="操作"
+            width="280"
+          >
+            <template slot-scope="scope">
+              <el-button
+                style="margin-top: 5px; margin-left: 5px"
+                size="mini"
+                type="danger"
+                @click="handleDelete(scope.$index, scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+
+      <el-dialog
+        title="添加分类"
+        append-to-body
+        :visible.sync="addDialog"
+        width="30%"
+        center
+      >
+        <template>
+          <el-form :model="addForm" label-width="80px">
+            <el-form-item label="分类">
+              <el-input v-model="addForm.category" style="width: 70%; padding-right: 2px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onAdd">确定</el-button>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-dialog>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { getBlogCategoryList, getBlogTagList } from '@/api/blog'
+
+export default {
+  name: 'BlogCategory',
+  data() {
+    return {
+      dataType: 'category',
+      dataList: [],
+      addDialog: false,
+      addForm: {
+      }
+    }
+  },
+  created() {
+    document.title = '文章分类'
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getBlogCategoryList().then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleAdd() {
+      this.addDialog = true
+    },
+    onAdd() {
+      this.addDialog = false
+      this.$message.info('add')
+    },
+    handleDelete(index, row) {
+      this.$message.info('delete -> ' + row.name)
+    },
+    onSelectChange() {
+      this.dataList = []
+      if (this.dataType === 'category') {
+        getBlogCategoryList().then(resp => {
+          if (resp.code === 0) {
+            this.dataList = resp.data
+          } else {
+            this.$message.error(resp.msg)
+          }
+        }).catch(error => {
+          this.$message.error(error.message)
+        })
+      } else if (this.dataType === 'tag') {
+        getBlogTagList().then(resp => {
+          if (resp.code === 0) {
+            this.dataList = resp.data
+          } else {
+            this.$message.error(resp.msg)
+          }
+        }).catch(error => {
+          this.$message.error(error.message)
+        })
+      } else {
+        this.$message.error('dataType error')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/blog/BlogPost.vue

@@ -0,0 +1,199 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <h3>文章列表</h3>
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="dataType"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        >
+          <el-option label="category" value="category" />
+          <el-option label="tag" value="tag" />
+        </el-select>
+        <el-button type="success" icon="el-icon-plus" style="margin-left: 5px" @click="handleAdd">添加</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="dataList"
+        border
+        height="480"
+        style="width: 100%"
+      >
+        <el-table-column
+          fixed="left"
+          label="No"
+          type="index"
+        />
+        <el-table-column
+          prop="title"
+          label="标题"
+        >
+          <template slot-scope="scope">
+            <router-link style="text-decoration-line: none" target="_blank" :to="`/blog/post/${scope.row.articleId}`">
+              <span>{{ scope.row.title }}</span>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="category"
+          label="分类"
+        >
+          <template slot-scope="scope">
+            <el-tag>
+              <span>{{ scope.row.category }}</span>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="tags"
+          label="标签"
+        >
+          <template slot-scope="scope">
+            <el-tag v-for="(tag, index) in scope.row.tags" :key="index" style="margin: 5px" type="warning">
+              <span>{{ tag }}</span>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="published"
+          label="是否发布"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.published" type="success">
+              <span>已发布</span>
+            </el-tag>
+            <el-tag v-else type="warning">
+              <span>未发布</span>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="280"
+        >
+          <template slot-scope="scope">
+            <el-button
+              style="margin-top: 5px; margin-left: 5px"
+              size="mini"
+              type="danger"
+              @click="handleDetail(scope.$index, scope.row)"
+            >查看</el-button>
+            <el-button
+              style="margin-top: 5px; margin-left: 5px"
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+
+      <el-dialog
+        title="添加分类"
+        append-to-body
+        :visible.sync="addDialog"
+        width="30%"
+        center
+      >
+        <template>
+          <el-form :model="addForm" label-width="80px">
+            <el-form-item label="分类">
+              <el-input v-model="addForm.category" style="width: 70%; padding-right: 2px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onAdd">确定</el-button>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-dialog>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { getBlogPostList } from '@/api/blog'
+
+export default {
+  name: 'BlogCategory',
+  data() {
+    return {
+      queryInfo: {
+        pn: 1,
+        categoryId: 0,
+        published: 0,
+        title: ''
+      },
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      addDialog: false,
+      addForm: {
+      }
+    }
+  },
+  created() {
+    document.title = '文章列表'
+    this.getData()
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.queryInfo.pn = pageNumber
+      this.$router.push({
+        path: '/background/blog/post',
+        query: this.queryInfo
+      })
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      getBlogPostList(this.queryInfo).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalSize = respData.totalSize
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleAdd() {
+      this.addDialog = true
+    },
+    onAdd() {
+      this.addDialog = false
+      this.$message.info('add')
+    },
+    handleDetail(index, row) {
+      this.$message.info('detail -> ' + row.articleId)
+    },
+    handleDelete(index, row) {
+      this.$message.info('delete -> ' + row.title)
+    },
+    onSelectChange() {
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/blog/BlogQuestion.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <h3>面试题列表</h3>
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="queryInfo.categoryId"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        >
+          <el-option label="category" value="category" />
+          <el-option label="tag" value="tag" />
+        </el-select>
+        <el-button type="success" icon="el-icon-plus" style="margin-left: 5px" @click="handleAdd">添加</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="dataList"
+        border
+        height="480"
+        style="width: 100%"
+      >
+        <el-table-column
+          fixed="left"
+          label="No"
+          type="index"
+        />
+        <el-table-column
+          prop="title"
+          label="标题"
+        />
+        <el-table-column
+          prop="category"
+          label="分类"
+        >
+          <template slot-scope="scope">
+            <el-tag>
+              <span>{{ scope.row.category }}</span>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="tag"
+          label="标签"
+        >
+          <template slot-scope="scope">
+            <el-tag style="margin: 5px" type="warning">
+              <span>{{ scope.row.tag }}</span>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="280"
+        >
+          <template slot-scope="scope">
+            <el-button
+              style="margin-top: 5px; margin-left: 5px"
+              size="mini"
+              type="danger"
+              @click="handleDetail(scope.$index, scope.row)"
+            >详情</el-button>
+            <el-button
+              style="margin-top: 5px; margin-left: 5px"
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+
+      <el-dialog
+        title="添加分类"
+        append-to-body
+        :visible.sync="addDialog"
+        width="30%"
+        center
+      >
+        <template>
+          <el-form :model="addForm" label-width="80px">
+            <el-form-item label="分类">
+              <el-input v-model="addForm.category" style="width: 70%; padding-right: 2px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onAdd">确定</el-button>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-dialog>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { getBlogQuestionList } from '@/api/blog'
+
+export default {
+  name: 'BlogCategory',
+  data() {
+    return {
+      queryInfo: {
+        pn: 1,
+        categoryId: 0,
+        published: 0,
+        title: ''
+      },
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      addDialog: false,
+      addForm: {
+      }
+    }
+  },
+  created() {
+    document.title = '面试题列表'
+    this.getData()
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.queryInfo.pn = pageNumber
+      this.$router.push({
+        path: '/background/blog/post',
+        query: this.queryInfo
+      })
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      getBlogQuestionList(this.queryInfo).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalSize = respData.totalSize
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleAdd() {
+      this.addDialog = true
+    },
+    onAdd() {
+      this.addDialog = false
+      this.$message.info('add')
+    },
+    handleDetail(index, row) {
+      this.$message.info('detail -> ' + row.articleId)
+    },
+    handleDelete(index, row) {
+      this.$message.info('delete -> ' + row.title)
+    },
+    onSelectChange() {
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>