课程设计(博客项目)

技术栈：vue2 + vuex + vue-router + axios + nodejs + express + mongodb + element-ui + echarts

项目介绍

本项目分为三个部分：后端接口、后台管理系统、前台系统，它们分别实现了

前台系统：博客展示、心情展示、瀑布流照片墙、留言板、时间线、关于、搜索、评论、专栏博客展示、书签文章展示、暗黑模式、头像上传

后台管理系统：权限管理、动态路由、登录、注册、文章管理、心情管理、专栏管理、书签管理、评论管理、照片管理、markdown 编辑文章、时间节点管理、路由管理、用户管理、数据看板

后端：MVC 模式使用 express 框架和 mongodb 数据库

性能优化：

1. 图片资源本地压缩，控制在 100kb 左右。
2. vue、element-ui、axios 采用 CDN 方式引入项目。
3. 开启 gzip 压缩，效果很明显，特别是项目上线后访问速度提高很多。
4. 优化了一些逻辑，减少了 http 请求。
5. 打包时不生成 map 文件(效果很明显)、将公共代码抽离、图片资源压缩(效果不是很明显)。
6. 在用户上传头像是使用 canvas 压缩后再上传，压缩效果很好。

使用体验优化

1. 前台系统首次加载白屏动画,切换路由使用过渡动画。
2. 多个页面使用 css 动画效果和平滑阴影给你更真实的体验。
3. 瀑布流照片墙,定宽不定高,给你极致体验。
4. 前台系统全局暗黑模式,更丰富的使用效果。

安装运行

导入数据库数据

• 路由数据：./MongodbData/routes.json,若未导入则后台管理系统因没有路由数据将无法正常访问。
• 时间线数据：./MongodbData/timeclues.json,此部分数据记录了项目的开发历程，可选
• 用户数据：./MongodbData/users.json,用户数据,包含一个管理员与一个普通用户信息
  • 管理员账号：123@qq.com；密码：12345678
  • 普通用户：234@qq.com；密码：12345678

前台系统

// 安装依赖
yarn
// 运行
yarn serve

后台管理系统

// 安装依赖
yarn
// 运行
yarn serve

后端

连接 mongodb 数据库配置文件db,使用默认端口27017,数据库名称MyBlog

// 安装依赖
yarn
// 运行
yarn start

效果展示

博客

心情

瀑布流照片墙

留言板

时间线

关于

文章管理

照片管理

markdown编辑文章

路由管理

时间节点管理

用户管理

数据看板

暗黑模式

登录注册

结语

本项目还有很多可以继续完善的地方，你可以拉取本项目继续开发，不要忘了给个star哦！