基于Vue+Vite开发的商城后台管理系统（SN_mallAdmin）

项目简介

项目说明

该管理系统整体采用前后端分离的开发模式，其中前端项目是基于 Vue 技术栈的单页应用(SPA)项目。后端直接操作数据库，通过api接口将数据返回给前端项目。前端负责构建用户界面并通过ajax等技术调用后端提供的接口获得数据。

在线体验

SN商城 - 可视化管理后台：http://adm.starsareblindi.xyz

项目地址

https://gitee.com/StarsAreBlindI/sn_mall-admin

项目架构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wvlJzjOY-1722387104965)(https://i-blog.csdnimg.cn/direct/3de5a56f9cc94beeb171b0a53536b5b7.png#pic_center)]

项目演示

项目截图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JwQRJPla-1722387104966)(https://i-blog.csdnimg.cn/direct/30b58209737447d6aa3c7e01e3a58169.png)]

SN商城 - 可视化管理后台

技术栈

• 前端框架：vue3
• 状态管理：pinia
• 组件库：element-Plus、ECharts

项目模块

• 登录模块
• 后台主控
• 图库模块
• 公告模块
• 角色模块
• 管理员模块
• 菜单权限模块
• 订单模块
• 物流模块
• 交易模块
• 分销模块
• 商品模块
• 优惠券模块
• 商品分类模块
• 商品评论模块
• 商品规格管理模块
• 会员和会员等级模块

开发环境

• Windows 版本： Windows 10 家庭中文版
• 开发工具： VS Code
• Node 版本：v20.13.1
• npm 版本：v10.5.2

运行程序

1. 安装依赖

# npm
npm install

2. 运行程序

# npm
npm run dev

工程结构解析

vue-mall											# 文件项目名
├─ .env.development									# 开发环境配置
├─ .env.production									# 开发环境配置
├─ .eslintrc.cjs									# ESLint配置
├─ index.html										# H5端首页
├─ jsconfig.json									# jsconfig.json依赖
├─ package-lock.json								# package-lock.json依赖
├─ package.json										# package.json 依赖
├─ README.md										# README说明文档
├─ vite.config.js									# vite 配置
└─ src											# 源代码
   ├─ App.vue									# 入口页面
   ├─ axios.js									# axios拦截器
   ├─ main.js									# vue初始化入口文件
   ├─ permission.js									# 登录逻辑
   ├─ views										# 主包页面
   │  ├─ 404NotFound.vue							# 404页面布局
   │  ├─ AboutView.vue								# 关于页
   │  ├─ HomeView.vue								# 主控台
   │  ├─ LoginView.vue								# 登录页
   │  ├─ user									# 分包页面（角色模块）
   │  ├─ skus									# 分包页面（订单模块）
   │  ├─ setting								# 分包页面（系统设置模块）
   │  │  ├─ base.vue								# 基础设置
   │  │  ├─ buy.vue									# 交易设置
   │  │  └─ ship.vue								# 物流设置
   │  ├─ role									# 分包页面（权限模块）
   │  ├─ order									# 分包页面（订单模块）
   │  │  ├─ ExportExcel.vue							# 订单导出
   │  │  ├─ InfoModal.vue							# 查看订单
   │  │  ├─ list.vue
   │  │  └─ ShipInfoModal.vue						# 查看物流信息
   │  ├─ notice									# 分包页面（公告模块）
   │  ├─ manager								# 分包页面（管理员模块）
   │  ├─ level									# 分包页面（会员等级）
   │  ├─ image									# 分包页面（图库模块）
   │  ├─ goods									# 分包页面（商品模块）
   │  │  ├─ banners.vue								# 轮播
   │  │  ├─ content.vue								# 商品详情
   │  │  ├─ list.vue
   │  │  ├─ skus.vue								# 商品规格
   │  │  └─ components								# 组件
   │  ├─ coupon									# 分包页面（优惠券模块）
   │  ├─ comment								# 分包页面（评论模块）
   │  ├─ category								# 分包页面（商品规格管理模块）
   │  └─ access									# 分包页面（用户权限访问设置） 
   ├─ stores										# 全局 pinia store
   │  └─ counter.js									# 守卫
   ├─ router										# 全局路由
   ├─ layouts										# 全局布局
   ├─ composables									# 全局组件
   └─ components									# 组合式函数