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