React18+Vite4+Zustand4 后端管理系统构建 ????
前言
老板:搞个管理系统,我明天就要。
前端:没空,谁爱做谁做!(小声bb)
老板:(突然抬头)你说什么?
前端:好的老板
用后端的话来说,一个管理系统而已 要不是人手不够,后端也能做。
看吧,前端就是这么人微言轻~ 该干的活还是得干。
起步
# 使用ant design pro
npm i @ant-design/pro-cli -g
pro create myapp
ok,启动项目,完成!但真的这么美好吗?
问题
上面我们用了antd pro创建了一个react项目,看似很美好简单,但其实存在以下的问题(个人观点)
- 集成了dva,基于 redux 和 redux-saga 的数据流方案,dva 还额外内置了 react-router 和 fetch
- 项目代码的配置、插件、组件过于繁琐 就好比下载一个360软件,你电脑上就会多出n个软件的感觉
- 采用webpack打包,虽说umi3.5采用mfsu,但也是基于webpack5且对应的issue也是非常之多
看张图感受一下????
这种数据流方案怎么样?是不是又臭又长,基本每个文件都要写
每次都要connect、dispatch,而且这种还算好的,有的更是多的离谱!
方案
基于上面种种的不爽,所以还是自己搭建一个管理系统吧,相信你项目中的代码也会有不爽的地方可以分享下你的解决方案,欢迎下方留言探讨啊????
技术选型
- vite v4:下一代的前端工具链,为开发提供极速响应
- react v18:react18也是更新了很多好用的hook
- zustand v4:一个非常好用的状态管理库
- react router v6
- typescript
这里对zustand做个简单的了解,有点类似于mobx并且支持各种中间件
import { create } from 'zustand'
const useBearStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
function BearCounter() {
const bears = useBearStore((state) => state.bears)
return <h1>{bears} around here ...</h1>
}
function Controls() {
const increasePopulation = useBearStore((state) => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}
这就是一个最简单的store -> ui,是不是特别方便且是以hook的形式在组件中使用,对react技术栈的童鞋简直不要太友好????,官方也横向对比redux,Why zustand over redux? 具体可以查看官方文档
再来看下中间件
import { create } from 'zustand'
import { persist } from 'zustand/middleware'
export const useBearStore = create(
persist(
(set, get) => ({
bears: 0,
addABear: () => set({ bears: get().bears + 1 }),
}),
{
name: 'food-storage',
}
)
)
通过persist中间件,可以实现本地持久化存储,刷新页面会自动将本地数据装载到store中。以往做法,刷新页面取出localstorage中的数据存储到store中,这一套下来挺繁琐的,这样看来是不是感觉还挺棒????????????
项目地址
一个轻量级 React18 后端管理模板,旨在快速搭建后端管理系统包含基础功能不做过渡封装,快速扩展。家人们,咱们主打就是简洁快速!
目录结构
├─ public # 静态资源
│ ├─ favicon.ico # favicon图标
├─ src # 项目源代码
│ ├─ components # 全局公用组件
│ ├─ layout # 布局组件
│ ├─ config # 全局配置
│ │ └─ router.tsx # 路由配置
│ ├─ services # api接口
│ ├─ stores # 全局 store管理
│ ├─ utils # 全局公用方法
│ ├─ pages # pages 所有页面
│ ├─ App.tsx # 入口页面
│ ├─ global.d.ts # 全局声明文件
│ ├─ index.css # 全局样式文件
│ └─index.tsx # 源码入口
└── .commitlintrc.js # 自定义commitlint
└── .cz-config.js # 自定义commitlint
└── .eslintignore # eslint忽略文件
└── .eslintrc.js # eslint配置
└── .prettierrc.js # prettier配置
└── vite.config.js # vite打包配置
└── index.html # html模板
└── package.json # package.json
安装及使用
# 克隆项目
git clone https://github.com/panyushan-jade/react-template-admin.git
# 进入项目目录
cd react-template-admin
# 安装依赖
pnpm install(推荐使用pnpm)
# 启动
pnpm start
# 构建
pnpm build
# 预览build产物
pnpm preview
支持的功能
- 登录/退出登录
- 数据持久化存储
- 路由鉴权
- 动态主题
- 错误处理
- axios 封装
预览
题外话
项目使用的是pnpm,pnpm对比npm和yarn有很明显的优势,建议大伙都用起来吧。不过 建议node版本14+
。此外如果遇见node、pnpm、yarn等版本问题,这里推荐一个JavaScript工具管理器 Volta。用了都知道,简直不要太香,nvm可以换掉了。
最后
目前项目还是在迭代和维护中,肯定有很多的不足以及问题,欢迎留言及pr。非常非常非常感谢????????????,如果你觉得这个项目还不错,点个 star ⭐️ 支持一下 thanks~ 项目地址
推荐阅读
-
java springboot+mybatis 电影票务网站管理系统前端+后端设计与实施
-
用 three.js (webgl) 构建智能楼宇、设备检测和数字孪生 - 第 13 课 使用 webgl(three.js) 构建三维智能公园、三维大屏幕、三维建筑、智能灯杆三维显示屏、三维灯杆、网页版三维、bim 管理系统 - 第 6 课
-
基于 BIM+Digital Twin 技术构建建筑工程绿色智能管理系统
-
openEuler郑州用户组成立!openEuler与hyperfusion携手共建河南地区用户生态 - 开幕致辞 超融合操作系统业务总经理、openEuler委员会成员蒋振华先生为本次活动致辞。 在本次活动的致辞中,他提到,作为openEuler社区早期的成员,超融合见证了openEuler从成立到在各行业商业落地,再到跨越生态拐点的过程,感谢openEuler提供了一个全产业链共同创新的平台,共同推动创新技术的商业落地。 同时,本次活动得到了郑州市郑东新区大数据管理局、郑州中原科技城投资服务局的大力支持。 郑东新区大数据管理局曹光远 在活动致辞中表示,openEuler的应用和*应用设施的深度优化,为郑东新区数字化转型提供了安全、可靠、高性能的技术基础;郑州中原科技城招商服务局王林表示,郑东新区欢迎所有openEuler生态相关企业扎根当地,围绕openEuler社区共同发展,形成合力。 openEuler社区及运维功能介绍 openEuler技术委员会委员胡峰 openEuler技术委员会委员胡峰先生在本次活动中介绍了openEuler社区目前发展的整体情况,并重点从技术层面介绍了openEuler的运维功能。 openEuler 晚会 胡峰先生介绍智能运维工具 A-Ops 和 openEuler gala、 阿波罗 Apollo、智能漏洞管理解决方案等新功能,以及涵盖各种运维场景的精品运维组件。在*交流环节,许多用户就目前使用的 openEuler 在*交流环节,许多用户就自己在使用openEuler过程中遇到的一些问题与胡峰先生进行了进一步的交流。 软硬结合,构建多样化算力操作系统 Hyperfusion 基于 openEuler 的基础上,结合自身软硬件技术积累,推出了富讯服务器操作系统 FusionOS FusionOS. FusionOS 首席架构师张海亮 分享了 FusionOS FusionOS首席架构师张海亮分享了FusionOS的软硬件协同优势、卓越的性能和可靠性,以及FusionOS在金融、运营商、*、互联网等行业的实践案例,引起了众多用户的兴趣,分享结束后,不少参会者就FusionOS的特点向讲师提问并进行了交流。
-
java 项目管理系统源代码 + 项目描述 + 功能描述 + 前后端分离 + 二次开发
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享,主题为「敏捷需求挖掘和组织方法,交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验,完成了企业多个团队从传统模式到敏捷转型的落地和实施,积淀了很多的经验。 这次分享主要包含以下2个部分: 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis(以下简称EDBA) 用户影响地图,是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题,比如大家使用不同的业务语言、技术语言,造成角色间的沟通阻碍,还会导致一些问题,比如需求误解、需求传递错误等;这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间,研发人员必须要将这些需求实现交付,他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案,需要把它实现,但没有和业务侧一起去思考解决方案是否正确,能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设,也就是功能需求。首先把它先实现,再逐步去验证我们每一个小目标是否已经实现,再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题,我们如何避免?先简单介绍做敏捷转型的常规思路: 先做团队级的敏捷,首先把产品、开发、测试人员,还有一些更后端的人员比如交互运维的同学放在一起,组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的,第一层是业务需求,在这个层级是以用户目标和业务目标作为输入进行规划,同时需要去考虑客户的诉求。业务人员通过获取到的业务需求,进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元,它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能,它是我们集成和测试的对象,也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队,映射到迭代计划会上要把它分解为相应的技术任务,包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来,形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程,最后生产。另外产品需求包含了操作流程和业务规则,具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图,在敏捷江湖上其实有一个传说,大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉,在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前,先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后,用户故事地图才去梳理我们整个的业务工作流,以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题,我们包括以下这些: 首先是范围蔓延,我们在整张地图上,功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上,那大家都有不同想法些立场,会提出很多需求(正确以及错误的需求)。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求,比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话,就需要降低优先级或弃掉。另外,通常我们去制定解决方案的时候,会考虑较完美的实现,导致解决方案括很多的功能。这个时候关键目标至关重要,会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构: 第一层why,你的业务目标哪个是最重要的,为什么?涉及到的角色有哪些? 第二层how ,怎样产生影响?影响用户角色什么样的行为? (不需要去列出所有的影响,基于业务目标) 第三层what,最关键的是在梳理需求时不需一次把所有细节想全,这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图,业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的,specific非常的具体,miserable 是可以衡量的,action reoriented是面向活动的, real list 也是很实际的。 量化的目标会指引我们接下来的行动,梳理一个业务目标,尽量去量化,比如 :我们通过打造一条什么样的流水线,能够提高整个部署的效率,时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图, how 层级识别出来的内容,客服角色:想要对它施加的影响,把客户引导到论坛上,帮助客户更容易的跟踪问题,更快速的去定位问题。初级用户:方论坛上找到问题。高级用户:在论坛上回答问题。通过我们这些用户角色,进行活动,完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级,才是我们日常接触比较多的真正的功能的特性和需求,比如引导到客户到论坛上,其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付,在每个迭代之前做进一步的梳理,细化成相应的用户故事。 这个是云智慧团队中,自己做的影响地图的范例,可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为:
-
Go] 基于 Gin 从 0 到 1 构建 Web 管理后台系统后台服务(III)路由、自定义检查器和 Redis
-
教育平台项目后台管理系统:介绍与构建
-
eggjs 构建后端博客系统(一),记录解决 sql 事务问题
-
React18+Vite4+Zustand4 后端管理系统构建 ????