文档管理功能开发

文档表设计与代码生成

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
-- 文档表
drop table if exists `doc`;
create table `doc` (
`id` bigint not null comment 'id',
`ebook_id` bigint not null default 0 comment '电子书id',
`parent` bigint not null default 0 comment '父id',
`name` varchar(50) not null comment '名称',
`sort` int comment '顺序',
`view_count` int default 0 comment '阅读数',
`vote_count` int default 0 comment '点赞数',
primary key (`id`)
) engine=innodb default charset=utf8mb4 comment='文档';

insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (1, 1, 0, '文档1', 1, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (2, 1, 1, '文档1.1', 1, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (3, 1, 0, '文档2', 2, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (4, 1, 3, '文档2.1', 1, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (5, 1, 3, '文档2.2', 2, 0, 0);
insert into `doc` (id, ebook_id, parent, name, sort, view_count, vote_count) values (6, 1, 5, '文档2.2.1', 1, 0, 0);

完成文档表基本增删改查功能

按照分类管理,复制出一套文档管理的代码

使用树形选择组件选择父节点

  • a-tree-select树形选择组件的使用
  • 递归算法
  • 数组操作:unshift, shift, push, pop

Vue页面参数传递完成新增文档功能

使用route来获取当前路由的信息

1
2
3
4
5
6
7
8
9
10
11
12
import { useRoute } from 'vue-router'

....

const route = useRoute();
console.log("路由:", route);
console.log("route.path:", route.path);
console.log("route.query:", route.query);
console.log("route.fullPath:", route.fullPath);
console.log("route.param:", route.params);
console.log("route.name:", route.name);
console.log("route.meta:", route.meta);

路由url参数传递的两种方法

  • /admin/doc?ebookId=xxx
  • /admin/doc/xxx

增加删除文档功能

  • 树枝的删除,可以将递归算法放到前端
  • 重要的操作增加二次确认

集成富文本插件wangEditor

  • 概念:富文本
  • 在Vue中集成富文本框插件wangeditor
  • v-modal在第一次显示的时候才会创建modal元素,所以初始要去找modal里的元素是找不到的

文档内容表设计与代码生成

代码编辑区域,绿色表示代码新增,蓝色表示代码修改

  • 大字段放在单独的表里
1
2
3
4
5
6
7
-- 文档内容
drop table if exists `content`;
create table `content` (
`id` bigint not null comment '文档id',
`content` mediumtext not null comment '内容',
primary key (`id`)
) engine=innodb default charset=utf8mb4 comment='文档内容';

文档管理页面布局修改

  • 概念:响应式设计
  • 如果要做前端,建议学习Bootstrap
  • 栅格系统的使用
  • 默认展开表格树需要配合上v-if

文档内容的保存

  • 使用editor.txt.html()获取内容
  • 使用editor.txt.html(xxx)设置内容

文档内容的显示

Mybatis-Generator生成的列:

  • Base_Column_List:基本类型字段
  • Blob_Column_List:大文本类型字段

文档页面功能开发

  • 树形组件a-tree的使用
  • 通过Checkout操作,可以回到以前的提交点,运行当时的代码程序

  • 新加的样式,不要影响页面其它内容,给目标区域加个特定的样式名字,如课程中用的class=“wangeditor”
  • 使用!important提高样式的优先级
  • style里加了scoped属性,表示里面的属性只在当前页面有用,不加scoped的话,则是全局起作用
  • 抽屉组件a-drawer的使用

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!