基于JS技术栈我搬了个知识库 - 介绍篇(一)

256 阅读3分钟

最近抽空帮朋友写了个知识库,从需求的沟通、交互的设计、样式的确认、数据库的设计、后端的开发、前端的开发等都是我一个人在做(哈哈,这里“自负”下,对于一个大龄程序猿的我来说,so easy)。目前项目已经上线使用。在此记录总结下

基于JS技术栈我搬了个知识库 - 介绍篇(一)

基于JS技术栈我搬了个知识库 - 前端篇(二)

背景

朋友在一家广告公司,他们经常要帮客户写活动策划案、设计活动宣传页等等,所以想对这方面的内容信息做个管理,说直接点,就是对写的方案文件(PDF、PPT),设计的活动宣传页(PSD、AI、图片),还有一些其他的活动宣传(视频类居多)等内容进行归纳、整理、记录。(打个广告:有此方面需求的,可自行搜索他们公司)

在和他沟通后,我整理了下需求,评估了工作量和技术复杂度等,觉得还行,就答应帮忙做这个知识库。

因为之前做过几年的.NET开发,对后端及数据库都了解。后来转了前端就一直用JS,并且现在Node方面的框架各方面表现都还不错,所以最终就选择基于JS技术栈来做这个知识库。

功能

WechatIMG492.jpg

系统流程

内容上传流程

image.png

文件下载流程

image.png

效果图

知识库

WechatIMG487.jpg

内容上传

image.png

我的空间

image.png

技术方面

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

最后

基本方向定了,那接下来,就开始写代码吧!😄