仿简书博客开发

作者: real_ting | 来源:发表于2018-11-09 19:14 被阅读243次

    空闲时间写了个类似简书的博客系统,写篇文章记录一下,因为我主要是做前端的,并不会后台语言,所以对于后台数据处理这块主要使用了ExpressSequelize

    主要功能

    • 注册
    • 登录(第三方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,技术小白一个,代码写的比较乱,边做边学,多多交流,仅供参考。

    相关文章

      网友评论

      本文标题:仿简书博客开发

      本文链接:https://www.haomeiwen.com/subject/hmgoxqtx.html