mall_admin

一个基于 Vue 3 + Element Plus + Express + MongoDB 的商城后台管理系统练习项目。

这个项目采用前后端分离结构，包含登录、分类管理、商品管理等基础后台功能，适合作为入门级全栈练手项目。

功能简介

• 管理员登录
• 分类管理
  • 分类列表
  • 添加分类
  • 编辑分类
  • 启用 / 禁用分类
  • 删除分类
• 商品管理
  • 商品列表
  • 按分类筛选
  • 按关键词搜索
  • 添加商品
  • 编辑商品
  • 上架 / 下架商品
  • 删除商品
  • 商品分页
  • 商品图片预览

技术栈

前端

• Vue 3
• Vue Router 4
• Element Plus
• Axios
• Vite

后端

• Node.js
• Express
• Mongoose
• JSON Web Token
• CORS

数据库

• MongoDB

项目结构

mall_admin
├─ admin-client      # 前端项目
│  ├─ src
│  │  ├─ api         # 接口封装
│  │  ├─ router      # 路由配置
│  │  ├─ utools      # axios 请求封装
│  │  └─ views       # 页面组件
│  └─ vite.config.js # Vite 配置和代理
├─ admin-server      # 后端项目
│  ├─ config         # 数据库配置
│  ├─ middleware     # 鉴权中间件
│  ├─ models         # mongoose 数据模型
│  └─ app.js         # 服务入口
└─ README.md

本地运行

1. 克隆项目

git clone <your-repo-url>
cd mall_admin

2. 启动 MongoDB

后端默认连接本地 MongoDB：

mongodb://localhost:27017/mall_admin

请先确认本地 MongoDB 服务已经启动。

3. 启动后端

cd admin-server
npm install
node app.js

默认运行端口：

http://localhost:4000

4. 启动前端

新开一个终端：

cd admin-client
npm install
npm run dev

默认访问地址：

http://localhost:5173

默认登录账号

username: admin
password: 123456

接口说明

登录

• POST /api/login

分类

• GET /api/categories
• POST /api/categories
• PUT /api/categories/:id
• DELETE /api/categories/:id

商品

• GET /api/products
• POST /api/products
• PUT /api/products/:id
• DELETE /api/products/:id

项目说明

• 前端通过 Vite 代理将 /api 请求转发到后端 4000 端口。
• 登录后会把 token 存到 localStorage 中，请求时自动携带到请求头。
• 商品图片目前采用 base64 的方式直接保存，适合练手项目，不适合正式生产环境。
• 删除分类时，如果该分类下仍然存在商品，后端会阻止删除，避免产生脏数据。