最近抽空帮朋友写了个知识库,从需求的沟通、交互的设计、样式的确认、数据库的设计、后端的开发、前端的开发等都是我一个人在做(哈哈,这里“自负”下,对于一个大龄程序猿的我来说,so easy)。目前项目已经上线使用。在此记录总结下
背景
朋友在一家广告公司,他们经常要帮客户写活动策划案、设计活动宣传页等等,所以想对这方面的内容信息做个管理,说直接点,就是对写的方案文件(PDF、PPT),设计的活动宣传页(PSD、AI、图片),还有一些其他的活动宣传(视频类居多)等内容进行归纳、整理、记录。(打个广告:有此方面需求的,可自行搜索他们公司)
在和他沟通后,我整理了下需求,评估了工作量和技术复杂度等,觉得还行,就答应帮忙做这个知识库。
因为之前做过几年的.NET开发,对后端及数据库都了解。后来转了前端就一直用JS,并且现在Node方面的框架各方面表现都还不错,所以最终就选择基于JS技术栈来做这个知识库。
功能
系统流程
内容上传流程
文件下载流程
效果图
知识库
内容上传
我的空间
技术方面
1、微前端(micro-app)
项目不大,为啥会考虑用微前端呢?
1)管理类或者涉及用户、权限之类的系统,用户体系、权限体系、平台运营等都是通用的。所以,我想做个壳(主应用),后期不管增加什么功能模块,这个壳(主应用)基本不用动,只要接入的模块(也就是子应用),按要求接入即可。所以我选择了微前端。
2)前端的生态太“混乱”了,组件库太多,使用第三方组件库时版本是个头疼的问题,所以我想把各模块分开,相互独立。并且系统更新的时候,只需要更新对应的模块页面即可,这样避免了改一个样式,要把整个前端页面打包升级的情况。
3)最近在公司做项目整合及前端架构方面预研,了解了下微前端,个人觉得微前端+组件库,灵活度是真高。
2、前端框架:React
纯粹是vue写多了,想换个口味。结果就是用React写起来,真是丝滑。
3、后端服务:NestJS
后端API服务:NestJS + Fastify + Knex。
Node进程管理工具:pm2
(对于一个前端而言,上手很容易)
4、数据存储
Mysql + Redis
5、服务器
服务器用的Centos + Nginx
6、其他方面
大文件上传:采用的是分片上传方式
视频预览:采用的是m3u8方式。将视频转m3u8使用的是fluent-ffmpeg、@ffmpeg-installer/ffmpeg
PDF预览:采用将PDF转图片,前端懒加载的方式。将PDF转图片使用的是ImageMagick7.x
图片处理:图片处理主要是压缩和加水印,用的是jimp
最后
基本方向定了,那接下来,就开始写代码吧!😄