课程名称:Spring Boot+Vue3前后端分离,实战wiki知识库系统
章节名称:8-12 文档页面功能开发-2
讲师姓名:甲蛙
文档内容:
- 8-2 文档表设计与代码生成
简单的树型结构的设计,使用parent列,标识父节点
- 8-4 使用树形选择组件选择父节点
a-tree-select树形选择组件的使用
递归算法
数组操作:unshift, shift, push, pop
8-5 Vue页面参数传递完成新增文档功能
使用route来获取当前路由的信息
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
- 8-6 增加删除文档功能
树枝的删除,可以将递归算法放到前端
重要的操作增加二次确认
- 8-7 增加删除文档功能
概念:富文本
在Vue中集成富文本框插件wangeditor
v-modal在第一次显示的时候才会创建modal元素,所以初始要去找modal里的元素是找不到的
- 8-8 文档内容表设计与代码生成
代码编辑区域,绿色表示代码新增,蓝色表示代码修改
大字段放在单独的表里
- 8-9 文档管理页面布局修改
概念:响应式设计
如果要做前端,建议学习Bootstrap
栅格系统的使用
默认展开表格树需要配合上v-if
- 8-10 文档内容的保存
使用editor.txt.html()获取内容
使用editor.txt.html(xxx)设置内容
- 8-11 文档内容的显示
Mybatis-Generator生成的列:
Base_Column_List:基本类型字段
Blob_Column_List:大文本类型字段
- 8-12 文档页面功能开发
树形组件a-tree的使用
通过Checkout操作,可以回到以前的提交点,运行当时的代码程序
新加的样式,不要影响页面其它内容,给目标区域加个特定的样式名字,如课程中用的class=“wangeditor”
使用!important提高样式的优先级
style里加了scoped属性,表示里面的属性只在当前页面有用,不加scoped的话,则是全局起作用
抽屉组件a-drawer的使用
总结:
这里就是复习一下这一大章的内容,将知识点总结一下,总结都在上面了。
共同学习,写下你的评论
评论加载中...
作者其他优质文章