vue我的博客项目部署上线

前言

以前有发过这个项目的文章了，根据朋友的建议改变了博客的样式，也增长了一些新功能，下面完整地介绍这个博客项目。文末附前端实习求职简历

项目简介

简要介绍：一个先后端分离的项目
主要技术栈：vue全家桶 + node.js + Express + Mongodb
github地址： vue博客内容管理系统
项目线上地址： FatDong的博客 --- www.xuhaodong.cn

实现功能

文章

• 文章经过标签分类

• 存为草稿，草稿和文章能够随时切换

• 文章目录，与segmentfault生成的目录效果类似

• 最近更新，首页展现最近更新的三篇文章

• 搜索文章，输入标题的部份内容便可搜索相应文章

评论

• 过滤评论，太长、过短、含QQ群号的评论将没法发布

• 邮件通知，若是有人回复评论，会经过nodemailer来发送通知邮件

• 头像功能，访问者和站长分别用不一样的头像来区分

• 点赞功能，点赞状况记录在浏览器的localStorage里，下次访问会还原点赞状况

• 防止重名，同一篇文章中不会出现评论者重名的状况，固然同一我的能够屡次评论

• 排序评论，排序依据：最新、最先、最热

• 用localStorage记录邮箱和昵称，下次访问不用从新输入

markdown编辑器(marked)

• 过滤标签

  • 去除首尾空格

  • 输入相同的标签将弹出模态框警告并自动删除，使用数据驱动视图更新的思想将全部标签放在一个数组，添加和删除标签都是对数组进行操做

• 自定义快捷键

• 切换预览模式

• 代码高亮显示，使用hightlight.js进行代码高亮显示

• 提醒保存，没有保存就离开页面前会弹出模态框确认

帐户

• 权限验证

  • 前台使用vue-router的beforeEach进行验证

  • 后台使用jwt实现基于token的身份验证

• 修改帐号和密码

• 密码加密，使用sha1加密算法，用csprng生成的随机盐

页面特效

• canvas粒子效果（移动端取消）

  • 鼠标追随粒子效果

  • 单击取消展现粒子效果，从新点击随机切换粒子效果的颜色

  • 鼠标离开页面后，粒子效果开始规则运动

• 平滑回到顶部

• 点击文章段落标题，平滑滚动到锚点

• 向下滚动时，动态展现dom节点

• 底部自动加载loading

• 网站顶部图片改变景深

其余功能

• 适配移动端。使用flex布局、rem以及百分比布局去适配移动端，实现响应式布局

下面是移动端的演示

网站部署

• 添加SSL证书，使用更为安全的https协议

• 使用nginx进行反向代理

• 服务器使用linux系统，学习了一些linux的知识

收获

• 更加了解一个项目从前端到后端的流程，能够更好地和后端人员对接

• 能够加深对webpack、Vue、vuex、vue-router、vue-resource的使用

最后

最近在找前端暑假实习，这是个人在线简历 --- job.xuhaodong.cn，谢谢?

本文已同步到个人博客www.xuhaodong.cn