个人博客2.0 后台管理系统

栏目: JavaScript · 发布时间: 5年前

内容简介:这是Blog2.0的后台管理系统,1.0版本直接用的是Django Admin,可塑性确实不太高。因为工作中有用Vue独立编写后台的经验,所以这次自己用React手撸了一个后台,用了react + react-router-4 + mobx + Google reCAPTCHA + Ant Design,说实话比起前端JS和CSS的代码量各占50%,这个后台收获还是很大的。因为刚毕业不久,工作时间也不多,感觉做的项目还稍显稚嫩,因此决定开源出来接受大佬们的意见。

这是Blog2.0的后台管理系统,1.0版本直接用的是Django Admin,可塑性确实不太高。

因为工作中有用Vue独立编写后台的经验,所以这次自己用React手撸了一个后台,用了react + react-router-4 + mobx + Google reCAPTCHA + Ant Design,说实话比起前端JS和CSS的代码量各占50%,这个后台收获还是很大的。

后期会放出一个lite版本,供各位大佬们批评指正,也就是不能上传、不能修改密码,别的都能干。

因为刚毕业不久,工作时间也不多,感觉做的项目还稍显稚嫩,因此决定开源出来接受大佬们的意见。

GitHub

前端线上地址

前端文档戳这里

Detail

Login

个人博客2.0 后台管理系统

因为确实没有注册的必要,所以直接把用户名和加密后的密码存在了数据库,当然后期心情好不排除弄个注册。

用到了Google reCAPTCHA,用同事大神的话来说就是装逼给自己看:joy:,不过用这个东西也对后面填request库和request-promise库打下了坚实的基础,嗯。

虽说是给自己用的后台,但还是考虑到一些非法操作,比如这个页面,只有email、password、Google reCAPTCHA有值才能点击登录按钮(写到这里,突然发现忘了写email、password格式校验);点击按钮之后立即将按钮设为 disabled 来避免多次点击。

增删改查

个人博客2.0 后台管理系统

因为大部分模块都是类似上面这张图的架构,所以挑一个来写,就以 player 模块为例:

是否确认删除tip

Article

个人博客2.0 后台管理系统

这是Blog的核心功能区,除了常规的增删改查批量删除,还增加了模糊查找和按时间段查找的功能。

Article Editor

个人博客2.0 后台管理系统

这是Blog的核核核核核心功能区了,用来编写文章的Header Cover, Title, Summary, Content, Tags,当然我设置的这些都是必填项,所以mobx检测到如果有的项为空,也是无法提交的。

Markdown编辑器用的toast ui的,说实话用起来真蛋疼,魔改了好多地方才适合自己使用。

着重说一下上面这张图没截到的部分:joy:,是两个按钮,用来提交。

  • 左边的按钮是 保存并留在当前页面 ,实际上就是起到一个暂存的功能,而且我还加了一个功能,当点击这个按钮时会弹出一个popup,询问你是否立即发布,也就是说:

    当点击`保存并留在当前页面`后在点击yes,文章将会被保存到数据库,而且会被发布,并且留在当前编辑页面
      当点击`保存并留在当前页面`后在点击no,文章将会被保存到数据库,不会被发布,并且留在当前编辑页面
    复制代码
  • 右边的按钮是纯粹的 保存 ,点击后文章将会保存,然后发布,最后跳转到Article List页面。

CV

个人博客2.0 后台管理系统

这个模块其实完全可以写成表格的形式,但确实写表格写烦了,所以换个口味,实际这就跟很多招聘网站的效果差不多了,其实也是增删改查,当然没去设计批量删除,感觉没意义。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

硅谷之火

硅谷之火

保罗·弗赖伯格、迈克尔·斯韦因 / 张华伟 编译 / 中国华侨出版社 / 2014-11-1 / CNY 39.80

《硅谷之火:人与计算机的未来》以生动的故事,介绍了计算机爱好者以怎样的创新精神和不懈的努力,将计算机技术的力量包装在一个小巧玲珑的机壳里,实现了个人拥有计算机的梦想。同时以独特的视角讲述了苹果、微软、太阳微系统、网景、莲花以及甲骨文等公司的创业者们在实现个人计算机梦想的过程中创业的艰辛、守业的艰难、失败的痛苦,在激烈竞争的环境中奋斗的精神以及在技术上不断前进的历程。一起来看看 《硅谷之火》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具