❄️你好，我是haixtx

欢迎来到我的个人博客，希望这里有你喜欢的文章~⛈ ❄️

PART1

关于博客项目：
项目node版本：v16.14.2

• 前台样式纯手写，偏简洁风，没有使用样式组件库，基于nuxt2开发，原本计划用nuxt3，但是在项目开发时nuxt3还处于rc版本，不可避免的会遇到很多坑，最后还是决定用稳定的nuxt2，前台博客少不了做响应式，这里我用的pxtorem+rem+vw+媒体查询实现响应式及移动端适配
• 后台管理系统基于vite3+vue3+ts开发，样式组件库使用element-plus，编辑器用的mavon-editor，个人感觉很好用，首页数据可视化用的echarts
• 后端用的express4版本，数据库使用mysql，使用jsonwebtoken实现token鉴权，上传图片用的busboy库

PART2

优化方面：

• 前台、后台、后端都结合nginx服务器开启http2、开启gzip、缓存静态资源（图片、js/css文件）进行优化
• 前台项目由于使用的nuxt服务端渲染框架，本身的首屏加载速度就很快
• 后台管理系统主要使用vite配置gzip、压缩图片、按需引入第三方依赖、路由懒加载、kepp-alive缓存组件等提升首屏加载速度，使用骨架屏提升用户体验

PART3

部署方面：

• 前台+后台+后端都使用的github-action实现自动部署，使用docker启动三个容器分别启动三个项目独立运行，使用nginx反向代理、开启gzip、开启https、开启http2、访问静态资源、静态资源缓存等

PART4

博客项目后续优化：

• 上传图片应该存储在服务器宿主机中（备份docker后端容器文件中的图片到服务器目录下）、解决图片上传后名称乱码的问题
• 后台数据加载样式优化（loading）
• 文章目录侧边导航索引功能
• 前台黑白主题开发、文章详情页浏览器标签名对应文章标题
• 前台用户注册登录功能——前台新增登录和注册功能（数据库新建用户表）、新增个人中心页（展示头像-上传、昵称、点赞数、评论数、邮箱等）-可编辑；评论、点赞功能需登录-评论展示登录用户信息，文章阅读不用登录

PART5

就简单说这些吧，想要互相交流学习的可以加我联系方式：

• vx：an272377
• q：1776875119
• 邮箱：haixtx@163.com