文章目录
- 一、快速开始
- 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.js | vue.js | vue-admin-template | 开源项目 |
|---|---|---|---|---|
| 22/11/07 - 22/12/07 | 16.18.0 | 2.6.14 | 4.4.0 | atguigu-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/acl | http://39.98.123.211:8170/swagger-ui.html |
| 后台管理系统 | http://39.98.123.211:8510/dev-api/admin | http://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-- 路由组件