项目实战 React+antd+node完整版博客系统

193 阅读2分钟

对于初学前端的童鞋来说,愁于找不到实战项目,苦于没有项目经验,我耗时三月打造了功能齐全的博客系统,几乎涵盖前端项目工作中里常见的功能,比如登录拦截、注册,文件上传、列表渲染,表单提交,分页等,还提供服务端node接口功能模块,数据库使用mysql。 研习好这个项目,让你工作中懂得如何和后端联调,前端各功能如何处理,甚至你还能学会如何建表,学会后端知识。

博客系统

个人写作作品,发表到个人博客里,用户访问博客平台,可阅读文章,点赞

技术栈

  • create-react-app
  • React v16
  • react-router-dom v5
  • Mobx mobx-react
  • Ant Design
  • axios
  • echarts
  • node
  • Express
  • Less
  • cookie session
  • Mysql
  • Markdown

三个平台

博客前台、后台管理、服务端。 分别介绍各自的功能

博客前台

  • 文章分类
  • 文章列表
  • 文章详情
  • 阅读量 点赞量 点赞功能
  • 登录 注册 退登

博客后台

  • 登录 退登
  • 博客访问量统计
  • 用户列表
  • 文章的编辑 删除 创建
  • 文章类目 编辑 删除 新增
  • 图片上传功能 上传图片列表 复制图片url

博客服务端

  • 提供前台和后台的接口
  • 登录cookie session处理
  • 注册
  • 图片上传
  • n多接口,sql处理

项目展示

博客前台

首页

image.png

文章详情

image.png

博客后台

登录页 登录才能进后台系统

image.png 首页统计每天访问量,PV

image.png 用户列表,查看在博客前台注册的用户

image.png 文章列表,分页和编辑和删除文章功能

image.png 创作文章,上传文章封面,支持markdown语法写文章

image.png 支持一边写一边预览文章

image.png 文章分类增删改查

image.png 上传图片模块,鼠标悬浮,一键复制图片链接

image.png

博客服务端

数据库

image.png

代码show

image.png

image.png

image.png

系统源码获取

私信我获取源码