新增：分类管理

src/api/category.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+export default {
+  categories(params) {
+    return request({
+      url: 'category/list',
+      method: 'get',
+      params
+    })
+  },
+  categoryTree(params) {
+    return request({
+      url: 'category/tree',
+      method: 'get',
+      params
+    })
+  },
+  categoryInfo(params) {
+    return request({
+      url: 'category/info',
+      method: 'get',
+      params
+    })
+  },
+  add(data) {
+    return request({
+      url: 'category/add',
+      method: 'post',
+      data
+    })
+  },
+  update(data) {
+    return request({
+      url: 'category/update',
+      method: 'put',
+      data
+    })
+  },
+  delete(name) {
+    return request({
+      url: 'category/delete',
+      method: 'delete',
+      params: {name}
+    })
+  }
+}
+

src/views/public/article/index.vue

@@ -8,7 +8,7 @@
     <div id="top" style="display: block;" class="animateIn">
       <div class="navbar animated fadeIn fast delay-1s">
         <div class="container-fluid">
-          <a class="navbar-brand text-brand">JMAL'S</a>
+          <a class="navbar-brand text-brand" href="/articles">JMAL'S</a>
           <div class="collapse navbar-collapse">
             <ul class="navbar-nav mr-auto">
               <li class="nav-item dropdown"></li>

src/views/public/articles/index.vue

@@ -4,6 +4,34 @@
       <al-loading v-if="isLoading"></al-loading>
     </transition>
     <al-back-top></al-back-top>
+    <div id="top" style="display: block;" class="animateIn">
+      <div class="navbar animated fadeIn fast delay-1s">
+        <div class="container-fluid">
+          <a class="navbar-brand text-brand" href="/articles">JMAL'S</a>
+          <div class="collapse navbar-collapse">
+            <ul class="navbar-nav mr-auto">
+              <li class="nav-item dropdown"></li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
+              </li>
+            </ul>
+
+            <ul class="navbar-nav side-toolbar-list">
+              <li class="nav-item">
+                <a id="nav-side-toolbar-github" href="https://github.com/jamebal" title="Github" target="_blank">fff<i class="fa fa-github"></i></a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
+    </div>
     <div class="cover-wrapper">
       <div class="cover half" style="position: relative; z-index: 0; background-image: none;">
         <div class="cover-body">
@@ -11,20 +39,10 @@
             <p class="title">jmal</p>
             <p class="subtitle">「清空你的杯子, 方能再行注满」</p>
           </div>
-          <div class="b">
-            <div class="m_search">
-              <form name="searchform" class="form u-search-form">
-                <input type="text" class="input u-search-input" placeholder=""> <i class="icon fas fa-search fa-fw"> <svg-icon icon-class="search" /></i>
-              </form>
-            </div>
-          </div>
         </div>
         <div class="backstretch">
-          <!--<img src="~@/assets/img/widget-img1.jpg">-->
           <img class="blog-background" src="https://images.unsplash.com/photo-1603378991000-2dda90e8563a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3200&q=80"
           onerror="this.src='~@/assets/img/widget-img1.jpg'">
-          <!--<el-image  :src="backImageSrc">-->
-          <!--</el-image>-->
         </div>
       </div>
     </div>
@@ -126,6 +144,7 @@
   @import "src/styles/index";
   @import "src/styles/markdown";
   @import "src/styles/articles";
+  @import "src/styles/article";
   .l_side {
     width: 285px;
     float: right;

src/views/setting/index.vue

@@ -15,19 +15,23 @@
         <div v-if="item.name === 'cusomerManager'">
           <cusomer-manager></cusomer-manager>
         </div>
+        <span v-if="item.name === 'categoryManager'" slot="label"><i class="el-icon-menu"></i>{{item.label}}</span>
+        <div v-if="item.name === 'categoryManager'">
+          <category-manager></category-manager>
+        </div>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-  import { getInfo, userUpdate} from '@/api/user'
   import cusomerInfo from '@/views/setting/tabs/cusomerInfo'
   import cusomerManager from '@/views/setting/tabs/cusomerManager'
+  import categoryManager from '@/views/setting/tabs/categoryManager'
 
   export default {
     components: {
-      cusomerInfo,cusomerManager
+      cusomerInfo,cusomerManager,categoryManager
     },
     data() {
       return {
@@ -36,7 +40,8 @@
           {name: 'cusomerInfo', label:'个人信息'},
         ],
         adminTabs: [
-          {name: 'cusomerManager', label:'用户管理'}
+          {name: 'cusomerManager', label:'用户管理'},
+          {name: 'categoryManager', label:'分类管理'}
         ],
         tabsDefault: 'cusomerInfo',
         userInfo:{}

src/views/setting/tabs/categoryManager.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="container" v-wechat-title="title">
+    <el-dialog class="dialog-cm" :title="dialogTitle" :visible.sync="dialogVisible">
+      <el-form ref="managerForm" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="分类名称" prop="categoryName">
+          <el-input v-model="form.categoryName" />
+        </el-form-item>
+        <el-form-item label="分类缩略名">
+          <el-input v-model="form.thumbnailName" />
+        </el-form-item>
+        <el-form-item label="父级分类">
+          <el-cascader
+            v-model="form.parentCategoryName"
+            :options="categories"
+            :props="{ checkStrictly: true }"
+            clearable></el-cascader>
+        </el-form-item>
+        <el-form-item label="分类描述">
+          <el-input type="textarea" v-model="form.desc" />
+        </el-form-item>
+        <el-form-item>
+          <el-button native-type="submit" type="primary" @click.native.prevent="onSave('managerForm')">保 存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>分类列表</span>
+        <el-button class="card-button" type="text" @click="add">添加分类</el-button>
+      </div>
+      <el-table
+        :data="categoryList"
+        stripe
+      >
+        <el-table-column
+          prop="categoryName"
+          label="名称"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          prop="subCategoryNumber"
+          label="子分类"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          prop="quota"
+          label="缩略名"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          prop="quota"
+          label="默认"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          prop="quota"
+          label="文章数"
+          width="150">
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="250">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.username !== 'jmal'"
+              size="mini"
+              @click="handleEdit(scope.row.id,scope.row.username)"
+            >
+              编辑
+            </el-button>
+            <el-button v-if="scope.row.username !== 'jmal'"
+              size="mini"
+              @click="resetPassword(scope.row.id,scope.row.username)"
+            >
+              重置密码
+            </el-button>
+            <el-button v-if="scope.row.username !== 'jmal'"
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+  import categoryApi from "@/api/category";
+  import CropperDialog from '@/components/Cropper/dialog'
+
+  export default {
+    name: 'categoryManager',
+    components: {
+      CropperDialog
+    },
+    props: {
+    },
+    data() {
+      return {
+        title: "用户管理",
+        categoryList: [],
+        dialogVisible: false,
+        dialogTitle: '',
+        userUpdateLoading: false,
+        valid: true,
+        categories: [
+          { value: 'zhinan',
+            label: '指南',
+            children: [{
+            value: 'shejiyuanze',
+            label: '设计原则',
+            children: [{
+              value: 'yizhi',
+              label: '一致'
+            }, {
+              value: 'fankui',
+              label: '反馈'
+            }, {
+              value: 'xiaolv',
+              label: '效率'
+            }, {
+              value: 'kekong',
+              label: '可控'
+            }]}]
+          }
+        ],
+        form: {
+          categoryName: '',
+          thumbnailName: '',
+          parentCategoryName: '',
+          desc: ''
+        },
+        rules: {
+          categoryName: [
+            { required: true, message: '请输入分类名称', trigger: 'blur' },
+          ]
+        },
+        editMove: 1,// 1添加,2修改
+      }
+    },
+    computed: {
+    },
+    mounted() {
+      this.getCategories()
+    },
+    methods: {
+      getCategories(){
+        categoryApi.categories().then(res => {
+          this.categoryList = res.data
+        })
+      },
+      async add() {
+        this.dialogVisible = true
+        this.dialogTitle = '添加分类'
+        this.editMove = 1
+        await this.$nextTick()
+        this.$refs.managerForm.resetFields()
+      },
+      // 设置formData
+      setFormData() {
+        let data = new FormData();
+        for (let formKey in this.form) {
+          if(this.form.hasOwnProperty(formKey)){
+            data.append(formKey,this.form[formKey])
+          }
+        }
+        return data
+      },
+      // 保存
+      onSave() {
+        this.$refs.managerForm.validate((valid) => {
+          this.valid = valid
+          console.log(valid)
+          if (valid) {
+            console.log(this.form, this.setFormData())
+            this.userUpdateLoading = true
+            if(this.editMove === 1){
+              this.addCateGory(this.setFormData())
+            }
+            if(this.editMove === 2){
+              this.userCateGory(this.setFormData())
+            }
+          } else {
+            return false;
+          }
+        });
+      },
+      handleEdit(id) {
+        this.editMove = 2
+        this.dialogVisible = true
+        this.dialogTitle = '修改分类'
+        categoryApi.categoryInfo({
+          id: id,
+        }).then(res => {
+          this.form = res.data
+        })
+        categoryApi.categoryTree({username: this.$store.state.user.userId}).then(res => {
+          this.categories = res.data
+        })
+      },
+      // 删除分类
+      handleDelete(id) {
+        this.$confirm('是否删除该分类, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          categoryApi.delete(id).then(() => {
+            this.onSuccess('删除成功!')
+          }).catch(() => {
+            this.onError()
+          })
+        })
+      },
+      // 修改分类
+      userCateGory(data){
+        categoryApi.update(data).then(() => {
+          this.onSuccess()
+        }).catch(() => {
+          this.onError()
+        })
+      },
+      // 添加分类
+      addCateGory(data){
+        categoryApi.add(data).then(() => {
+          this.onSuccess()
+        }).catch(() => {
+          this.onError()
+        })
+      },
+      onSuccess(message){
+        this.getUserList()
+        let msg = '保存成功!'
+        if(message){
+          msg = message
+        }
+        this.userUpdateLoading = false
+        this.dialogVisible = false
+        this.$message({
+          message: msg,
+          type: 'success',
+          duration: 1000
+        })
+      },
+      onError() {
+        this.userUpdateLoading = false
+      }
+    }
+  }
+</script>
+
+<!--<style src="@styles/cropper.css"></style>-->
+<style lang="scss" scoped>
+  @import "src/styles/setting";
+  .card-button {
+    float: right;
+    padding: 3px 0;
+  }
+  .box-card {
+    max-width: 800px;
+  }
+</style>