Vue和Node的初体验

目录

本项目使用到的技术栈

项目地址：

基本功能

系统展示

首页

文章模块

登录注册

私信

问答模块

个人中心模块

后台管理系统

总结

---

新人前端，利用vue和node做了一个类似多人博客的项目，里面包含了博客所需要的的文章发布评论等功能，除此之外还有问答和私信等功能。这个项目主要是为了理解系统开发的流程以及熟悉一下技术栈。

本项目使用到的技术栈

主要使用了Vue全家桶 + Express + MySQL + Nginx。

项目地址：

• 前台使用页：github.com/cjuncjy/For…
• 后台管理系统：github.com/cjuncjy/For…
• 后台服务：github.com/cjuncjy/For…

基本功能

目前已经实现的功能：

• 文章浏览、发布和修改
• 文章评论、点赞
• 用户私信(基于socket.io的单播)
• 问答模块(仿思否，问题的提出、浏览、回复和采纳)
• jwt实现用户权限判断
• 注册时的邮箱验证
• 个人中心模块
• 后台管理系统权限管理
• 后台管理系统基本的增删改查
• i18n国际化
• Nginx代理存储文件

系统展示

ps: 部分文章是从掘金大佬那里摘抄的(见谅)

首页

首先是前台用户使用页面的首页：

 

 

文章模块

文章列表页面：

 

文章详情页面(由于找不到适合的目录插件，因此这文章详情的目录是自己动手做的，只能实现二级目录，如果有大佬有比较好用的目录插件可以告知)：

 

文章详情页面底部的评论模块如下图，这里未登录用户需要登录才能进行文章的评论。

 

 

登录注册

登录和注册的样式是仿掘金的小熊猫，这里使用node的nodemailer模块进行了邮箱的验证：

 

 

私信

私信模块使用了socket.io实现了私聊功能，具体功能如下图，目前可以接收离线消息和在线消息，当你收到未读消息时候，右上角未读消息会有相应的提示。

 

 

问答模块

问答模块的UI主要仿照思否的问答区(原谅我想不出好的样式，只能借鉴借鉴)：

 

提问页面如下图，这里做了输入监听，如果做了处理会提示用户离开前是否存储数据。

 

问答详情页如下图，如果当前用户是发布者，那么还可以选取其中一个回答作为答案进行采纳。

 

 

个人中心模块

个人中心模块包含了用户的文章和问答操作，以及用户个人信息的修改。

 

 

后台管理系统

后台管理系统是基于vue-admin-element搭建的一个具有权限判断的管理系统，不同角色权限进入到管理系统中会展示不同的导航栏，主要页面如下，所有页面都具备基本的增删改查功能。

 

 

以上就是该项目简单的项目展示，麻雀虽小五脏俱全，基本的功能都已经实现。

总结

本项目主要是在学习vue和node过程中一点点做出来的，简单的功能已经实现，也许对于大佬们来说这只是一个简单的demo，但是对于我这个新手来说，这也算是一次体验不错的学习历程。