分类管理功能开发

分类表设计与代码生成

简单的树型结构的设计,使用parent列,标识父节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 分类
drop table if exists `category`;
create table `category` (
`id` bigint not null comment 'id',
`parent` bigint not null default 0 comment '父id',
`name` varchar(50) not null comment '名称',
`sort` int comment '顺序',
primary key (`id`)
) engine=innodb default charset=utf8mb4 comment='分类';

insert into `category` (id, parent, name, sort) values (100, 000, '前端开发', 100);
insert into `category` (id, parent, name, sort) values (101, 100, 'Vue', 101);
insert into `category` (id, parent, name, sort) values (102, 100, 'HTML & CSS', 102);
insert into `category` (id, parent, name, sort) values (200, 000, 'Java', 200);
insert into `category` (id, parent, name, sort) values (201, 200, '基础应用', 201);
insert into `category` (id, parent, name, sort) values (202, 200, '框架应用', 202);
insert into `category` (id, parent, name, sort) values (300, 000, 'Python', 300);
insert into `category` (id, parent, name, sort) values (301, 300, '基础应用', 301);
insert into `category` (id, parent, name, sort) values (302, 300, '进阶方向应用', 302);
insert into `category` (id, parent, name, sort) values (400, 000, '数据库', 400);
insert into `category` (id, parent, name, sort) values (401, 400, 'MySQL', 401);
insert into `category` (id, parent, name, sort) values (500, 000, '其它', 500);
insert into `category` (id, parent, name, sort) values (501, 500, '服务器', 501);
insert into `category` (id, parent, name, sort) values (502, 500, '开发工具', 502);
insert into `category` (id, parent, name, sort) values (503, 500, '热门服务端语言', 503);

完成分类基本增删改查功能

  • 复制技巧:勾选大小写匹配,首字母大写替换,首字母小写替换、中文替换
  • 当某个文件所做的修改不想要了,可以使用revert菜单,代码回退
  • Ctrl+E 可以打开历史操作过的文件列表
  • 项目中用到的categorys不是一个标准的单词,这是项目的约定:所有的复数,都是在单数的后面直接+s
    此时会有波浪号警告,可以Alt+Enter,将其添加到词典中
  • 注意:Ctrl+D不会覆盖原来复制的东西
    比如:我先Ctrl+C复制了”Category”,然后Ctrl+D复制了任意一行代码,之后我Ctrl+V依然可以粘贴出”Category”
  • 点击放大镜按钮可以找到替换历史

分类表格显示优化

  • 不需要分页,一次查出全部数据
  • 改为树形表格展示
  • 学会看日志查问题
  • vue,给属性绑定值时,加冒号和不加冒号的区别
    不加冒号的话,属性值全部是字符串
    加冒号的话,可以使用字符串、数字、布尔值,以及响应式变量
  • 递归算法的套路:
    自己调用自己,直到某个条件不再调用自己
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 递归算法套路
* 在if里调用自己,或者在else里调用自己都可以
* 下面是以在if里调用自己为例
*/
public static func () {
if (...) {
// 触发条件时,自己调用自己
func()
} else {
// 不再调用自己
}
return ;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* 使用递归将数组转为树形结构
* 父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;
}

分类编辑功能优化

编辑(新增/修改)分类时,支持选中某一分类作为父分类,或无父分类

如果是在标签属性中使用响应式变量,直接使用属性,如果是在html内容中使用响应式变量,应该用{{}}包起来

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

电子书管理增加分类选择

  • 电子书管理页面,使用级联选择组件Cascader,选择分类
  • 电子书列表应该显示分类名称,而不是分类ID
  • 对a-table某一列有自定义的显示方式,可以定义一个template,添加一种渲染效果
  • 在setup里面可以定义普通的变量,不需要所有的变量都是响应式变量
  • 第三方组件会提供内置的变量参数,如果不知道是什么值,可以打印到界面或日志看看。

首页显示分类菜单

  • 加载所有分类列表,并转成树形结构

  • 将菜单数据改成使用分类树

  • JS定时器
    setTimeout:只执行一次
    setInterval:重复执行

点击分类菜单显示电子书

  • 首页默认显示欢迎页面
    点击欢迎时,显示欢迎组件,点击分类时,显示电子书

  • 点击某分类时,显示该分类下的电子书
    点击分类时,重新查询电子书
    电子书后端接口增加分类参数