空闲时间写了个类似简书的博客系统,写篇文章记录一下,因为我主要是做前端的,并不会后台语言,所以对于后台数据处理这块主要使用了Express和Sequelize。
主要功能
- 注册
- 登录(第三方github登录、邮件验证)
- 用户管理
- 文章管理
- 标签管理(管理员可见)
- 用户管理
- 评论、回复
- 点赞、关注
- 个人主页
- 设置、修改密码
- 站内信等功能
技术栈
前端
- Vue + Element-UI,标准的vue-cli项目。
- Vue-router管理路由,vue-axios管理http请求。
- 写文章那块使用的markdown编辑器,功能强大且好用,快捷方式很多。
- 为了实现类似简书的图片预览功能,使用了vue-photo-preview插件,前面写的文章中有介绍,请参考。
- 关于项目中的图标,一部分使用Element-UI自带的,另一部分使用的是阿里的图标库iconfont.
后端
- Node.js + Express + Sequelize
- Sequelize 是一个基于 promise 的 Node.js ORM, 目前支持 Postgres, MySQL, SQLite 和 Microsoft SQL Server. 它具有强大的事务支持, 关联关系, 读取和复制等功能.
- 使用Nodemailer实现发送邮件功能
- 上传的图片上传到青云,数据库只存储图片地址
效果图
只展示主要页面
注册
登录
首页
消息页面
私信页面
个人主页
后台主页
文章详情页面评论
运行
- cd client 进入前端目录,执行npm run dev
- cd server 进入后端目录,执行npm start, 数据库使用的wampserver的MySql
源码地址:github,技术小白一个,代码写的比较乱,边做边学,多多交流,仅供参考。
网友评论