我的博客2.0 Admin System

Introduction

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

由于工做中有用Vue独立编写后台的经验，因此此次本身用React手撸了一个后台，用了react + react-router-4 + mobx + Google reCAPTCHA + Ant Design，说实话比起前端JS和CSS的代码量各占50%，这个后台收获仍是很大的。

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

由于刚毕业不久，工做时间也很少，感受作的项目还稍显稚嫩，所以决定开源出来接受大佬们的意见。

GitHub

前端线上地址

前端文档戳这里

如今本人正在积（ku）极（bi）找工做中，若是有合适的机会还请联系我，或者留下您的邮箱。 本人邮箱：developer@yanceyleo.com

Detail

Login

由于确实没有注册的必要，因此直接把用户名和加密后的密码存在了数据库，固然后期心情好不排除弄个注册。

用到了Google reCAPTCHA，用同事大神的话来讲就是装逼给本身看😂，不过用这个东西也对后面填request库和request-promise库打下了坚实的基础，嗯。

虽然说是给本身用的后台，但仍是考虑到一些非法操做，好比这个页面，只有email、password、Google reCAPTCHA有值才能点击登陆按钮（写到这里，忽然发现忘了写email、password格式校验）；点击按钮以后当即将按钮设为disabled来避免屡次点击。

增删改查

由于大部分模块都是相似上面这张图的架构，因此挑一个来写，就以player模块为例：

• 表格渲染数据，采用分页的方式；
• 经过增删改查和批量删除按钮来进行数据的操做；
• 上面说到后台是从用户的角度来写的，所以当用户未填写全信息将禁止点击按钮提交；
• 封装了一下Ali OSS的上传接口
• 点击表格中的图片（若是有），会放大显示；
• 删除和批量删除会提早弹出是否确认删除tip；

Article

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

Article Editor

这是Blog的核核核核核心功能区了，用来编写文章的Header Cover, Title, Summary, Content, Tags，固然我设置的这些都是必填项，因此mobx检测到若是有的项为空，也是没法提交的。

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

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

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

  当点击`保存并留在当前页面`后在点击yes，文章将会被保存到数据库，并且会被发布，而且留在当前编辑页面
    当点击`保存并留在当前页面`后在点击no，文章将会被保存到数据库，不会被发布，而且留在当前编辑页面
  复制代码

• 右边的按钮是纯粹的保存,点击后文章将会保存，而后发布，最后跳转到Article List页面。

CV

这个模块其实彻底能够写成表格的形式，但确实写表格写烦了，因此换个口味，实际这就跟不少招聘网站的效果差很少了，其实也是增删改查，固然没去设计批量删除，感受没意义。

Global Setting

这里分三个模块：

• 第一个是我的基本信息，实际上有两个做用，一个是后台右上角那个地方（要不太空了😂），另外一个用途是前端简历页面我的信息那个部分；
• 第二个是修改密码，我估计本身基本也不会用到这个地方，可是既然想写，那就去作好了；
• 第三个是全局配置，固然如今只有一个接口，就是全站置灰效果，后台一旦设置了置灰，那前端全站就会变成灰色，用于一些特殊的哀悼日子。

最后

由于最近忙着找工做，文章迁移、英文文档撰写都会在忙过这段时间以后再去实施，若是有好的工做机会能够联系我哈～

以上、よろしく。