基于vue+node.js+mongodb的前后端分离个人博客

介绍

一个基于vue + node.js + mongodb的前后端分离个人博客
地址:https://github.com/xmie233/vueblog
欢迎大家前来star⭐️
基于vue+node.js+mongodb的前后端分离个人博客_第1张图片

环境

vue-cli 4.5.0
node.js 14.16.0
mongodb 4.4.5

技术栈

前端:vue-cli,vue-router,vuex,axios,bootstrap
后端:node.js,mongodb,express

主要功能

前台:文章详情,文章列表、文章分类,文章搜索、评论和点赞、用户登陆、登出和注册,发送邮件
后台:发布、修改、删除文章(仅站长),账户设置、信息修改(所有人)

数据库

用户信息、文章信息、评论信息

其他

除了使用技术栈实现博客的基本框架外,还包括一些其他的关键技术,包括:

  1. 通过bootstrap、@media、rem单位等相关技术实现了网页的响应式布局;
  2. 通过设置响应头部解决跨域问题;
  3. 通过mavon-editor实现markdown格式文本的编辑和解析;
  4. 通过md5对用户的密码进行加密;
  5. 通过animate.css实现动画效果;
  6. 通过nodemailer实现邮件的发送功能;
  7. 通过FileReader对象实现图片保存功能

效果(部分展示)

前台

导航
基于vue+node.js+mongodb的前后端分离个人博客_第2张图片
页脚
基于vue+node.js+mongodb的前后端分离个人博客_第3张图片
首页
基于vue+node.js+mongodb的前后端分离个人博客_第4张图片
所有文章
基于vue+node.js+mongodb的前后端分离个人博客_第5张图片
留言板
基于vue+node.js+mongodb的前后端分离个人博客_第6张图片
文章详情
基于vue+node.js+mongodb的前后端分离个人博客_第7张图片
登陆界面
基于vue+node.js+mongodb的前后端分离个人博客_第8张图片

后台

文章列表
基于vue+node.js+mongodb的前后端分离个人博客_第9张图片

编辑文章
基于vue+node.js+mongodb的前后端分离个人博客_第10张图片

移动端

基于vue+node.js+mongodb的前后端分离个人博客_第11张图片

你可能感兴趣的:(vue.js,node.js,vue)