# SN_mallAdmin

**Repository Path**: xiechunhao/sn_mall-admin

## Basic Information

- **Project Name**: SN_mallAdmin
- **Description**: 商城可视化管理后台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-11-01
- **Last Updated**: 2024-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目简介
### 项目说明
该管理系统整体采用前后端分离的开发模式，其中前端项目是基于 Vue 技术栈的单页应用(SPA)项目。后端直接操作数据库，通过api接口将数据返回给前端项目。前端负责构建用户界面并通过ajax等技术调用后端提供的接口获得数据。
### 在线体验
SN商城 - 可视化管理后台：[http://adm.starsareblindi.xyz](http://adm.starsareblindi.xyz)

测试账号：admin  密码：admin

### 项目地址

[https://gitee.com/StarsAreBlindI/sn_mall-admin](https://gitee.com/StarsAreBlindI/sn_mall-admin)

### 项目架构

![](./md-img/项目架构.png)

## 项目演示

### 项目截图
| ![](./md-img/登录页.png)   | ![](./md-img/主控台.png)   | ![](./md-img/订单列表.png) |
| -------------------------- | -------------------------- | -------------------------- |
| ![](./md-img/分销设置.png) | ![](./md-img/交易设置.png) | ![](./md-img/评论管理.png) |
| ![](./md-img/物流信息.png) | ![](./md-img/商品管理.png) | ![](./md-img/图库列表.png) |

## SN商城 - 可视化管理后台
### 技术栈

- 前端框架：[vue3](https://vuejs.org/)
- 状态管理：[pinia](https://pinia.vuejs.org/zh/)
- 组件库：[element-Plus](https://element-plus.org/zh-CN/#/zh-CN)、[ECharts](https://echarts.apache.org/zh/index.html)
### 项目模块

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

- Windows 版本： Windows 10 家庭中文版
- 开发工具： VS Code
- Node 版本：v20.13.1
- npm 版本：v10.5.2
### 运行程序

1. 安装依赖
```shell
# npm
npm install
```

2. 运行程序
```shell
# npm
npm run dev
```
### 工程结构解析
```txt
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									# 组合式函数
```