美文网首页全栈工程师demoWeb前端之路
vue + express + mongodb 打造个人博客

vue + express + mongodb 打造个人博客

作者: 始悔不悟 | 来源:发表于2017-08-28 15:48 被阅读799次

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

image.png

前言:

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

项目截图:

  1. client
博客首页 查看文章
  1. 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

谢谢哥哥姐姐弟弟妹妹!

相关文章

网友评论

  • 藏在车底的阿杜:登录退出,切换显示登录前和登录后的页面都正常,就是登录后,点击刷新,就会显示登录前的页面,此时cookie还在,有特别的设置吗
  • 藏在车底的阿杜:所有路由地址都指向首页,登录之后 ,就只有用户名
    始悔不悟:@藏在车底的阿杜 我大概知道了....如果你自己注册的话就是普通账户,进入不了后台,有验证,,而数据都是管理员自己去博客后台创建的, 需要管理员账户,不好意思啊,没考虑到这里..不知道我表达清楚了没有,因为上传git没考虑这么多,解决办法:需要在mongodb中手动插入一条isAdmin属性为true的管理员账户, 具体结构参考schema文件...然后去登陆创建数据,真是不好意思!
    藏在车底的阿杜:@始悔不悟 没有数据,不管我输入什么地址,都会跳到首页,显示用户名
    始悔不悟:@藏在车底的阿杜 嗯? 没能很好理解您的意思...:confounded:

本文标题:vue + express + mongodb 打造个人博客

本文链接:https://www.haomeiwen.com/subject/kxlgdxtx.html