惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

H
Help Net Security
The GitHub Blog
The GitHub Blog
F
Fortinet All Blogs
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Simon Willison's Weblog
Simon Willison's Weblog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Cisco Talos Blog
Cisco Talos Blog
P
Privacy & Cybersecurity Law Blog
I
Intezer
Y
Y Combinator Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
N
Netflix TechBlog - Medium
The Hacker News
The Hacker News
AWS News Blog
AWS News Blog
aimingoo的专栏
aimingoo的专栏
A
About on SuperTechFans
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Stack Overflow Blog
Stack Overflow Blog
Hacker News: Ask HN
Hacker News: Ask HN
酷 壳 – CoolShell
酷 壳 – CoolShell
量子位
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
B
Blog
T
Tor Project blog
C
Cybersecurity and Infrastructure Security Agency CISA
云风的 BLOG
云风的 BLOG
博客园_首页
V2EX - 技术
V2EX - 技术
T
Threat Research - Cisco Blogs
腾讯CDC
宝玉的分享
宝玉的分享
博客园 - 叶小钗
罗磊的独立博客
S
Securelist
The Last Watchdog
The Last Watchdog
Google Online Security Blog
Google Online Security Blog
Scott Helme
Scott Helme
博客园 - 司徒正美
W
WeLiveSecurity
有赞技术团队
有赞技术团队
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
S
Secure Thoughts
NISL@THU
NISL@THU
N
News and Events Feed by Topic
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
雷峰网
雷峰网
大猫的无限游戏
大猫的无限游戏
K
Kaspersky official blog
IT之家
IT之家

webfem

react-virtualized AutoSizer 实现原理详解 - webfem JWT技术详解:从入门到精通 - webfem 如何在电脑上调试手机网页 - webfem react-virtualized 的用法详解 - webfem MongoDB 入门详解 - webfem react-virtualized 无限列表图片闪屏问题修复 - webfem 博客搭建-创建文章接口 - webfem 代码相似性检查机制 - webfem WebSocket 技术详解:实时通信的利器 - webfem 小米YU7购车记-新能源购置税计算器的诞生 - webfem 手动搭建个人博客 - webfem 博客搭建-项目工程搭建 - webfem Base64编码详解:原理、应用与实践 - webfem 字数统计算法深度解析:从Unicode到实际应用的硬核技术实现 - webfem 衬线体与无衬线体:字体设计的经典对决 - webfem 如何把 小程序 转换为 VUE - webfem 性能优化-核心指标-FP - webfem MD5算法原理及其实现 - webfem 性能优化-核心指标-SI 的介绍与优化 - webfem
如何设计一个后端管理平台 - webfem
yimin,2316114920@qq.com · 2025-08-19 · via webfem

介绍

后端管理平台是每个公司都会涉及的内容,如何设计一个合理、好用的平台,是考验工程师的一大考题。本文就讲述如何设计一个后端管理平台。

后端管理平台可以从技术选型、技术架构、项目结构和研发效率等几个方面展开

技术选型

在选择技术框架过程中,需要考虑人员平均能力,框架易用性,版本稳定性等方面。很多时候需要多权衡,做到”极聪明而道中庸“。

这里来分享一下我们选择技术的例子

  1. 前端框架:公司属于中小公司,人员技术水平中等,优先选 vue 而不是react,vue 轻巧,适合小公司,但是天花板和拓展性小于react

  2. 状态管理:选择vue 配套的 pinia,对于开发者来说API更加简单,理解也没那么复杂。之前vuex的设计真的是自嗨

  3. UI 框架:三大主流框架 antd、element、arco 都可以选,看喜好,个人更喜欢 arco

  4. 是否用 TS:建议使用,能在一定程度规避代码错误,前期允许使用 any,帮助大家过渡

  5. 是否 Monorepo: 必须使用,后端管理平台肯定有公共组件以及公司基建,Monorepo 项目可以方便调用。如何开启Monorepo 可以参考文章:使用 pnpm 搭建 Monorepo 仓库

技术架构

后端管理平台可以大致分为数据存储层、业务层、以及路由层这三个方向。那么可以这么设计

技术架构

后续有更多的需求,可以在这个基础上扩充,但是核心还是这几个方向

项目结构

项目结构是规范团队研发在哪写代码的标的,这里我们参考 arco pro 提供的工程目录提供一个比较合理的项目结构

项目结构

研发提效

后端管理平台很大一部分工作是重复的,比如各种表格、表单以及CURD操作等。因此,这里面的优化手段就很多了。

我们可以从一下几个方面来思考

抽象视图层

将我们的常用页面、组件抽象为json配置,代码避免大段的 UI 样式,只需要写配置,以及对应的业务逻

接口生成页面

对于一个简单的 CURD 列表页,我们完全可以根据后端的 接口定义 自动生成一个完整的页面。这个过程也是非常简单

AI 集成

利用 AI 能力,整理合适的上下文,可以快速生成业务逻辑

这里只提 3 个思路,具体的操作见仁见智,这部分内容也是研发能力展现的重要抓手,希望对大家有帮助

结语

我们从技术选型、技术架构、项目结构和研发效率等几个方面展开聊了后端平台设计的核心关注点,并给了一些实践经验。实践过程中可能会有差异,但是万变不离其宗。对于提效的部分,因人而异,需要多多思考。

原文地址:https://webfem.com/post/how-design-admin,转载请注明出处