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

推荐订阅源

Forbes - Security
Forbes - Security
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
F
Fortinet All Blogs
B
Blog
T
The Blog of Author Tim Ferriss
Engineering at Meta
Engineering at Meta
GbyAI
GbyAI
Y
Y Combinator Blog
Microsoft Azure Blog
Microsoft Azure Blog
L
LangChain Blog
Recent Announcements
Recent Announcements
U
Unit 42
Martin Fowler
Martin Fowler
M
MIT News - Artificial intelligence
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
The Register - Security
The Register - Security
Recorded Future
Recorded Future
C
Check Point Blog
V
V2EX
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Hugging Face - Blog
Hugging Face - Blog
WordPress大学
WordPress大学
Google DeepMind News
Google DeepMind News
酷 壳 – CoolShell
酷 壳 – CoolShell
F
Full Disclosure
小众软件
小众软件
A
About on SuperTechFans
云风的 BLOG
云风的 BLOG
宝玉的分享
宝玉的分享
Last Week in AI
Last Week in AI
有赞技术团队
有赞技术团队
MongoDB | Blog
MongoDB | Blog
爱范儿
爱范儿
P
Proofpoint News Feed
罗磊的独立博客
量子位
D
Docker
博客园_首页
D
DataBreaches.Net
Project Zero
Project Zero
博客园 - 司徒正美
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
博客园 - Franky
Security Latest
Security Latest
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
Netflix TechBlog - Medium
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
博客园 - 三生石上(FineUI控件)
H
Hackread – Cybersecurity News, Data Breaches, AI and More
大猫的无限游戏
大猫的无限游戏

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,转载请注明出处