个人博客2.0 后台管理系统

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

内容简介:这是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 后台管理系统

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


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

查看所有标签

猜你喜欢:

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

数据结构、算法与应用(原书第2版)

数据结构、算法与应用(原书第2版)

Sartaj Sahni / 王立柱、刘志红 / 机械工业出版社 / 2015-4 / 79.00元

《数据结构、算法与应用——C++语言描述》是享有盛誉的数据结构教科书的第2版。它完整地包含了基本数据结构的内容,是CS2课程的理想用书。作者Sartaj Sahni通过循循善诱的讲解、直观具体的讨论和基于现实的应用,让读者轻松、愉快地学习。新版书着重利用标准模板库(STL),把书中开发的数据结构和算法与相应的STL实现方法相互关联。本书还增加了很多新的实例和练习题。 书中的应用实例是它的特色......一起来看看 《数据结构、算法与应用(原书第2版)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具