项目简介
项目说明
该管理系统整体采用前后端分离的开发模式,其中前端项目是基于 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
运行程序
- 安装依赖
# npm
npm install
- 运行程序
# 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 # 组合式函数