耗时两个多月,我的全栈项目(vue3+nest)完成啦

前言

因为看到别人做的博客网站十分华丽而且功能繁多,所以下定决心自己做一个博客网站。其实在去年9月我就做过一个类似的博客网站了,只不过当时是用vue2和springboot,而且网站也不是很好看,所以今年暑假我决定将它重构!

前端架构

前端部分主要包括了前台和后台两个模块。我选择了 Vue 3 作为基础框架,搭配 TypeScript。此外,我也使用了一些优秀的库,如 axios 处理网络请求、v-md-editor 实现富文本编辑等。

后端技术栈

在后端部分,我选择了 Nest 作为基础框架,它提供了一个强大且高效的开发环境,使我能够更专注于业务逻辑的实现。作为数据库,我选用了 MySQL,并使用 TypeORM 作为 ORM 框架。在权限控制方面,我使用了 @nestjs/jwt 和 passport-jwt 来保障系统的安全性。为了提高系统的性能,我引入了 Redis 作为缓存中间件,另外,为了实现对象存储功能,我采用了 Minio,并借助其丰富的功能集成到项目中。

高安全性与性能优化

  • 为了保障系统的安全性,我采用了 helmet 来设置安全头部,同时通过 express-rate-limit 限制了用户的访问频率,以防止恶意请求。为了保障用户信息的安全,我引入了 bcrypt 进行密码加密。

  • 在性能优化方面,我使用了 TypeORM 的延迟加载特性,以减少数据库查询的复杂性,提高了系统的响应速度。另外,通过使用 Redis 作为缓存中间件,有效地减轻了数据库的压力,提高了系统的整体性能。

在线地址

效果图

前台图片1:

前台图片2:

前台图片3:

前台图片4:

后台图片1:

后台图片2:

相关技术

前端:

  • 样式来自于:hexo的shoka主题
  • 基础框架:Vue3
  • 状态管理:Pinia
  • 路由组件:vue-router
  • 网络请求:axios
  • 富文本编辑:v-md-editor
  • 其他技术:详见前端项目的package.json

后端:

  • 基础框架:Nest
  • 数据库:mysql
  • ORM框架:typeorm
  • 权限框架:@nestjs/jwt @nestjs/passport passport-jwt
  • 缓存中间件:redis
  • 对象存储:minio
  • 日志记录:winston
  • 安全设置:helmet express-rate-limit
  • 验证码生成:svg-captcha
  • 其他技术:详见后端项目的package.json

后续计划

等后续我再完善一下代码和写一篇部署文档就可以进行开源啦

虽然我目前仍在学校学习,但我保证会长期维护这个项目。我计划在未来进行前后台代码的优化,修复一些潜藏的 bug,并逐步完善项目的功能。同时,我也欢迎大家积极参与到这个项目中来,共同打造一个更加完善的系统。

相关推荐
excel7 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓7 小时前
调用openrouter的免费API模型
java·前端·javascript
武子康7 小时前
MultiNet6 空闲崩溃:`EXCVADDR=0x8` 后又出现 `CORRUPT HEAP`
人工智能·后端·agent
赛博守夜人7 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every7 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad8 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
武子康8 小时前
MultiNet7 每轮都 clean,ESP32-P4 内存为什么还在掉?
人工智能·后端·agent
缓慢更新8 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
超级架构师9 小时前
PRAXO-CORE 2.5.0:用 conformance 和显式边界构建 Go Agent 框架
开发语言·人工智能·后端·golang·ai编程·智能体框架·praxo-core
陈随易9 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员