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

Z时代
2024-01-10
分类：综合

react

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表单的注意点：

在导出的地方改为 export default From.create(['可以写入这个组件的标识名‘])(['使用form的组件‘])，这样才能使用from中的一些配置属性
使用 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
  }
  }