vue3电商后台管理系统: 在线演示地址(PC/移动端)：http://139.9.35.15/。技术栈：Vue3、Vite、TypeScript、VueRouter、Pinia、Element-Plus、Axios、ECharts、SCSS、ESLint、Django。项目描述：采用了前后端分离的架构，易于扩展和维护。旨在为电商企业提供后台管理能力。涵盖权限管理、职位管理、商品管理、在线音乐和在线数据大屏等多个模块。

<div align='center'>
    <img src="https://gitee.com/xuhaibo_game/img/raw/master/manage/books.ico" />
    <h1>
        电商后台管理系统
    </h1>
	<i>
    技术栈：Vue3、Vite、TypeScript、VueRouter、Pinia、Element-Plus、Axios、ECharts、SCSS、ESLint、Django
    </i>
	<br/>
    <p>
    采用了前后端分离的架构，易于扩展和维护。旨在为电商企业提供后台管理能力。涵盖权限管理、用户管理、职位管理、商品管理、在线音乐和在线数据大屏等多个模块
    </p>
    <strong>
        在线演示地址(PC/移动端)：<a>http://139.9.35.15/</a> 
    </strong>
    <br/>
    <br/>
</div>

### 功能介绍

- 用户登入：实现输入时账号密码校验、采用基于Token的自动登录机制

- 导航与界面：实现导航菜单、面包屑、路由与图标库联动。采用媒体查询、流式布局等手段适配移动端

- 组件与封装：设计并封装高频组件，如查看图片、图片上传、分页、多级下拉框......，提升代码复用率。

- 权限鉴定：请求得到用户权限后为不同权限的用户异步添加权限路由、生成菜单和禁用限权功能

- 网络处理：二次封装Axios，自动为请求添加token、格式化数据。使用promise处理多个请求。

- 用户体验：通过遮罩层、进度条、过渡动画等方式优化用户等待体验，并实现自定义主题和暗黑模式切换。

- 可视大屏：利用ECharts展示多种可视化图表，数据源来自于后端实时刷新。适配不同分辨率的屏幕

- 在线音乐：实现在线音乐歌词与歌词交互功能。并用图标+滑块等组件替代audio控制媒体

- 性能：通过划分路由、路由懒加载、异步添加权限路由、资源即时回收等方式提升性能

- 后端：技术栈Django+MariaDB+uWSGI+Nginx，使用[CORS](http://www.baidu.com/link?url=kh4-dbedmFl3uSuGZJvTxY2ttZku8N1KChGwLsrlZnjb4fg_WQ2fY10NYyG2wqp4)解决跨域。

### 具有特点

- 友好的代码结构及注释，便于阅读及二次开发

- 实现前后端分离，通过token进行数据交互

- 灵活的权限控制，可控制到页面或按钮，满足绝大部分的权限需求

- 良好的用户体验，使用多种动画优化等待和页面跳转体验

### **项目结构/目录介绍**

```tex
vue3SystemManage
├─node_modules              依赖的第三方库和工具
├─public                    静态资源文件，如 HTML 文件和图标
├─.prettierrc.json          Prettier 配置文件
├─package.json              项目依赖和脚本
├─package-lock.json         依赖版本锁定
├─tsconfig.app.json         TypeScript 应用配置
├─tsconfig.app              TypeScript 配置
├─tsconfig.node.json        TypeScript Node 配置
├─vite.config.ts            Vite 配置文件
├─README.md                 项目说明文档
└─src                       源代码目录
	├─assets                静态资源，如图标和图片
	│    ├─icons             项目中使用的图标
	│    └─images            项目中使用的图片
	│
	├─router                vue-router路由文件
	│    ├─index.ts          路由配置的入口文件
	│    └─routers.ts        具体路由配置文件
	│
	├─stores                Pinia状态管理文件
	│    ├─category.ts       分类相关的状态管理
	│    ├─transitionName.ts 过渡动画管理
	│    ├─loginData.ts      登录相关的状态管理
	│    └─.........         其他状态管理文件
	│
	├─api                   封装请求相关接口
	│    ├─acl               权限控制接口
	│    ├─components        组件相关接口
	│    ├─loginAndMain      登录及主页面接口
	│    ├─product           产品相关接口
	│    └─screen            数据大屏相关接口
	│
	├─components            公共组件
	│    ├─ClickIcon         点击的图标组件
	│    ├─DeleteConfirm     删除确认弹窗组件
	│    ├─MusicAudio        音乐播放组件
	│    ├─UploadImg         图片上传组件
	│    └─.........         其他组件
	│  
	├─styles                样式文件
	│    ├─all.scss          全局样式
	│    ├─reset.scss        样式重置
	│    ├─theme.scss        主题样式
	│    ├─acl               权限管理样式
	│    ├─product           商品管理式
	│    ├─components        公共组件样式
	│    └─.........         其他样式
	│  
	├─views                 应用的视图组件
	│    ├─login             登录页面视图
	│    ├─main              主页面视图
	│    ├─product           商品管理页面视图
	│    ├─acl               权限管理页面视图
	│    └─.........         其他视图
	│  
	├─directive             自定义vue指令
	├─util                  封装Axios实例
	├─App.vue               根组件
	├─main.ts               应用的入口文件
	└─permisstion.ts        路由守卫配置文件

```

![image-20240901113736501](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901113736501.png)

### 预览

#### 一、PC端

##### 1、登入页面

![image-20240901085430303](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901085430303.png)

![image-20240901085453891](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901085453891.png)

##### 2、主页

- 主页大屏

##### 3、权限管理

- 用户管理

![image-20240901091524036](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901091524036.png)

![image-20240901094948005](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901094948005.png)

- 职位管理

![image-20240901091551225](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901091551225.png)

- 菜单管理

![image-20240901091632467](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901091632467.png)

##### 4、商品管理

- 品牌管理

![image-20240901091727679](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901091727679.png)
  <div>
  <img src="https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901100140631.png" alt="image-20240901100140631" style="zoom: 45%;" />
  <img src="https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901100158427.png" alt="image-20240901100158427" style="zoom:50%;" />
  <img src="https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901100935542.png" alt="image-20240901100935542" style="zoom: 23%;" />
  </div>
  
  
- 属性管理

![image-20240901091748535](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901091748535.png)

- SPU管理

![image-20240901091800802](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901091800802.png)

- SKU管理

![image-20240901091828561](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901091828561.png)

- SKU管理

![image-20240901100658454](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901100658454.png)

##### 5、数据大屏

![image-20240901092702113](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901092702113.png)

![image-20240901092713939](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901092713939.png)

##### 6、在线音乐

![image-20240901091950695](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901091950695.png)

![image-20240901092018809](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901092018809.png)

##### 7、自定义主题

- 通过调色盘设置

![image-20240901092847248](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901092847248.png)

- 或者使用预设主题

![image-20240901092928133](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901092928133.png)

![image-20240901092946231](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901092946231.png)

![image-20240901093017093](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901093017093.png)

- 暗黑模式

![image-20240901093149255](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901093149255.png)

#### 二、移动端

### 后端

#### 1、技术栈： Django+MariaDB+uWSGI+Nginx，使用CORS解决跨域。

#### 2、源码：https://gitee.com/xuhaibo_game/djangoProject

#### 3、后端接口和SQL模型截图

##### 接口

![image-20240901112959058](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901112959058.png)

##### 模型

![image-20240901112559633](https://gitee.com/xuhaibo_game/img/raw/master/manage/image-20240901112559633.png)

海波/vue3电商后台管理系统

简介

发行版

贡献者

近期动态

海波/vue3电商后台管理系统 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

海波/vue3电商后台管理系统