📝个人主页：哈__

期待您的关注 

目录

一、🔥今日目标

二、🌏前端部分的改造

2.1 新增一个tool.ts 

2.2 新增admin-categoty.vue

2.3 添加新的路由规则

2.4 添加the-welcome.vue

2.5 修改HomeView.vue

 三、❗注意

一、🔥今日目标

【wiki知识库】04.SpringBoot后端实现电子书的增删改查以及前端界面的展示-CSDN博客

上回带大家把电子书管理的模块做了出来，能够实现电子书的添加、修改和删除功能了，今天带着大家把分类的接口实现一下。下方我添加了一个分类管理的组件，展示我们当前的所有分类，你可以看到这个分类页面还是一个树形结构的。

除了分类管理，我们的首页也变动了一下。首页的导航栏加载的是我们已经有的分类，同时还加上了一个欢迎页面。

 

二、🌏前端部分的改造

2.1 新增一个tool.ts 

在util包下建立一个tool.ts文件，这个文件是我们的工具文件，之前的代码可能也用到过了，我忘记给大家了。

export class Tool {

/**

* 空校验 null或""都返回true

*/

public static isEmpty(obj: any) {

if ((typeof obj === 'string')) {

return !obj || obj.replace(/\s+/g, "") === ""

} else {

return (!obj || JSON.stringify(obj) === "{}" || obj.length === 0);

}

}

/**

* 非空校验

*/

public static isNotEmpty(obj: any) {

return !this.isEmpty(obj);

}

/**

* 对象复制

* @param obj

*/

public static copy(obj: object) {

if (Tool.isNotEmpty(obj)) {

return JSON.parse(JSON.stringify(obj));

}

}

/**

* 使用递归将数组转为树形结构

* 父ID属性为parent

*/

public static array2Tree(array: any, parentId: number) {

if (Tool.isEmpty(array)) {

return [];

}

const result = [];

for (let i = 0; i < array.length; i++) {

const c = array[i];

// console.log(Number(c.parent), Number(parentId));

if (Number(c.parent) === Number(parentId)) {

result.push(c);

// 递归查看当前节点对应的子节点

const children = Tool.array2Tree(array, c.id);

if (Tool.isNotEmpty(children)) {

c.children = children;

}

}

}

return result;

}

/**

* 随机生成[len]长度的[radix]进制数

* @param len

* @param radix 默认62

* @returns {string}

*/

public static uuid(len: number, radix = 62) {

const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');

const uuid = [];

radix = radix || chars.length;

for (let i = 0; i < len; i++) {

uuid[i] = chars[0 | Math.random() * radix];

}

return uuid.join('');

}

}

2.2 新增admin-categoty.vue

在admin包下，创建admin-category.vue，这个组件用来展示我们的分类信息。这一部分我带着大家稍微过一下。

---

分类添加功能：

在我们点击添加或者编辑功能的时候，会把下边的代码以一个窗口的模式弹出，在这个窗口中展示了当前分类的名称，当前分类的父分类是谁以及当前分类的分类序号。在我们为一个分类进行添加或者修改的时候，我们都要涉及到这个分类到底是第一分类还是第二分类的问题，我们使用了一个level1变量来保存我们的分类结构，这个结构下边在讲。

<a-modal

title="分类表单"

v-model:visible="modalVisible"

:confirm-loading="modalLoading"

@ok="handleModalOk"

>

<a-form :model="category" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">

<a-form-item label="名称">

<a-input v-model:value="category.name" />

</a-form-item>

<a-form-item label="父分类">

<a-select

v-model:value="category.parent"

ref="select"

>

<a-select-option :value="0">

无

</a-select-option>

<a-select-option v-for="c in level1" :key="c.id" :value="c.id" :disabled="category.id === c.id">

{ {c.name}}

</a-select-option>

</a-select>

</a-form-item>

<a-form-item label="顺序">

<a-input v-model:value="category.sort" />

</a-form-item>

</a-form>

</a-modal>

我们的分类结构可以用一张图来表示。 我给每一个分类都排上了一个编号，第一级分类的parent编号都为0，二级分类的parent编号则要相对应其父分类的编号。

---

level变量的封装过程：

我们的level变量是和我们全部的分类变量有关的，我们先要获取所有的分类然后对分类进行重新组合。

const handleQuery = () => {

loading.value = true;

// 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据

level1.value = [];

axios.get("/category/all").then((response) => {

loading.value = false;

const data = response.data;

if (data.success) {

categorys.value = data.content;

console.log("原始数组：", categorys.value);

level1.value = [];

level1.value = Tool.array2Tree(categorys.value, 0);

console.log("树形结构：", level1);

} else {

message.error(data.message);

}

});

};

这时候打开我们的tool.ts来看一看。你会看到一共有两个参数，第一个参数呢我们传的是一个数据数组，第二个我们传来的是0。

首先我们判断一下传过来的数组是不是空的，如果是空的直接返回，否则的话执行下方逻辑。

首先遍历我们所有的分类，检查每一个分类的父分类的编号是不是我们传过来的0，这里你应该会理解为什么这样做，因为我们要把一个数据数据重新格式化成树的形式，那我们一定要先找到这棵树的一级分类，也就是父节点编号为0的分类，找到了之后呢我们把这个分类加到result当中。然后呢我们再次调用array2Tree这个方法，同时传入两个参数，第一个参数还是之前的全部分类的数组，但是第二个参数就不是0了，是我们刚才加入到result中的分类的编号，我们这次调用这个方法的目的是为了找到一级分类的子分类：二级分类。

这样的一次递归调用就可以将数据进行树化。（不懂私信我）

/**

* 使用递归将数组转为树形结构

* 父ID属性为parent

*/

public static array2Tree(array: any, parentId: number) {

if (Tool.isEmpty(array)) {

return [];

}

const result = [];

for (let i = 0; i < array.length; i++) {

const c = array[i];

// console.log(Number(c.parent), Number(parentId));

if (Number(c.parent) === Number(parentId)) {

result.push(c);

// 递归查看当前节点对应的子节点

const children = Tool.array2Tree(array, c.id);

if (Tool.isNotEmpty(children)) {

c.children = children;

}

}

}

return result;

}

---

 全部代码如下：

<template>

<a-layout>

<a-layout-content

:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"

>

<p>

<a-form layout="inline" :model="param">

<a-form-item>

<a-input v-model:value="param.name" placeholder="名称">

</a-input>

</a-form-item>

<a-form-item>

<a-button type="primary" @click="handleQuery()">

查询

</a-button>

</a-form-item>

<a-form-item>

<a-button type="primary" @click="add()">

新增

</a-button>

</a-form-item>

</a-form>

</p>

<p>

<a-alert

class="tip"

message="小提示：这里的分类会显示到首页的侧边菜单"

type="info"

closable

/>

</p>

<a-table

v-if="level1.length > 0"

:columns="columns"

:row-key="record => record.id"

:data-source="level1"

:loading="loading"

:pagination="false"

:defaultExpandAllRows="true"

>

<template #cover="{ text: cover }">

<img v-if="cover" :src="cover" alt="avatar" />

</template>

<template v-slot:action="{ text, record }">

<a-space size="small">

<a-button type="primary" @click="edit(record)">

编辑

</a-button>

<a-popconfirm

title="删除后不可恢复，确认删除?"

ok-text="是"

cancel-text="否"

@confirm="handleDelete(record.id)"

>

<a-button type="danger">

删除

</a-button>

</a-popconfirm>

</a-space>

</template>

</a-table>

</a-layout-content>

</a-layout>

<a-modal

title="分类表单"

v-model:visible="modalVisible"

:confirm-loading="modalLoading"

@ok="handleModalOk"

>

<a-form :model="category" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">

<a-form-item label="名称">

<a-input v-model:value="category.name" />

</a-form-item>

<a-form-item label="父分类">

<a-select

v-model:value="category.parent"

ref="select"

>

<a-select-option :value="0">

无

</a-select-option>

<a-select-option v-for="c in level1" :key="c.id" :value="c.id" :disabled="category.id === c.id">

{ {c.name}}

</a-select-option>

</a-select>

</a-form-item>

<a-form-item label="顺序">

<a-input v-model:value="category.sort" />

</a-form-item>

</a-form>

</a-modal>

</template>

<script lang="ts">

import { defineComponent, onMounted, ref } from 'vue';

import axios from 'axios';

import { message } from 'ant-design-vue';

import {Tool} from "@/util/tool";

export default defineComponent({

name: 'AdminCategory',

setup() {

const param = ref();

param.value = {};

const categorys = ref();

const loading = ref(false);

const columns = [

{

title: '名称',

dataIndex: 'name'

},

// {

// title: '父分类',

// key: 'parent',

// dataIndex: 'parent'

// },

{

title: '顺序',

dataIndex: 'sort'

},

{

title: 'Action',

key: 'action',

slots: { customRender: 'action' }

}

];

/**

* 一级分类树，children属性就是二级分类

* [{

* id: "",

* name: "",

* children: [{

* id: "",

* name: "",

* }]

* }]

*/

const level1 = ref(); // 一级分类树，children属性就是二级分类

level1.value = [];

/**

* 数据查询

**/

const handleQuery = () => {

loading.value = true;

// 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据

level1.value = [];

axios.get("/category/all").then((response) => {

loading.value = false;

const data = response.data;

if (data.success) {

categorys.value = data.content;

console.log("原始数组：", categorys.value);

level1.value = [];

level1.value = Tool.array2Tree(categorys.value, 0);

console.log("树形结构：", level1);

} else {

message.error(data.message);

}

});

};

// -------- 表单 ---------

const category = ref({});

const modalVisible = ref(false);

const modalLoading = ref(false);

const handleModalOk = () => {

modalLoading.value = true;

axios.post("/category/save", category.value).then((response) => {

modalLoading.value = false;

const data = response.data; // data = commonResp

if (data.success) {

modalVisible.value = false;

// 重新加载列表

handleQuery();

} else {

message.error(data.message);

}

});

};

/**

* 编辑

*/

const edit = (record: any) => {

modalVisible.value = true;

category.value = Tool.copy(record);

};

/**

* 新增

*/

const add = () => {

modalVisible.value = true;

category.value = {};

};

const handleDelete = (id: number) => {

axios.delete("/category/delete/" + id).then((response) => {

const data = response.data; // data = commonResp

if (data.success) {

// 重新加载列表

handleQuery();

} else {

message.error(data.message);

}

});

};

onMounted(() => {

handleQuery();

});

return {

param,

// categorys,

level1,

columns,

loading,

handleQuery,

edit,

add,

category,

modalVisible,

modalLoading,

handleModalOk,

handleDelete

}

}

});

</script>

<style scoped>

img {

width: 50px;

height: 50px;

}

</style>

2.3 添加新的路由规则

{

path: '/admin/category',

name: 'AdminCateGory',

component: AdminCategory

},

2.4 添加the-welcome.vue

在component文件夹下边 添加the-welcome.vue页面。

<template>

<span>欢迎</span>

</template>

<script lang="ts">

name: 'the-welcome'

</script>

<style scoped>

</style>

2.5 修改HomeView.vue

这里做出了一些修改，一个是the-welcome组件的展示，还有一个就是页面侧边栏的展示，我们之前展示的是页面默认的，现在我们要展示数据库当中的分类结构。里边我们有一些代码还用不到，但是我没有注释掉。

<template>

<a-layout>

<a-layout-sider width="200" style="background: #fff">

<a-menu

mode="inline"

:style="{ height: '100%', borderRight: 0 }"

@click="handleClick"

:openKeys="openKeys"

>

<a-menu-item key="welcome">

<MailOutlined />

<span>欢迎</span>

</a-menu-item>

<a-sub-menu v-for="item in level1" :key="item.id" :disabled="true">

<template v-slot:title>

<span><user-outlined />{ {item.name}}</span>

</template>

<a-menu-item v-for="child in item.children" :key="child.id">

<MailOutlined /><span>{ {child.name}}</span>

</a-menu-item>

</a-sub-menu>

<a-menu-item key="tip" :disabled="true">

<span>以上菜单在分类管理配置</span>

</a-menu-item>

</a-menu>

</a-layout-sider>

<a-layout-content

:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"

>

<div class="welcome" v-show="isShowWelcome">

<the-welcome></the-welcome>

</div>

<a-list v-show="!isShowWelcome" item-layout="vertical" size="large" :grid="{ gutter: 20, column: 3 }" :data-source="ebooks">

<template #renderItem="{ item }">

<a-list-item key="item.name">

<template #actions>

<span>

<component v-bind:is="'FileOutlined'" style="margin-right: 8px" />

{ { item.docCount }}

</span>

<span>

<component v-bind:is="'UserOutlined'" style="margin-right: 8px" />

{ { item.viewCount }}

</span>

<span>

<component v-bind:is="'LikeOutlined'" style="margin-right: 8px" />

{ { item.voteCount }}

</span>

</template>

<a-list-item-meta :description="item.description">

<template #title>

<router-link :to="'/doc?ebookId=' + item.id">

{ { item.name }}

</router-link>

</template>

<template #avatar><a-avatar :src="item.cover"/></template>

</a-list-item-meta>

</a-list-item>

</template>

</a-list>

</a-layout-content>

</a-layout>

</template>

<script lang="ts">

import { defineComponent, onMounted, ref, reactive, toRef } from 'vue';

import axios from 'axios';

import { message } from 'ant-design-vue';

import {Tool} from "@/util/tool";

import TheWelcome from '@/components/the-welcome.vue';

export default defineComponent({

name: 'Home',

components: {

TheWelcome

},

setup() {

const ebooks = ref();

// const ebooks1 = reactive({books: []});

const openKeys = ref();

const level1 = ref();

let categorys: any;

/**

* 查询所有分类

**/

const handleQueryCategory = () => {

axios.get("/category/all").then((response) => {

const data = response.data;

if (data.success) {

categorys = data.content;

console.log("原始数组：", categorys);

// 加载完分类后，将侧边栏全部展开

openKeys.value = [];

for (let i = 0; i < categorys.length; i++) {

openKeys.value.push(categorys[i].id)

}

level1.value = [];

level1.value = Tool.array2Tree(categorys, 0);

console.log("树形结构：", level1.value);

} else {

message.error(data.message);

}

});

};

const isShowWelcome = ref(true);

let categoryId2 = 0;

const handleQueryEbook = () => {

axios.get("/ebook/list", {

params: {

page: 1,

size: 1000,

categoryId2: categoryId2

}

}).then((response) => {

const data = response.data;

ebooks.value = data.content.list;

// ebooks1.books = data.content;

});

};

const handleClick = (value: any) => {

// console.log("menu click", value)

if (value.key === 'welcome') {

isShowWelcome.value = true;

} else {

categoryId2 = value.key;

isShowWelcome.value = false;

handleQueryEbook();

}

// isShowWelcome.value = value.key === 'welcome';

};

onMounted(() => {

handleQueryCategory();

// handleQueryEbook();

});

return {

ebooks,

// ebooks2: toRef(ebooks1, "books"),

// listData,

pagination: {

onChange: (page: any) => {

console.log(page);

},

pageSize: 3,

},

handleClick,

level1,

isShowWelcome,

openKeys

}

}

});

</script>

<style scoped>

.ant-avatar {

width: 50px;

height: 50px;

line-height: 50px;

border-radius: 8%;

margin: 5px 0;

}

</style>

 三、❗注意

在之前写的admin-ebook.vue当中还有一些代码是注释掉的，因为之前没有写分类模块，现在我们需要使用分类的功能了，我们还需要解除一些注释。大家可以看看哪些地方有关category的被注释掉了，大家可以打开，后端接口下一篇文章就会带大家写出来。

这里需要修改一些onMounted()函数中的代码，修改成下边的部分。

onMounted(() => {

handleQueryCategory();

// handleQueryEbook();

});

此外，这个网站的标题头部的信息可能我之前没加上去，就是这个。

 在the-header.vue中修改一下自己的代码。

在下边的style中加上样式。然后就可以展示出来了。

<style>

.logo {

width: 120px;

height: 31px;

/*background: rgba(255, 255, 255, 0.2);*/

/*margin: 16px 28px 16px 0;*/

float: left;

color: white;

font-size: 18px;

}

</style>