%20(2).svg)
项目简介
本项目运用Vue、Node和MongoDB技术搭建而成。前端借助Vue框架构建用户界面，后端使用Node结合Koa框架处理业务逻辑，数据库采用MongoDB存储数据。系统包含博客展示、生活分享、留言交流、作者介绍、管理后台等多个模块，为用户提供文章发布、阅读、评论、交流以及管理的综合性平台。
项目的主要特性和功能
前端特性
- 界面丰富：博客首页展示文章内容、分类导航、作者头像，有首屏动画和背景音乐播放器；生活模块分享趣事、尤克里里音乐和篮球视频。
- 交互功能：支持文章顶置、点击回到顶部，具备点赞、评论、文章搜索功能，实现双向通信和移动端适配。
- 技术应用：使用iconfont的svg图标，封装axios进行网络请求，引入markdown插件方便发布文章，采用路由懒加载、vuex全局加载动画优化性能。
- 用户体验：添加骨架屏提升首屏加载体验，实现侧边栏吸顶效果，支持换皮肤和主题（部分待实现）。
后端特性
- 接口完善：提供登录注册、文章发布、保存草稿等接口，对不同用户设置普通用户、管理员和超级管理员等权限。
- 数据处理：使用mongoose操作MongoDB，管理文章、用户、评论等数据，实现评论、文章分类归档标签、消息通知系统等功能。
管理后台特性
具备用户管理、用户分析、流量统计、用户权限设置、文章管理、草稿管理、评论管理、发布通知、标签管理等功能。
安装使用步骤
前端部分
- 确保已安装
node、webpack和vue-cli。若用vue-cli3创建项目，先执行npm i @vue/cli -g，再执行vue create yourName；若用旧版，执行vue init webpack yourName。 - 配置iconfont中的svg图标，按相关文章设置全局css样式或使用svgo格式化。
- 封装axios，参考相关文章进行配置。
- 实现登录注册功能，参考cookie使用的相关文章。
- 引入markdown插件
mavonEditor。 - 在项目根目录执行
npm run serve启动前端项目。
后端部分
- 执行
npm init初始化node项目，安装koa和nodemon，使用nodemon ./app启动项目。 - 安装
koa2-cors、koa-bodyparser、koa-static、mongoose、uuid等依赖。 - 在
config.js中配置MongoDB连接信息，启动MongoDB服务。 - 在项目根目录执行
npm start启动后端项目。
综合使用
- 确保前端和后端项目都已启动。
- 打开浏览器，访问前端项目地址（通常为
http://localhost:8080）即可使用博客系统，可进行注册登录、发布文章、评论交流等操作。使用管理后台需用管理员账号登录。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】