vue个人博客项目部署上线

前言

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

项目简介

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

实现功能

文章

  • 文章通过标签分类

  • 存为草稿,草稿和文章可以随时切换

  • 文章目录,与segmentfault生成的目录效果相似

  • 最近更新,首页展示最近更新的三篇文章

  • 搜索文章,输入标题的部分内容即可搜索相应文章

clipboard.png

clipboard.png

评论

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

  • 邮件通知,如果有人回复评论,会通过nodemailer来发送通知邮件

  • 头像功能,访问者和站长分别用不同的头像来区分

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

  • 防止重名,同一篇文章中不会出现评论者重名的情况,当然同一个人可以多次评论

  • 排序评论,排序依据:最新、最早、最热

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

clipboard.png

markdown编辑器(marked)

  • 过滤标签

    • 去除首尾空格

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

  • 自定义快捷键

  • 切换预览模式

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

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

clipboard.png

账户

  • 权限验证

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

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

  • 修改账号和密码

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

clipboard.png

页面特效

  • canvas粒子效果(移动端取消)

    • 鼠标追随粒子效果

    • 单击取消展示粒子效果,重新点击随机切换粒子效果的颜色

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

  • 平滑回到顶部

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

  • 向下滚动时,动态展示dom节点

  • 底部自动加载loading

  • 网站顶部图片改变景深

其他功能

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

下面是移动端的演示
mobile

网站部署

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

  • 使用nginx进行反向代理

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

收获

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

  • 可以加深对webpack、Vue、vuex、vue-router、vue-resource的使用

最后

最近在找前端暑假实习,这是我的在线简历 --- job.xuhaodong.cn,谢谢?

本文已同步到我的博客www.xuhaodong.cn

2k 声望
111 粉丝
0 条评论
推荐阅读
用vue框架的基本原理,简单实现一个todo-list
最近在学习vue框架的基本原理,看了一些技术博客以及一些对vue源码的简单实现,对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎,尝试着去实践自己学到的知识,用vue的一些基本原...

rudyfd39阅读 15k评论 3

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

2k 声望
111 粉丝
宣传栏