重撸后台管理系统的小体会

简介: 重撸后台管理系统的小体会

最近两周顺带着重撸了一套小的后台管理系统(包括前端和后台),简要的记下一点点体会吧(前端方面的)。


因为很早之前就是上手的 react ,所以这次依然是用的 react 撸的,路由部分 react-router 少不了,数据流管理仍然选用 mobx ,webpack 不用说,前后端通信则是 axios,当然还有我挺喜欢的组件库 antd 。


先说 react 吧,组件化的思想我一直都很喜欢,JSX 的风格也是,在写 react 的时候组件的按需加载是一个需要注意的地方,这其实是说我们应该尽量避免使用 display:none 去隐藏某个组件,而是应该通过判断某个条件让这个组件本身就不被 render 出来。大胆的使用 CSS in JS ,也许传统上我们习惯于将 CSS 样式文件全部分隔剥离出来,但是现在既然所有的页面都是由组件来构成,而这些 CSS 样式不就是对应的某个组件吗,这样的话使用 CSS in JS 其实可以更加方便的管理组件,特别是对于小型应用。


react-router 由最开始自己使用时的 2.x 升级到了 4.x,老实说升级之后还是有点小不适用的,原来的路由嵌套写法已经行不通了,API 更新了很多,现在的路由同样仅仅只是个组件而已,从某种意义上来说也许我们无需将它视为高组件一等的东西,而现在的 router 更加灵活多样。


对于 mobx ,老实说曾经看了一个星期的 redux 愣是没搞明白怎么在自己的现有项目中使用,而且它喵的一个简单操作也需要去写大量的代码(当然现在来看函数式编程确实是很优秀的),而 mobx 简单粗暴直接,API 就那么几个,也很有 Rx 的味道,所以就 mobx 了。


webpack 嘛 就不多说了,地球人都知道,用过都说好,而前两天用 webpack-dev-server 的时候因为引入 bundle.js 文件的路径问题踩了个小坑,我相信用过的人都会碰到过:场景就是刷新当前页面直接 404 了,一般加上

historyApiFallback 就行了,但是当使用了嵌套路由的时候,外层路由是好的,嵌套下的路由却会 404 ,原因就是引用路径的问题:


至于 axios,都说 fetch 是下一代的 ajax,但事实上我觉得 axios 更好用,就这样。


顺便补充下 echarts,百度的良心产品,echarts 是在真实的 dom 节点上通过 canvas 绘制图表,牢记这一点我们就可以随心所欲的在 react 中使用:先 render 渲染出一个真实的组件,然后在 componentDidMount 里调用 echarts 的那些 API 绘制即可。


最后 antd,确实是很优秀,包括简洁优雅的风格和细节上的处理,最重要的是 issue 响应速度贼快,当然这里不得不说大半年前在给阿里的这帮人提 issue 的过程让我印象最深的一点就是关于怎样问问题,确实我们经常习惯站在自己的角度并且带有业务性质的去问问题,而不是将问题抽象出来并可重现,这样提出来的问题别人通常很难理解并回答,这种情况恐怕对于 90% 的新手来说都是这样的,这也是我最近刷 segmentfault 很深的一点体会。


就写这么多吧,也没啥干货。

目录
相关文章
|
1月前
小脑袋吃球球动态代码免费分享
小脑袋吃球球动态代码免费分享,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面
22 2
|
8月前
|
存储 区块链
无聊猿大逃杀游戏卷轴模式系统开发逻辑步骤
区块链的去中心化,数据的防篡改,决定了智能合约更加适合于在区块链上来实现
|
9月前
|
SQL 安全 前端开发
Web安全性测试包括哪些要点?梳理下,总算搞明白了
Web安全性测试包括哪些要点?梳理下,总算搞明白了
239 0
Web安全性测试包括哪些要点?梳理下,总算搞明白了
|
11月前
|
SQL 存储 缓存
系统设计不知怎么入手?一文帮到你
系统设计不知怎么入手?一文帮到你
82 2
|
Rust 安全
Jogger跑鞋零撸项目系统开发/方案详细/规则玩法/源码案例/功能说明
At present, multi blockchain smart contract compatibility technology mainly includes two ways: one is to implement cross chain smart contracts, which is to apply smart contracts to cross chain scenarios; Another approach is to use converters to convert smart contracts from one programming language
|
SQL 存储 Oracle
平时做开发需要掌握哪些数据库方面的知识(个人经验之谈)
平时做开发需要掌握哪些数据库方面的知识(个人经验之谈)
209 0
|
前端开发 JavaScript
前端知识案例学习11-前端实现自动打字效果
前端知识案例学习11-前端实现自动打字效果
120 0
|
存储 缓存 安全
图解用户登录验证流程,写得太好了!
图解用户登录验证流程,写得太好了!
273 0
图解用户登录验证流程,写得太好了!
|
自然语言处理 前端开发 安全
2021年了,你还在这样设计网站,会死人的啊
2021年了,你还在这样设计网站,会死人的啊
123 0