前后端工具模块记录

概要

本篇内容主要为记录平时开发学习中了解到的后台和前端的开发模块与设计知识，不同的设计模块代码会保存在笔者本地的电脑，在这篇笔记里进行索引和原理记录，前端的设计样式会以贴图的形式展示，并同样对笔者电脑内的代码进行索引。

用途

1. 设计页面时，作为一个灵感来源
2. 开发时直接搜寻代码，缩短开发时间

java后台

websocket后台配置

配置代码：D:\自己做的项目\github体验项目\SpringBoot + VueJS 人力资源管理\vhr\hrserver\src\main\java\org\sang\config\WebSocketConfig.java

接口代码：D:\自己做的项目\github体验项目\SpringBoot + VueJS 人力资源管理\vhr\hrserver\src\main\java\org\sang\controller\WsController.java

使用Apache POI进行excel文件的导入导出

前端

mavon MarkDown编辑器

代码目录：

D:\自己做的项目\github体验项目\SpringBoot + VueJS V部落\VBlog\vueblog\src\components\PostArticle.vue

卡片式用户管理

.png)

代码目录：

D:\自己做的项目\github体验项目\SpringBoot + VueJS V部落\VBlog\vueblog\src\components\UserMana.vue

webSocket网页聊天

.png)

前端使用sockJS

代码目录：D:\自己做的项目\github体验项目\SpringBoot + VueJS 人力资源管理\vhr\vuehr\src\components\chat\FriendChat.vue

高级表格设计

• 搜索

.png)

• 增加/修改

.png)

代码目录：

D:\自己做的项目\github体验项目\SpringBoot + VueJS 人力资源管理\vhr\vuehr\src\components\emp\EmpBasic.vue

浮动信息展示

所用组件： elementUI el-tooltip

代码目录：D:\自己做的项目\github体验项目\SpringBoot + VueJS 人力资源管理\vhr\vuehr\src\components\salary\SalSobCfg.vue

不同角色的权限分配

.png)

所用组件： elementUI el-collapse折叠面板 el-tree树形控件

代码目录： D:\自己做的项目\github体验项目\SpringBoot + VueJS 人力资源管理\vhr\vuehr\src\components\system\basic\MenuRole.vue

步骤引导

.png)

所用组件 elementUI el-steps

代码目录：D:\自己做的项目\github体验项目\SpringBoot + VueJS 人力资源管理\vhr\vuehr\src\components\salary\SalSob.vue