vue + express + mongodb 打造个人博客

更新: 如果自己注册的话则为普通账户,无法进入博客后台添加分类以及文章,存在验证(默认没有数据,所以第一次启动都是空的),数据都是管理员账户去博客后台创建的.
解决办法:需要在mongodb中手动插入一条isAdmin属性为true的管理员账户, 具体结构参考下图(无需手动设置id)...然后去登陆创建分类或是文章数据,再返回首页查看效果即可真是不好意思!

image.png

前言:

完全使用ajax交互, 无服务端模版渲染
后端部分基本完全参考妙味课堂腾讯课堂公开的nodejs搭建博客视频
但是该视频是完全的后端项目,后端模版渲染,十分不习惯就用vue重写了
没有node基础和mongoose基础的同学可以去看看,两天快速刷完
传送门

项目截图:

1. client

博客首页 查看文章

2. admin

分类管理 新建文章

使用技术:

• 前端

  1. vue
  2. vue-router 前端路由管理
  3. axios 发送ajax请求
  4. stylus css 预处理
  5. element-ui 后台管理ui
  6. marked.js 新建文章支持markdown语法
  7. highlight.js 新建文章支持代码高亮

• 后端

  1. express
  2. body-parser 获取post请求内容
  3. cookies cookie处理模块
  4. mongoose 数据库操作模块

• 功能需求

前端:

1. 首页内容聚合
2. 列表页 —— 分类列表
3. 内容页 —— 评论
4. 注册
5. 登录

后台:

1. 登录

2. 分类管理

   • 分类列表
   • 添加分类
   • 修改分类
   • 删除分类
   • 查看分类下的所有博文 (暂未实现)

3. 文章管理

   • 文章列表 : 所有文章; 按分类查看文章 (暂未实现)
   • 添加文章
   • 修改文章
   • 删除文章
   • 查看文章下所有评论(暂未实现)

4. 评论管理 (暂未实现)

   • 评论列表 : 所有评论; 查看指定文章评论
   • 删除评论

5. 移动端适配 (暂未实现)

开始

# server目录以及vue项目根目录均需npm install
npm install

# 进入mongodb的bin目录启动数据库 (需了解mongodb的初步启动)
mongod --dbpath=E:\project\blog\server\db 

# 进入server目录启动服务端
node app.js

# 启动浏览器端
npm run dev

启动数据库 启动服务端(node) 启动浏览器端(vue)

注意

1. cookie相关:使用axios碰到的跨域cookie问题
   参考:axios cookie问题和表单上传问题探究

2. markdown语法支持: marked.js + highlight.js
   使用方法可参见源文件 src => pages => admin => markdown.vue 有详细的使用代码
   参考:marked.js简易手册

3. mongoose以及express等后端部分代码有详细的注释,但是基本知识还是要了解,不懂可以看前面提到的视频

后话:
问题肯定特别多,做这个的时候也是特别糙,暑假还没结束,心还在浪.
除了上述暂未实现的功能外,很多代码没有优化,很脏,可能有不少重复代码,能够抽象出来却没有抽象,但是有一点好处就是阅读的话比较方便,不用到处跳(什么鬼理由- -!!),好啦,就这样!

给我一颗小星星好不咯:github

谢谢哥哥姐姐弟弟妹妹!