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),补全相应的三篇文章或者说明和踩到的坑以及我是如解决的。
感触
第一次着手去做一个全栈的项目,虽然很多地方可能做得不是那么让人满意,但迈出这一步,才会有提升,每一次做项目都是在不断学习,不断进步。