媒介

之前有发过这个项目的文章了，根据朋侪的发起转变了博客的款式，也增加了一些新功用，下面完整地引见这个博客项目。文末附前端练习求职简历

项目简介

扼要引见：一个前后端星散的项目
重要手艺栈：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