React结合AntD、Node的编写简单的管理系统

React结合AntD、Node的编写简单的管理系统

你们好，刚学完React基本知识就等不及当即上手写个东西，正好管理系统好像是通常你们都会写写的东西，我也就想利用余韵写个简单的管理系统，由于我也仍是个刚学了几个月前端的小白，基本上都是初次使用，也只是想简单的分享下项目的成果，因此有什么问题也但愿帮我指点指点。

GitHub连接：https://github.com/Keifer-G/BackgroundManageSystem.git

登录页面

我首先是完成了登录页面，由于第一次使用React写项目，因此踩了不少坑。这里的话，由于本身仍是身为一个设计生，因此也尽可能不让本身的页面丑陋，不少时候还会去想怎么样会好看点，logo也就是我本身随便设计了一个，背景是一个GIF，也利用animate.css放了点自我感受还Ok的动效，而后我首当其冲遇到的就是命名问题，react的className不是像Vue那样组件各自互不影响的，我第一次尝试，索性就直接把form的那个UI本身写了，而后样式也本身添了上去，可是我刚开始写没有引入React 的Css库，也还不知道React的命名问题，因此问题就暂时潜伏在了这里：

当我认识并引入了antd的css库时，它将我原来写的登录form的样式都给覆盖了，而后就再配置了less，用less一点点把我原来的样式给再覆盖了回来。

后台的话，我是利用的是Node的Koa框架和MongoDB数据库，登录操做的话，主要就是前台先验证而后是post请求，后台再验证响应，这里开始我也记得一个坑，我利用了MongoDB的可视化建立了两个集合，重要的是，我在可视化工具里建立的集合名不是复数，这样我从node上就读取不到这个集合，可是利用mongodb自己操做能够找到，因此这里坑了我一下子，若是是直接利用mongodb建立集合的话，它是会自动变成复数的，因此我感受仍是尽可能用mongodb后台建立集合。

在mongodb可视化工具建立的集合必需要是复数，不然可能会有问题。

跨域问题的话，我就是利用koa-cors，引入在简单设置成本身的须要就行了。前台验证的话，AantD的form表单组件这方面仍是很齐全的，结合文档上的使用方法，就能够很快的作好前台的验证，好比字符长度的限制等，我还写了两条AantD表单的注意点：

1. 在导出的地方改成 export default From.create(['能够写入这个组件的标识名‘])(['使用form的组件‘])，这样才能使用from中的一些配置属性
2. 使用 validator 进行自定义校验的时候函数必定要执行一次 callback() ，和以前的callback（‘[内容]’）不一样，若是少了它，onSubmit 的提交事件就会失效

登录页面的的话就基本上完成了，而后是主要的管理页面，管理系统的布局我就直接使用了AantD的 Layout 布局中的一种，页面的大概内容：

主页面

首页 侧边导航和顶部都是固定的，主题内容部分根据导航的index值来显示不一样的组件，顶部的话我设置了广播消息，消息内容能够在管理员身份的用户界面来推送新的广播，右侧的消息点击能够显示全部的广播消息内容。 主题的按钮我是用了 dynamic-antd-theme 这个组件，这个设置很简单，它是寻找了全部的关于主题内容的颜色，并对其进行设置，在我这里有个弊端，它把侧边导航条的选中色给变暗了，不太好改，并且我以为还行就没改。 搜索栏是为了美观放上去了，可是也能够去用来添加一些页面的索引，头像点击右侧会出现一个展现我的信息的抽屉，就是利用AntD的抽屉组件。

用户页 用户页是我写的较多的地方，这里分红了两种角色，管理员角色和通常职员角色，管理员在这部分显示的是对通常职员进行管理界面，而职员的这个界面显示的是管理员推送的任务列表。

如上图，我的信息卡片能够实现修改我的信息，可是这里个人修改头像部分是仅仅根据转化为uri进行数据库存储实现的。 管理员同时还能够建立新的职员帐号，推送全体的任务消息和广播消息，以及推送我的的任务消息。

操做页

个人操做部分的想法是直到作到这里才想到作什么的，操做的东西就大体为对新闻类文章的筛选，如上图的页面，这个页面是给予最直观的操做，点击卡片的话右侧会出现一个显示更加具体内容的抽屉，这部分的全部数据我都把它放到了redux状态管理中，由于东西全是本身作的，这样会比较方便这里也就会有个问题，就是不要频繁的使用redux的dispatch：

不要频繁的使用redux中的dispatch，这样会形成严重的卡顿问题，咱们能够把dispatch的操做放到批量完成后或者必定时间后，还有组件销毁的时候去dispatch

另一个操做页面就是传统的操做也表格，查看操做就能够显示当条内容的全部具体内容。滚动部分的话都用了butter-scroll的滚动组件。

可视化数据页 这部份内容，因为没有去弄足够的数据，因此在这两个页面我基本上仅仅是把可视的ui给弄了进去：

上面这个就是实现了左边大图和右边小图内容点击置换。设置页面和关于没什么东西因此就不展现了。

如上分别为修改我的信息，反馈信息，修改主题，和查看广播消息列表，更多具体内容可查阅GITHUB上的内容。若是喜欢的话就来个star吧🙏。

下面是一点在写的时候的问题记录

• antd 表单的使用

  • 在导出的地方改成 export default From.create(['能够写入这个组件的标识名‘])(['使用form的组件‘])，这样才能使用from中的一些配置属性
  • 网络请求能够放在onSubmit 的回调函数中
  • 使用 validator 进行自定义校验的时候函数必定要执行一次 callback() ，和以前的callback（‘[内容]’）不一样，若是少了它，onSubmit 的提交事件就会失效
  • 引用antd的css => import 'antd/dist/antd.css'

• 内部的条件渲染-> 不能使用if，使用三元运算符， [条件] ? () : () => 括号内的第一个参数能够写函数等，第二个放组件

• create-react-app建立的项目是看不到webpack相关的配置文件，因此须要先暴露出来，使用如下命令： npm run eject ,暴露webpack配置时出现“Remove untracked files, stash or commit any changes, and try again.”错误,这是由于咱们使用脚手架建立一个项目的时候，自动给咱们增长了一个.gitignore文件,而咱们本地却没有文件仓库,这就须要在终端输入以下命令(git add .)(git commit -m '')，而后在 npm run eject 便可

• 分类组件渲染，与flutter相同，将须要的组件写入一个数组，根据事件与Index来展现须要的组件

• [报错]has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  • 解决方法：
    • 在后台报错的路由响应设置响应头，容许跨域
    • ctx.set('Access-Control-Allow-Origin:*')

• 手动上传头像 customRequest 属性

• 使用better-scroll 实现滚动 mouseWheel 设置鼠标滚轮是否能够触发，默认为false即不可滚动

• react 中文字超出的处理

  • overflow : 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', webkitLineClamp: '2', webkitBoxOrient: 'vertical'
  • 注意 要有宽度，其次 webkitLineClamp 这个数值是字符串，而不是数字

• reducer里的参数变量action，就是actions里对应的返回数据

• [报错]咱们不能在组件销毁后设置state，防止出现内存泄漏的状况

  • 若是代码中有定时器一类的延时设置state状态的代码，能够在组件销毁时清除定时器 componentWillUnmount() { clearTimeout(timer); }
  • 若是有异步设置state值的状况，在组件销毁时清除全部的state状态 componentWillUnmount() { this.setState = (state, callback) => { return } }

• 自执行点击事件=>document.getElementById('xxx').click();

• 在获取redux中的用户信息时的willMounted中，不只要在监听变化的subscribe 中setState一次，还得在外部（willMounted内部）再setState一次，以达到进入便获得数据

• 多检测条件的正确性

• 频繁使用store会形成性能急剧下降，因此能够在unMount的时候或者完成了一个阶段的时候去更新store里的数据

• 数据库若是是本身用可视化添加必定要是复数的集合名，否则在mongoose里没法识别

• koa 的 ctx 在回调中没法传值到前端,这个能够尝试利用try{}catch(e){}