小行星运营平台

前后端分离的后台管理系统，服务于电商场景下的商品运营与数据分析。

技术栈

层级	技术
前端框架	Vue 3 + TypeScript + Vite
状态管理	Pinia
UI 组件库	Element Plus
数据可视化	ECharts
HTTP 客户端	Axios
路由	Vue Router
后端	Node.js + Express
认证	JWT

核心功能模块

模块	路由	功能
权限管理 (ACL)	/acl	用户管理、角色管理、菜单权限管理
商品管理	/product	品牌管理、三级分类、属性管理、SPU 管理、SKU 管理
数据大屏	/screen	ECharts 可视化仪表盘

项目结构

├── src/                    # 前端源码
│   ├── api/               # API 接口层
│   ├── views/             # 页面组件
│   ├── store/             # Pinia 状态仓库
│   ├── router/            # 路由配置 + 守卫
│   ├── layout/            # 布局组件
│   ├── components/        # 公共组件
│   ├── directive/         # 全局指令 (v-has)
│   └── utils/             # 工具函数
├── server/                 # 后端服务
│   ├── routes/            # 路由模块
│   │   ├── acl/          # 认证 + 用户/角色/菜单管理
│   │   ├── product/      # 商品相关 (分类/品牌/属性/SPU/SKU)
│   │   └── screen/       # 大屏数据
│   ├── middleware/        # 中间件
│   ├── data/             # 内存数据存储 + 种子数据
│   └── app.js            # 入口文件
└── mock/                  # Mock 数据 (备选)

快速开始

前端

# 安装依赖
npm install --legacy-peer-deps

# 启动开发服务器
npm run dev

后端

cd server
npm install
npm start

访问地址

服务	地址
前端页面	http://localhost:5173
后端 API	http://localhost:3001

默认账号

用户名	密码	角色
admin	111111	平台管理员（全权限）
system	111111	系统管理员
editor	111111	商品编辑

API 概览

所有接口统一返回格式：{ code: number, message: string, ok: boolean, data: any }

认证

• POST /admin/acl/index/login — 登录
• GET /admin/acl/index/info — 获取用户信息及权限
• POST /admin/acl/index/logout — 退出登录

用户管理

• GET /admin/acl/user/:page/:limit — 分页用户列表
• POST /admin/acl/user/save — 新增用户
• PUT /admin/acl/user/update — 更新用户
• DELETE /admin/acl/user/remove/:id — 删除用户

角色管理

• GET /admin/acl/role/:page/:limit — 分页角色列表
• POST /admin/acl/role/save — 新增角色
• GET /admin/acl/permission/toAssign/:roleId — 获取角色的菜单权限
• POST /admin/acl/permission/doAssign/ — 分配权限

商品管理

• GET /admin/product/getCategory1~3 — 三级分类
• GET /admin/product/baseTrademark/:page/:limit — 品牌分页
• GET /admin/product/attrInfoList/:c1/:c2/:c3 — 属性列表
• GET /admin/product/:page/:limit — SPU 列表
• GET /admin/product/list/:page/:limit — SKU 列表
• GET /admin/product/onSale/:id — SKU 上架
• GET /admin/product/cancelSale/:id — SKU 下架

三层权限控制

1. 路由级 — 后端返回路由名，前端 filterAsyncRoute 动态注册
2. 菜单级 — menuRoutes 状态驱动 el-menu 渲染
3. 按钮级 — v-has 指令，无权限时移除 DOM