vue+express+mongodb——个人全栈博客项目(一)

5,301 阅读2分钟

pc首页预览 移动端预览

后台预览

项目源码地址: github.com/1017704538/…
项目预览地址: test.yukikazesama.cn/(目前还是测试)

前言

该博客目前完成的功能比较简单,至今处于部署的优化中,可能是因为某些静态资源(尝试加了个live2d小人)过大的原因,首屏加载时间较长 ,目前还在尝试寻找解决办法尝试优化

为什么要写这个项目

本人是个前端小白,在学习vue的过程中也写过一些练习demo,但基本都是纯前端的练习,接口也基本用的是easymock之类的假接口,前段时间无意中了解到了express和mongodb,就想着写个全栈的项目练练手,同样也是作为一名程序猿,写一个个人博客项目用于记录学习笔记、总结经验、分享技术等等,我想也不是件难事

使用的服务器、技术栈、库

  • 服务器: 腾讯云学生云服务器
  • 脚手架: Vuecli
  • 服务端: node的express框架
  • 数据库: mongdb
  • 第三方组件: element-ui,vant等

服务端部分

项目结构

├─app.js 启动文件
├─package-lock.json
├─package.json
├─uploads 上传的文件
├─routes 路由
|   ├─web 前台路由
|   |  └index.js
|   ├─admin 后台路由
|   |   └index.js
├─plugins
|    └db.js 连接数据库配置
├─models mongoose数据模型
|   ├─Article.js 
|   ├─Comment.js 
|   ├─Message.js
|   ├─Photo.js
|   ├─Tag.js
|   └User.js
├─middleware 中间件
|     ├─auth.js
|     └resource.js
├─web 前台博客静态资源文件夹
├─admin 后台管理静态资源文件夹 

使用的npm包

  • mongoose(操作数据库)
  • jsonwebtoken(token值)
  • http-assert(异常处理)
  • cors(解决跨域)
  • multer(文件上传)
  • bcrypt(加密)

前端部分

后台管理与博客分开写在两个vue项目里,使用vue-cli脚手架的项目,自己再改造一下。

博客: 首页(随机文章、最新评论、留言列表)、搜索框、文章列表、文章详情、分类标签、照片墙(瀑布流)、常用工具网站推荐、登录、注册
后台管理: 文章管理(发布、编辑、删除)、评论管理(查看、删除)、分类/标签管理(添加、删除、编辑)、用户管理(查看、删除、修改权限)

计划

这次是我的第一个完整的全栈式开发,作为一个小白,在这次开发中,遇到了很多问题。往后的时间里(最近在尝试项目的优化、项目文档的补全),我会就我这个项目中的三个部分(web、admin、server),补全相应的三篇文章或者说明和踩到的坑以及我是如解决的。

感触

第一次着手去做一个全栈的项目,虽然很多地方可能做得不是那么让人满意,但迈出这一步,才会有提升,每一次做项目都是在不断学习,不断进步。

系列文章

vue+express+mongodb——个人全栈博客项目(二)