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

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

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


因为很早之前就是上手的 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天前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
前端开发
前端学习笔记202303学习笔记第五天-spa页面的优点
前端学习笔记202303学习笔记第五天-spa页面的优点
73 0
|
前端开发
前端学习笔记202303学习笔记第五天-了解单页面应用程序的概念
前端学习笔记202303学习笔记第五天-了解单页面应用程序的概念
78 0
|
前端开发
前端学习笔记202304学习笔记第九天-lema核心操作1
前端学习笔记202304学习笔记第九天-lema核心操作1
64 0
|
前端开发
前端学习笔记202304学习笔记第九天-lema核心操作2
前端学习笔记202304学习笔记第九天-lema核心操作2
57 0
|
JavaScript
手把手教你怎么实现一个后台管理系统——架构篇
手把手教你怎么实现一个后台管理系统——架构篇
手把手教你怎么实现一个后台管理系统——架构篇
|
新零售 大数据 云计算
二二复制公排开发功能丨二二复制公排系统开发(开发原理)丨二二复制公排源码详细
 新零售的另一个新层次是互联网+技术(大数据、云计算、移动支付等)它可以连接线上和线下,实现全面覆盖,并通过技术提高零售能力。使企业能够更清晰地获得消费者的形象,同时刺激消费者的消费,创造更好的消费者体验。
|
移动开发 JSON 小程序
【小程序开篇】小程序架构和配置
【小程序开篇】小程序架构和配置
292 0
【小程序开篇】小程序架构和配置