☰
基于 Vue.js 实现的 SPA 尚品汇在线电商前后台项目
2026/10/10 1:15:15 网站建设 项目流程
Spring-_-Bear 的 CSDN 博客导航

文章目录

  • 一、快速开始
    • 1.1 前台应用系统
    • 1.2 后台管理系统
  • 二、项目介绍
  • 三、接口文档
  • 四、功能架构
  • 五、系统路由
    • 5.1 前台应用系统
    • 5.2 后台管理系统
  • 六、技术选型
  • 七、工程结构
  • 八、效果展示
    • 8.1 前台应用系统
      • 8.1.1 首页
      • 8.1.2 商品搜索
      • 8.1.3 商品详情
      • 8.1.4 购物车
      • 8.1.5 登录注册
      • 8.1.6 订单交易
      • 8.1.7 订单支付
      • 8.1.8 我的订单
    • 8.2 后台管理系统
      • 8.2.1 登录
      • 8.2.2 首页
      • 8.2.3 平台属性
      • 8.2.4 品牌管理
      • 8.2.5 SPU 管理
      • 8.2.6 SKU 管理
开发时间node.jsvue.jsvue-admin-template开源项目
22/11/07 - 22/12/0716.18.02.6.144.4.0atguigu-store

一、快速开始

1.1 前台应用系统

  1. 克隆仓库:使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机来获取源代码。
  2. 打开工程:使用 WebStorm 开发工具打开 store-frontend 前台应用系统模块。
  3. 安装依赖:在控制台使用 npm install 命令安装项目所需依赖。
  4. 启动项目:使用 npm run serve 命令运行项目,运行成功后访问 http://localhost:8080。

1.2 后台管理系统

  1. 克隆仓库:使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机来获取源代码。
  2. 打开工程:使用 WebStorm 开发工具打开 store-backend 后台管理系统模块。
  3. 安装依赖:在控制台使用 npm install 命令安装项目所需依赖。
  4. 启动项目:使用 npm run dev 命令运行项目,运行成功后将自动打开登录首页或访问 http://localhost:9528 进行登录。

二、项目介绍

基于 Vue.js 实现的 SPA 尚品汇在线电商项目,包含前台应用系统和后台管理系统两大部分,涵盖首页、购物车、订单支付和数据管理等众多子模块。

此项目为尚品汇在线电商应用,前后端分离开发。前端项目包括前台应用系统及后台管理系统两大部分。前台项目基于 Vue 和前端三件套,后台项目基于 vue-admin-template 和 element-ui 组件库。

采用模块化、组件化、工程化的模式开发,基于最新最热的前端技术如 Vue 全家桶、ES6、Webpack、Axios 等,包括首页、商品搜索列表、商品详情、购物车、订单、支付、用户登录与注册等多个子模块,功能齐全。

三、接口文档

系统基础请求路径文档地址
前台应用系统http://gmall-h5-api.atguigu.cn尚品汇前台API接口文档.doc
后台权限管理http://39.98.123.211:8170/dev-api/admin/aclhttp://39.98.123.211:8170/swagger-ui.html
后台管理系统http://39.98.123.211:8510/dev-api/adminhttp://39.98.123.211:8510/swagger-ui.html

四、功能架构

五、系统路由

5.1 前台应用系统

5.2 后台管理系统

六、技术选型

七、工程结构

src ├── api-- api 网络接口├── assets-- 静态图片资源文件├── components-- 通用组件封装├── mock-- 模拟数据├── icons-- svg 矢量图片文件├── router-- vue-router 路由配置├── store-- vuex 的状态管理├── styles-- 全局 css 样式├── utils-- 工具函数└── views-- 路由组件

八、效果展示

8.1 前台应用系统

8.1.1 首页

8.1.2 商品搜索

8.1.3 商品详情

8.1.4 购物车

8.1.5 登录注册

8.1.6 订单交易

8.1.7 订单支付

8.1.8 我的订单

8.2 后台管理系统

8.2.1 登录

8.2.2 首页

8.2.3 平台属性

8.2.4 品牌管理

8.2.5 SPU 管理

8.2.6 SKU 管理

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询