ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Node.js + Vue全栈开发管理系统实战:从数据库设计到上线部署

Node.js + Vue全栈开发管理系统实战:从数据库设计到上线部署 作为一个用 Node.js 和 Vue 写过好几套业务管理系统的老开发这类XXX管理系统设计与开发的标题我一看到就会自动脑补出一整套的前后端架构、权限模型和一堆坑。最近刚好做完一个营商环境行动计划管理系统从需求梳理到上线部署一路跟下来踩了不少坑也沉淀了一些经验趁热打铁把它写出来希望给准备上手同类项目的朋友一些参考。这套系统说白了就是一个典型的政府或园区内部使用的任务管理平台把营商环境相关的年度行动计划录入系统拆解成具体的任务指标分配到各个责任单位然后每个单位定期在系统里填报进展管理层通过统计看板实时掌握整体推进情况。技术侧用的是前端 Vue 3 后端 Node.jsExpress MySQL标准的轻量级前后端分离架构。整个项目从零到上线大概花了一个半月两个人的小团队搞定。如果你正准备用 Node.js Vue 做类似的管理系统或者已经在开发中途遇到了一些坑这篇文章从项目拆解、技术选型、数据库设计、前后端编码到最后的部署上线和常见面试问题都会尽量讲透。1. 项目需求梳理与整体设计思路1.1 营商环境行动计划管理系统到底要解决什么问题这类系统的核心需求其实非常聚焦就是解决行动计划从制定到落地之间的断层。一开始咱们收到的需求文档就几个字——做一个营商环境行动计划管理系统但真去业务现场聊一圈就会发现里面至少包含下面四层诉求计划管理层年度/季度行动计划要建立台账每个计划包含目标、责任单位、完成时限、经费预算等信息。以前是用 Excel 分发版本混乱、更新不及时。任务执行层计划拆解出来的具体任务责任单位要在系统里定期填报进展上传佐证材料反馈存在的问题。监督考核层管理员要能实时看到哪些任务推进缓慢、哪些已经逾期、哪个单位的红黄牌最多需要自动化的预警统计。数据沉淀层企业诉求、问题台账要能追溯同一类问题反复出现的频率要能统计出来为下一轮行动计划制定提供依据。说白了这不是做一个好看的后台管理页面而是要把一套线下工作流程完整搬到线上让数据的流转和状态的变更形成闭环。这个理解如果不到位后面做出来的系统大概率就是个空壳——能增删改查但真正用不起来。1.2 为什么选 Node.js Vue而不是 Spring Boot 原生 JS先说结论这套组合在几十人规模使用的内部管理系统场景下是性价比最高的选择之一。团队长期做前端JavaScript 全栈没有语言切换成本一个人可以从接口写到页面不用维护两套技术栈。Node.js 侧选的是 Express 4.x不整那些花里胡哨的框架。内部管理系统业务本质就是围绕几张核心表的 CRUD 外加一点状态流转逻辑Express 的中间件机制完全够用生态里要什么有什么不需要为了架构宏大引入过度设计。对比过 NestJS它的依赖注入和装饰器风格确实更工程化但学习曲线和项目初始复杂度都不必要地高了。Vue 侧Vue 3 Vite Element Plus Pinia这是当前除了 React 之外最成熟的中后台技术组合。Vue 的模板语法对开发人员友好Element Plus 的表格、表单、弹窗组件开箱即用配上 Vite 的秒级热更新开发体验真的很好。Spring Boot 为什么被排除不是不好是太重了。对于这种量级的系统Spring Boot 加一堆依赖、Java 环境的配置、构建时间对比 Node.js 的下载依赖直接跑效率差太远了。除非团队里全是 Java 背景否则没必要。从性能角度说Node.js 处理这种几十个人同时在线、每天几千次接口调用的场景绰绰有余单线程事件循环在这种低计算量、高 I/O 的业务型系统里反而很适合。1.3 系统整体架构与核心模块划分整个系统划分为三个端管理后台Vue Web管理员、责任单位填报人员使用PC 端浏览器访问包含计划管理、任务管理、进展填报、统计看板、系统管理五个子模块。后端服务Node.js API提供 RESTful API承载权限校验、业务逻辑、数据读写、文件上传。数据库MySQL所有结构化数据的存储中心外加 Redis 做会话缓存和验证码存储。核心模块大概是这样模块核心功能关键要点系统管理用户管理、角色管理、菜单权限使用 RBAC 权限模型动态路由行动计划管理年/季度计划建档、编辑、发布计划状态机草稿-已发布-执行中-已归档任务管理任务拆解、责任分配、时间节点设置支持任务与子任务两级结构进展填报填报内容、佐证材料上传、审核确认填报后进入审核流审核人可退回统计看板完成率、逾期率、单位排名、趋势图ECharts 数据可视化接口聚合统计企业诉求台账诉求登记、分发、办结、满意度评价类似工单系统的轻量版2. 数据库设计与接口规划2.1 核心表结构与字段设计这套系统我设计了五张核心业务表plans行动计划表、tasks任务表、task_progress进展填报记录表、appeals诉求台账表、users用户表外加关联表如plan_responsible_units、user_roles。不追求太高的范式有些冗余字段是为了查询效率。以tasks表为例核心字段包括id主键plan_id所属计划 ID外键关联 plans 表task_no任务编号业务上要是给人看的比如YS-2024-001title任务名称content任务内容描述responsible_unit责任单位名称这里直接存名称而不是单位表外键因为责任单位其实做一张独立表更规范实际开发时我们最初用了外键后来发现政府侧人员流动大、单位调整频繁直接存名称反而省了一堆连表和变更逻辑deadline完成时限status任务状态0-未开始1-进行中2-已完成3-已逾期4-已退回priority优先级1-普通2-重要3-紧急progress_percent进度百分比0-100created_at/updated_at记录创建和更新时间这里特别说下status字段的设计一定要预估好未来的扩展。最开始我只设计了未开始、进行中、已完成三个状态后来业务方说逾期和退回这两个状态也必须单独列出来因为需要在看板上专门统计逾期数据。所以现在这个字段的值从 0 到 4好在刚开始就用了整数类型加代码注释改动成本不大。2.2 接口设计规范与统一响应格式后端接口设计遵循一个很朴素的规范URL 用名词复数请求方式表达动作。GET /api/plans获取计划列表POST /api/plans新建计划PUT /api/plans/:id修改计划DELETE /api/plans/:id删除计划GET /api/plans/:id/tasks获取某计划下的任务列表POST /api/tasks/:id/progress提交任务进展所有接口统一返回这样的 JSON 结构{ code: 0, message: success, data: { items: [], total: 120 } }code是业务状态码0 代表成功非 0 代表各种错误。前端每个请求拦截器里统一判断 code是 0 就直接返回 data否则弹错误提示。这样前端不用每个接口都写重复的错误判断逻辑省事很多。2.3 文件上传方案本地存储还是云存储进展填报里需要上传佐证材料就是一些 PDF、图片、压缩包。这个环节看似简单坑其实不少。我们最初做的是本地磁盘存储上传的文件放在服务器的/uploads目录下接口返回文件的访问路径。这种方式在小规模内网使用没问题但一旦线上部署用 Nginx 做反向代理就需要额外配置静态文件映射而且在多实例部署的情况下文件会出现存储不一致的问题。考虑到这个项目只是一台服务器的量级最终决定用本地存储 Nginx 静态映射组合路径通过配置文件统一设置。如果后续量大了再切云存储接口层做一层封装就行不影响业务逻辑。接口设计成POST /api/upload支持单文件上传返回文件 ID 和 URL。前端用 Element Plus 的el-upload组件对接设置action属性指向这个接口并带上认证 token。3. 后端 Node.js 关键功能实现3.1 技术栈与工程结构布局后端用 Express 4.xORM 用 Sequelize 6.x。选 Sequelize 而不是直接写 SQL主要原因是这个项目的表关系比较复杂模型关联、查询条件组合很多手写 SQL 容易出错而且代码量翻倍。但 Sequelize 有个缺点是学习门槛不低尤其是关联查询的写法。实际开发中遇到复杂统计我直接写原生 SQL 然后包装成 Sequelize 的sequelize.query()调用怎么方便怎么来。工程目录结构是这样的server/ ├── app.js # 入口文件初始化 Express ├── config/ │ └── db.js # 数据库配置 ├── routes/ # 路由定义 │ ├── plan.routes.js │ ├── task.routes.js │ ├── auth.routes.js │ └── upload.routes.js ├── controllers/ # 业务逻辑控制器 │ ├── plan.controller.js │ ├── task.controller.js │ └── auth.controller.js ├── services/ # 相对独立的服务层 │ ├── statistics.service.js │ └── reminder.service.js ├── models/ # Sequelize 模型定义 ├── middlewares/ # 中间件 │ ├── auth.middleware.js │ ├── error.middleware.js │ └── rate.limit.middleware.js └── utils/ # 工具函数这个结构对于业务型管理系统来说足够清晰了Routes 只做路由分发不写业务逻辑Controllers 里写业务流程控制复杂的数据聚合逻辑放到 Services 层避免 Controller 过于臃肿。3.2 登录鉴权与权限控制的实现思路权限这块用的是经典的 RBAC 模型用户 - 角色 - 权限点。数据库里对应users、roles、permissions、user_roles、role_permissions五张表。JWT 鉴权的流程是登录成功后后端签发一个有效期 2 小时的 JWT token前端把 token 存储到 localStorage并在 axios 请求拦截器里统一加上Authorization: Bearer token请求头后端写一个auth中间件每个请求先解析 token 验证身份通过后把用户信息挂载到req.user上权限点控制的是接口访问比如删除计划需要plan:delete权限点。中间件里检查当前用户的权限列表不包含就直接返回 403。这里有个值得分享的点政府类系统对密码强度的校验比较关注我们设置了最少 8 位且必须包含字母和数字的校验规则。密码存储用bcryptjs哈希不存明文。3.3 任务逾期自动预警与统计看板接口逾期预警是这套系统的灵魂功能之一。传统的人工催办方式效率太低系统里我用node-cron写了一个定时任务每天早上 9 点执行cron.schedule(0 9 * * *, async () { const overduedTasks await Task.findAll({ where: { status: { [Op.ne]: 2 }, deadline: { [Op.lt]: new Date() } } }); // 更新状态为逾期 // 生成待办提醒通知相关责任人 });统计看板的接口是典型的数据聚合操作。前端 ECharts 图表需要的无非是这些数据各单位任务总数、完成数、逾期数、按期完成率。我写了一个单独的统计数据接口用原生 SQL 通过GROUP BY和CASE WHEN一次性聚合出列表数据效率比在 Node.js 里循环处理高得多。SELECT responsible_unit, COUNT(*) AS total, SUM(CASE WHEN status 2 THEN 1 ELSE 0 END) AS completed, SUM(CASE WHEN status 3 THEN 1 ELSE 0 END) AS overdued, ROUND(SUM(CASE WHEN status 2 THEN 1 ELSE 0 END) / COUNT(*) * 100, 1) AS rate FROM tasks GROUP BY responsible_unit ORDER BY rate DESC;3.4 定时提醒与消息通知除了看板任务到期前的提醒也很重要。我设定在任务截止时间前 3 天和当天分别发送提醒。提醒方式目前是系统内部的通知中心待办消息在系统顶部的铃铛图标上会显示未读数量。以后可以扩展短信或企业微信通知接口层已经做了预留。消息通知表结构基本是这样notifications标题、内容、接收人 ID、是否已读、跳转链接。生成提醒时直接批量插入记录前端轮询未读数量这个实现很简单但也非常实用。4. 前端 Vue 3 Element Plus 页面开发4.1 前端工程化搭建与目录结构前端用的是 Vue 3 Vite 5 Element Plus Pinia Vue Router 4。这里特别注意 Vue 3 的项目不能用 Vue 2 的写法刚开始用 Composition APIscript setup语法会有些不习惯但习惯后代码组织确实比 Options API 清晰得多。路由和菜单的处理是我在前端开发中最想强调的部分。系统有管理员、责任单位填报员、普通查看者三种角色菜单展示不能做成写死的。我做了动态路由用户登录后后端返回当前用户拥有的菜单权限列表这是一个树形结构前端把菜单数据存到 Pinia 里动态生成侧边栏导航对于无需权限的公共页面登录页、404页用静态路由业务页面全部动态挂载// 动态添加路由 const modules import.meta.glob(../views/**/*.vue); function createRoutesFromMenus(menus) { const routes []; menus.forEach(menu { if (menu.component) { routes.push({ path: menu.path, name: menu.name, component: modules[../views/${menu.component}.vue] }); } if (menu.children) { routes.push(...createRoutesFromMenus(menu.children)); } }); return routes; }4.2 状态管理为什么用 Pinia这个项目用 Pinia 管理三类全局数据用户信息、菜单权限列表、系统字典数据。Pinia 比 Vuex 4 好在哪简单说就是更轻、TypeScript 支持更好、去掉了 mutations 直接可以在 actions 里修改 state心智负担小很多。状态管理在管理系统里最重要的场景之一就是字典数据。前端经常要显示状态的中文名称比如任务状态字段值为 2页面上要显示已完成。我把这些字典从后端接口拉一次之后全局调用不用每次请求都带状态码到前端翻译。这个看起来小但管理系统的体验好坏全在这些细节。4.3 核心页面组件设计与实现细节计划列表页是典型的查询列表 新增/编辑弹窗结构。用 Element Plus 的el-table展示配合el-pagination分页搜索区放el-input、el-select、el-date-picker。这个页面写起来不难但要注意筛选条件的数据结构定义提交查询时是用的GET参数还是 POST body前后端约定一致就行。任务详情页是整个系统交互最复杂的页面。左侧展示任务基本信息右侧是进展填报记录的时间线el-timeline。填报人每次提交都会在这条时间线上新增一条记录包含填报内容、附件列表、填报人和填报时间。审核人可以看到完整的历史轨迹这点比在 Excel 里改来改去强太多了。统计看板页用 ECharts 画了三个图表任务完成率环形图、各单位进度条形图、近期进展趋势折线图。ECharts 在 Vue 3 下的使用方式是通过echarts.init()获取实例然后设置option在组件卸载时记得调用dispose()释放资源避免内存泄漏。4.4 Axios 封装与拦截器处理前端与后端通信统一封装了一个request.js工具模块。做的事情包括设置基础 URL通过 Vite 的环境变量读取请求拦截器自动附带 token响应拦截器统一处理业务错误码、401 跳转登录页、500 提示服务器异常service.interceptors.request.use(config { const { userStore } usePiniaStore(); if (userStore.token) { config.headers.Authorization Bearer ${userStore.token}; } return config; }); service.interceptors.response.use( response { const res response.data; if (res.code ! 0) { ElMessage.error(res.message || 请求失败); return Promise.reject(new Error(res.message)); } return res.data; }, error { if (error.response?.status 401) { router.push(/login); } else { ElMessage.error(error.message); } return Promise.reject(error); } );5. 开发环境配置与常见问题排查5.1 Node.js 安装与环境变量配置在 Windows 上开发 Node.js 项目第一步就是安装 Node.js。这里有一个非常容易出现的问题——搜索引擎里大量关于npm : 无法加载文件 ...\npm.ps1因为在此系统上禁止运行脚本的报错几乎每个 Node 新手都会遇到一次。这个报错出现的原因是 Windows PowerShell 默认的执行策略是Restricted不允许运行任何脚本文件包括 npm 的包装脚本。解决办法有三种以管理员身份打开 PowerShell执行Set-ExecutionPolicy RemoteSigned然后输入 Y 确认或者用Set-ExecutionPolicy -Scope CurrentUser RemoteSigned只对当前用户生效或者干脆在 CMD 里运行 npm 命令CMD 不受 PowerShell 执行策略影响Node.js 安装完成后环境变量一般会自动配置好但偶尔会有之前装过其他版本残留的环境变量指向旧路径的情况。安装完建议用node -v和npm -v验证一下如果版本不对手动检查系统环境变量里的 PATH 是否指向了正确的 Node.js 安装目录。官方下载的 Node.js 自带 npm但在国内下载 npm 包的速度会让你怀疑人生。我强烈建议安装完成后立刻换淘宝镜像源npm config set registry https://registry.npmmirror.com这样后续安装依赖的速度会从分钟级降到秒级。5.2 npm 配置文件与依赖安装技巧package.json里的scripts字段是项目开发的入口配置。我的开发环境配置大致是这样的{ scripts: { dev: vite, build: vite build, preview: vite preview } }后端项目一般用一个叫nodemon的工具做热重载。nodemon监听文件变化自动重启 Node 服务比每次改代码手动node app.js再刷新接口地址要舒服得多。开发时执行nodemon app.js部署时用node app.js。依赖安装时有一个小技巧npm 现在有 package-lock.json 锁版本多人协作时不要手动删掉这个文件否则哪天依赖更新了个大版本代码很可能就运行不起来了。团队里遇到奇怪的问题第一反应就是先检查环境版本是否一致。5.3 开发代理配置与前后端联调前后端分离开发时最大的痛点是跨域问题。前端跑在http://localhost:5173后端跑在http://localhost:3000浏览器会拦截非同源的请求。解决办法很多项目中我选择了 Vite 的代理配置在vite.config.js里设置export default defineConfig({ server: { proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } } });这个配置的意思是前端发的/api开头的请求会被 Vite 开发服务器转发到http://localhost:3000这样浏览器看到的请求是同源的不会触发跨域拦截。生产环境同样的问题由 Nginx 反向代理解决后面会讲到。5.4 前端调试工具 Vue Devtools 的使用心得第一次接触 Vue 生态的开发者必须安装 Vue Devtools 浏览器插件。在 Chrome 的扩展商店直接搜索安装就行。这个插件能做什么举例来说页面上的组件树一清二楚哪个组件用了哪个数据一目了然可以直接在 Devtools 的 Vue 面板里修改组件数据看页面即时变化排查为什么数据变了但页面没更新这类问题特别好用查看 Pinia/Vuex 的状态变更历史定位是哪个 action 改掉了全局数据查看路由配置和当前路由参数刚接触 Vue 的开发者调试时经常在代码里写一堆console.log有了 Devtools 这个工具大部分问题可以直接在浏览器里定位调试效率提升了一个档次。6. 上线部署与性能优化实战6.1 服务器环境准备与部署策略这个项目最终部署在一台 4核8G 的云服务器上操作系统用的 CentOS 7。部署前做了下面几件事安装 Node.js 16 LTS使用nvm安装方便切换版本安装 MySQL 8.0创建业务数据库和用户名安装 Nginx 作为 Web 服务器和反向代理安装 PM2 用于 Node.js 进程守护后端启动命令非常简单pm2 start app.js --name gsyy-api --max-memory-restart 512Mpm2 save保存当前进程列表再执行pm2 startup配置开机自启。有了 PM2 以后进程崩溃会自动重启不用再担心半夜服务挂掉没人知道。设置--max-memory-restart是为了防止内存泄漏导致的服务器卡死实测一条命令多一层保障。6.2 Nginx 配置与域名解析前端打包产物是纯静态文件可以用 Nginx 直接托管同时把/api开头的请求反向代理到后端接口服务。Nginx 配置的核心片段是server { listen 80; server_name your-domain.com; # 托管前端静态文件 root /var/www/gsyy/dist; index index.html; # 前端路由刷新时回退到 index.html location / { try_files $uri $uri/ /index.html; } # API 请求反向代理到 Node.js location /api/ { proxy_pass http://127.0.0.1:3000/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 上传文件访问路径 location /uploads/ { alias /var/www/gsyy/uploads/; } }这个配置里最关键的try_files $uri $uri/ /index.html;是这个思路Vue Router 默认使用 history 模式如果直接访问https://your-domain.com/task/1刷新页面Nginx 会去磁盘上找task/1这个文件当然找不到。加上这个配置后找不到文件就回退到index.html让前端路由自己接管 URL 解析。6.3 上线前的体检与常见隐患上线前我习惯给系统做一次全面体检重点检查这些隐患数据库连接的并发上限是否够用Node.js 层的连接池配置是否合理定时任务是否会出现重复执行PM2 集群模式下注意不要在每个实例里都跑同一份定时任务文件上传大小限制是否配置了multer默认限制可能不够页面首次加载体积Vite 构建后是否做了代码分割和组件懒加载说到组件懒加载这是 Vue 管理系统首屏优化最立竿见影的手段。Vue Router 里不要直接 import 所有页面组件而是用动态导入的方式component: () import(../views/plan/PlanList.vue)这样首屏只加载登录页和公共布局代码每个业务页面在首次访问时才加载对应 JS首屏体积能减少一半甚至更多。6.4 服务器性能优化与安全加固另外还有几个实践细节供大家参考MySQL 的查询日志在生产环境要关闭不然日志文件会急剧膨胀磁盘被写满的事故我真实遇到过接口要做频率限制登录接口尤其重要防止暴力破解。Express 里用express-rate-limit中间件对/api/auth接口设置每分钟最多 10 次请求所有接口统一加了请求体大小限制express.json({ limit: 2mb })防止恶意超大数据拖垮服务器Nginx 配置了 gzip 压缩前端构建产物里的 JS/CSS 能压缩掉 70% 以上体积7. 开发踩坑实录与问题速查表7.1 前后端联调时遇到的经典问题问题一vue 项目启动后访问不到接口。排查过程是这样的先看浏览器 Network 里请求的状态码如果是 404大概率是 Vite 代理的 target 地址配置错误如果是 CORS 报错说明代理没生效检查请求 URL 是不是以/api开头如果是 500去服务器上看 PM2 日志定位具体错误。问题二npm 安装依赖一直报 ERESOLVE 错误。这基本可以判定是依赖版本冲突。npm install失败的另一个常见原因是使用了本地缓存的旧版本包执行npm cache clean --force清缓存然后删掉node_modules和package-lock.json重新安装。再不行就明确指定版本号。问题三表格分页后数据错乱。这是管理系统开发里特别典型的一个低级但常见的错误——前端分页时只把当前页数据传给后端但切换页码时查询条件没有带上。排查思路很简单检查请求参数里pageNum、pageSize和查询条件是否都正确传递检查后端接口里是否真的用了这些参数做分页查询。7.2 Vue 组件数据不更新的典型场景Vue 3 中修改reactive对象的数组内容时直接用索引赋值会导致响应式丢失比如state.list[0] newItem页面不刷新。正确做法是用splice替换。这是个非常隐蔽又让新手百思不得其解的问题。还有一类问题——数据明明变了但页面没变化——大多是因为直接用ref包裹了深度对象修改内层属性时没有通过.value访问。我在项目里习惯把列表数据用ref([])声明后续更新时直接list.value response.data整个数组替换基本不会踩响应式丢失的坑。7.3 常见报错与解决速查表下面整理一下这个项目开发里最常遇到的报错每个都是我自己踩过或者看同事踩过的坑错误现象核心原因解决办法npm 无法加载文件 npm.ps1禁止运行脚本PowerShell 执行策略限制管理员执行Set-ExecutionPolicy RemoteSignedCannot find module xxx依赖没安装或版本不匹配删除 node_modules 和 package-lock.json重新 npm install接口 404路由路径错误或代理配置错误检查后端路由定义和 Vite/Nginx 代理配置跨域 CORS 报错请求源与接口源不一致开发环境配代理生产环境配 Nginx 反向代理登录后 token 消失localStorage 被清理或刷新页面时状态丢失确认 token 持久化存储的位置检查路由守卫逻辑前端页面刷新后 404history 模式下 Nginx 没配置 fallbackNginx 配置try_files $uri $uri/ /index.html;上传文件报 413Nginx 请求大小限制client_max_body_size 20m;7.4 我的几个独家小经验最后一个话题说几个平时文档里很难搜到的经验。第一字典数据一定要做缓存。前端把后端返回的字典数据存储在 Pinia 里应用生命周期内只请求一次。如果不这样做每个下拉框都要单独发一个请求系统的接口数量会爆炸式增长。第二后端接口设计时最好带一个keyword通用搜索字段。很多管理页面都有搜索需求但一开始说不全搜索条件。接口层预留一个 keyword 参数后端做模糊查询前端搜索框里只需要输入一个值。后续需求方说要加搜索功能前端配置一行代码就行不用改后端接口。第三时间字段统一用时间戳或标准日期格式存储不要用字符串拼接。统计看板里本月完成率这类需求最后都要落到 SQL 的日期函数上如果数据库里存的是乱七八糟的字符串格式统计功能够你喝一壶。第四再忙也要写接口文档。哪怕用最简单的 Markdown 表格把每个接口的 URL、请求参数、响应结构写清楚。这个项目两个人开发只有我在写后端如果不留文档联调时前端同事三天两头来问字段含义沟通成本根本不是写文档的十倍。写在最后这段时间做下来我最大的感受是Node.js Vue 这套技术组合非常适合内部管理系统这类业务逻辑清晰但功能点繁多的项目。Node.js 的生态能让后端开发像写前端一样顺畅Vue 3 的组件化开发让很多复用页面只要写一次就能到处用尤其适合需要快速响应需求变化的内部系统。如果你正准备上手这样一套系统我的建议是别把精力浪费在追求框架先进上。项目能跑、能维护、能帮业务方真正解决问题比用什么技术栈重要一百倍。先想想数据怎么流转、状态怎么变化、谁在用这个系统、有哪些权限边界这些想清楚了代码层面的东西都是水到渠成的事。
返回列表