From a9194a2a47fdcf1186d34ed81e9a7a4f3681bca3 Mon Sep 17 00:00:00 2001 From: leet <896600628@qq.com> Date: Wed, 15 Jan 2025 16:27:43 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E5=86=85=E9=83=A8=E4=BA=BA=E5=91=98?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=B3=BB=E7=BB=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/config.ts | 2 +- docs/function/video.md | 4 +- docs/index.md | 5 ++- docs/project/list.md | 0 docs/project/personManagement.md | 76 ++++++++++++++++++++++++++++++++ docs/project/project.md | 1 + 6 files changed, 84 insertions(+), 4 deletions(-) delete mode 100644 docs/project/list.md create mode 100644 docs/project/personManagement.md diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 6cd372d..a45168d 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -87,7 +87,7 @@ function sidebarProject(): DefaultTheme.SidebarItem[] { text: '项目列表', collapsed: false, items: [ - { text: '项目列表', base: '/project/', link: 'list' }, + { text: '内部人员管理系统', base: '/project/', link: 'personManagement' }, ], }, ] diff --git a/docs/function/video.md b/docs/function/video.md index 901c5f4..7995bbe 100644 --- a/docs/function/video.md +++ b/docs/function/video.md @@ -242,9 +242,9 @@ router.post('/play', async (req, res, next) => { ``` -上述代码中的VideoStream类是一个封装好的类，其中的startTransCodo方法就是新建一个Mpeg1Muxer类的实例 +上述代码中的`VideoStream`类是一个封装好的类，其中的`startTransCodo`方法就是新建一个`Mpeg1Muxer`类的实例 -这个Mpeg1Muxer类能够开启一个子进程，调用FFMPEG将RTSP视频流转换成mpeg-ts格式流，然后通过websocket发送出去，前端通过websocket接收到视频每一帧的二进制流，然后使用JSMPEG库在canvas中展示画面。 +这个`Mpeg1Muxer`类能够开启一个子进程，调用FFMPEG将RTSP视频流转换成mpeg-ts格式流，然后通过websocket发送出去，前端通过websocket接收到视频每一帧的二进制流，然后使用JSMPEG库在canvas中展示画面。 ```JS // 生成唯一ID diff --git a/docs/index.md b/docs/index.md index e2a6adb..3662071 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,8 +7,11 @@ hero: tagline: actions: - theme: brand - text: 查看 + text: 查看文档 link: /introduction + - theme: brand + text: 查看项目 + link: /project/project - theme: alt text: GitHub link: https://github.com/lily0325/lily0325.github.io diff --git a/docs/project/list.md b/docs/project/list.md deleted file mode 100644 index e69de29..0000000 diff --git a/docs/project/personManagement.md b/docs/project/personManagement.md new file mode 100644 index 0000000..b237d09 --- /dev/null +++ b/docs/project/personManagement.md @@ -0,0 +1,76 @@ +# 内部人员管理系统复盘 + +## 简介 + +一般的人员管理系统(后台管理系统+小程序或H5)包括： + +1. 人员信息管理(人员信息多字段增删改查) + +2. 内部活动报名管理(活动信息增删改查、批量报名/取消报名、活动签到、活动剪影编辑展示与存储) + +3. 内部知识库管理(文件上传、文件预览、文件下载、文件搜索、文件查看记录) + +4. 内部积分管理(积分排名展示、积分记录查询、积分数据导出、积分兑换) + +5. 内部用户权限管理(用户角色管理、用户权限管理、机构层级管理) + +6. PC端与小程序端用户登录(PC端通过小程序扫码登录、小程序通过微信登录) + + +## 全栈开发过程中的难点与问题 + +### 1.活动剪影内容的编辑展示与存储(富文本编辑器) + +#### `编辑` + +在内容的编辑功能用主流的富文本编辑器就可以，如`wangEditor`、`quill`、`tinymce`等。 + +我这边使用的是`wangEditor`，它的文档和api非常详细，而且有丰富的插件，非常适合当前的需求。 + +#### `存储` + +存储有两种思路方案： + +1. 将富文本编辑器里的html代码弄成string字符串存储到数据库中，前端渲染时直接将html代码渲染到富文本编辑器中。 + + 图片的话采用每次上传都将图片上传到服务器，然后在html里使用的是图片url的方式。 + + 图片和文字分开存储，图片存在服务器文件夹里，文字(包括图片的链接)存到数据库里(longtext)。 + + 弊端是当图片较多时会走特别多请求，还要兼顾图片是否上传但是又在文章中删除的情况，需要一个删除图片接口在这种情况下调用。 + +2. 直接将富文本编辑器里的html代码包括图片弄成一个完整的html文件，当作正常的文件上传到服务器当中 + + 图片是base64编码的格式，直接与文字一起存到服务器的数据库中。 + + 弊端是图片是base64编码的(base64格式下的图片大小比原本图片大小大概多三分之一)，如果图片多会导致整个html文件大小过大。 + + +#### `展示` + +`在网页端展示时`：直接将html代码渲染到富文本编辑器中即可。 + +`在小程序端展示时`： + +如果是使用第一种存储方案，小程序就需要先去通过接口请求数据库中对应的文章html字符串，然后通过vue中的`v-html`指令渲染到页面上。 + +如果是使用第二种存储方案，小程序直接就通过`web-view`组件去展示，直接将文章的后端html地址传给该组件就能够直接展示，前提是在小程序后台管理那边设置业务域名白名单成功，不然也没得展示。 + + +### 2.文件上传与预览 + +#### `文件上传` + +文件上传主要还是`单文件上传`与`大文件分片上传`，考虑到一般内部使用的系统基本也不可能有重复的文件要上传，所以就没搞快传功能。 + +使用单文件上传还是大文件分片上传的文件大小边界设定是10MB，小于10MB的文件使用单文件上传，大于10MB的文件使用大文件分片上传。 + + + + + + +#### `文件预览` + + + diff --git a/docs/project/project.md b/docs/project/project.md index 2d017ec..8821b63 100644 --- a/docs/project/project.md +++ b/docs/project/project.md @@ -3,3 +3,4 @@ ## 概述 这里是专门写的一些项目的汇总，比如开发过的一些项目，一些使用过的开源项目等等。 +展示该项目所拥有的功能，所用到的技术栈，以及在开发时遇到的问题与难点。 \ No newline at end of file