# sports_shop_front

**Repository Path**: kang-zhenbin/sports_shop_front

## Basic Information

- **Project Name**: sports_shop_front
- **Description**: XMUT期末设计-运动商城系统前端
使用技术： VUE全家桶，axios，element、echats
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2022-11-24
- **Last Updated**: 2025-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI, Axios

## README

# sports_shop


> 这是 一个 专卖运动类商品 的商城系统
> 
> （本文侧重于介绍该系统的前端设计，与数据库表设计）


**前端：**
- gitee项目地址：https://gitee.com/kang-zhenbin/sports_shop_front
- 掘金博客地址 [掘金博客: sports_shop](http://juejin.cn/post/7169994154221502494)

**后端：**
- gitee项目地址：https://gitee.com/kang-zhenbin/sports_shop_backend
- 掘金博客地址：[掘金博客: sports_shop_backend](https://juejin.cn/post/7171450221153484837/)

# 如何运行：
## 基础环境要求：

-   安装Node.js   *建议和我的版本一致：v16.15.0*
-   安装vue-cli

**具体环境搭建**：

- nodeJS的安装可以查看我的这篇文章：[NodeJS安装 NodeJS第一行代码 - 掘金 (juejin.cn)](https://juejin.cn/post/7128601942447620104)
- vue-cli可以在nodeJS安装完成后,打开 命令行 执行```npm install-g @vue/cli```
- 关于vue-cli可以阅读我的这篇文章：[Vue全家桶——Vue-CLI2及Vue-CLI3手把手教学 - 掘金 (juejin.cn)](https://juejin.cn/post/7128394247623049223)

## 运行方式
### 1、源码下载

照着图片提示下载，完成后找个地方解压源码
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad507d6df1ce4989bae385753d7bad9e~tplv-k3u1fbpfcp-watermark.image?)

### 2、Project setup

安装完上面要求的环境，切换到 *项目源码* 的 *根目录* ，打开 *命令行* ，并执行下面的这行代码

```
 npm install
```

### 3、以下二选一，即可运行项目

想要预览项目效果，或者进行热编译代码，可以执行以下的命令

```
 npm run serve
```

*也可以执行如下命令，使用图形化界面打开*

```
 vue ui
```
步骤如下

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4574ad306f0a4dc4be32bb4584980e7e~tplv-k3u1fbpfcp-watermark.image?)


### 4、这步可选，用来打包代码

```
 npm run build
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).





## 简介

运动商城系统就是网上销售系统，该系统可供两类用户使用。

其中**用户**主要功能包括：查看所有商品、查看指定商品详细信息、添加商品到购物车、结算购买商品、查看订单···等功能。 如下图：

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7085f91006424d9d95b623361a846563~tplv-k3u1fbpfcp-watermark.image?)

而**管理员**拥有上架和下架商品功能。 管理员的功能无非增删改查，这里忙着复习其他科目期末考，暂时没做。

## 为什么做这个

打算写一个信息管理系统，

思前想后，还是商城系统好做，例子🌰也多：

大到淘宝天猫，小到宿舍楼机智校友卖泡面卖零食的小卖部微信小程序。

仿佛万物皆可电商

当然，为了使项目更加好写，这里简单的参考了一下蜜雪冰城微信小程序，和尚硅谷书城项目。

## 制作流程

我并没有做太多需求分析，思考用例、活动图、流程图、状态图类、数据库·····那些东西。

在项目开始时凭直觉快速开发 一个简单可交互的前端界面原型，

然后在这个原型基础上，根据页面需要的数据反过来思考数据库的设计

~~(图方便，数据库并没有进行范式分解，也没有外键联系)~~

数据库大概设计好后，再来分析每个页面需要的数据，约定好前后端的交互（草稿了一份api接口文档）

之后就是不断调整细节，修改改动，前后端不断相辅相成




# 一些记录（都已过时，不必看）以API接口文档为准

> 2022.11.25记录

-   完成了登录注册界面，和主体内容界面
-   完成了左侧导航栏的路由跳转
-   完成了商品展示页面的功能

**图片展示：**

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd149c0cc8c040b7930bffc814b17148~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9a5eb045c6c4f6bb7512d7e30dd69ad~tplv-k3u1fbpfcp-watermark.image?)

> 2022.11.26记录

-   完善了商品展示页的界面与功能
-   完成了购物车的界面与功能

**图片展示：**

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53b253fd783a4e088e1359be88c8b800~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d09145ec8ae24ad38335b6a63201e5df~tplv-k3u1fbpfcp-watermark.image?)



![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7faff623ac6c48cbb4559f264d3da534~tplv-k3u1fbpfcp-watermark.image?)

> 2022.11.27记录

-   完成了订单页的界面与功能
-   完成了个人中心的界面与功能


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a5978bcd13b41e6b8616c254114abe4~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2561eb75bbbc4b859f27fdc3fa9f8c40~tplv-k3u1fbpfcp-watermark.image?)

> 2022.11.28记录

-   分析了前端界面所需的数据
-   完成了后端数据库的设计，并将MySQL的库与表结构搭建完成

这里我把导出来的sql文件也放在了源码根目录下
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f65527fd2f05479eb6df1f642c4ee14f~tplv-k3u1fbpfcp-watermark.image?)

> 2022.12.14记录

- 因繁忙缘故，文档断更了。
- 今日前后端主要功能都已完成
- 项目几乎被重构了一遍，不仅是后台接口有修改和新加，就连前端界面改了一些功能


![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e265d5a6f57b43af820ca73457a1e470~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4cc5825528b4446bb19dc17290b11f6~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/598116b903f8463488707635495211d4~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52cd6e7c4dc0444490f7163c6b99910b~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2161c3af6ec34677a9cf5407a3ddff5f~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eddd326ad8bc478bae6d981641849afe~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3f8662ecd1a40048227fa61cdd588a2~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49f9ea15dc04406080d755a7ac006272~tplv-k3u1fbpfcp-watermark.image?)


![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca8f33219ca249bcb9d36070585fb4fb~tplv-k3u1fbpfcp-watermark.image?)



## 数据分析

### 前端界面所需数据分析
#### 登录界面：
 ```javascript
  user: {
    username:'admin',
    password:'123456',
    remenber: true // 记住账户功能
  }
 ```


#### 注册界面：
 ```javascript
  user: {
    username:'admin',
    password:'123456'
  }
 ```


#### 商品展示界面：
基本商品展示：

 ```javascript
  goods : [
        {
            goods_picture: require('../assets/mypic/goodsPic.jpg'),
            goods_title:'新宝岛1',
            goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏',
            goods_price:1999,
            goods_id: 1
        },
        {
            goods_picture: require('../assets/mypic/goodsPic.jpg'),
            goods_title:'新宝岛2',
            goods_descrip: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏',
            goods_price:1999,
            goods_id: 2
        }
  ]
  // 思路：直接查询所有商品数据，封装成json 响应给前端
 ```

 商品详情须有 评论数据：
  ```javascript
   comment: [
        {
            goods_id: 1,
            user_id: 1,
            username: 'admin'
            syas: '裹上面包糠，隔壁小孩馋哭了'
        },
   ]
   // 思路：利用goods_id查询相关评论
  ```

#### 购物车界面：
基本的购物车数据
 ```javascript
  shopping_cart : [
        {
            goods_picture: require('../assets/mypic/goodsPic.jpg'),
            goods_title:'新宝岛1',
            goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏',
            goods_price:1999,
            goods_id: 1,
            order_num: 1,// 商品购买总数
            order_pay: 1999,// 此类商品购买花费
            user_id: 1,
            username: 'admin'
        },
        {
            goods_picture: require('../assets/mypic/goodsPic.jpg'),
            goods_title:'新宝岛1',
            goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏',
            goods_price:1999,
            goods_id: 1,
            order_num: 1,// 商品购买总数
            order_pay: 1999,// 此类商品购买花费
            user_id: 1,
            username: 'admin'
        }
  ]
 ```

 还需要有用户数据：
  ```javascript
 user: {
    username:'admin',
    wallet: 99999,
  }
  ```

还有商品总价：
```javascript
  totalpay:1999
  // 从购物车对象数组的order_pay累加获得，用于最后扣钱
```


#### 订单界面：
在购物车结算商品后，一个个购物车数组的对象元素，生成一个个订单数据
```javascript
  orders : [
        {
            order_id: 1,// 订单编号
            goods_picture: require('../assets/mypic/goodsPic.jpg'),
            goods_title:'新宝岛1',
            goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏',
            goods_price:1999,
            goods_id: 1,
            order_num: 1,// 商品购买总数
            order_pay: 1999,// 此类商品购买花费
            user_id: 1,
            username: 'admin'
        },
        {
            order_id: 1,// 订单编号
            goods_picture: require('../assets/mypic/goodsPic.jpg'),
            goods_title:'新宝岛1',
            goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏',
            goods_price:1999,
            goods_id: 1,
            order_num: 1,// 商品购买总数
            order_pay: 1999,// 此类商品购买花费
            user_id: 1,
            username: 'admin'
        }
  ]
```
#### 个人中心界面：
  ```javascript
 user: {
    username:'admin',
    level: 1, // 账户等级
    grade: svip, // 权益
    wallet: 99999,
    state_massage: '这个人很懒，什么都没有留下'
  }
  ```

## 升华前端数据，归纳成表：
这里我其实已经把数据库结构写好了，导出来的sql文件也放在了根目录下
###  user表
  ```javascript
 user: {
    user_id:1,
    username:'admin',
    password:'123456',
    level: 1, // 账户等级
    grade: svip, // 权益
    type: 'root'
    wallet: 99999,
    user_picture: "绝对路径/assets/userimg/goodsPic.jpg"
    state_massage: '这个人很懒，什么都没有留下'
  }
  ```

  ### 商品表
```javascript
  goods : [
        {
          goods_id: 1,
          goods_name:'新宝岛1',
          goods_price:1999,
          goods_picture: '绝对路径/assets/goodsimg/goodsPic.jpg',
          goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏'
        },
        {
          goods_id: 1,
          goods_name:'新宝岛1',
          goods_price:1999,
          goods_picture: '绝对路径/assets/goodsimg/goodsPic.jpg',
          goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏'
        }
  ]
 ```


 商品评论表：
  ```javascript
   comment: [
        {
          says_id: 1, //自动递增
          says_time: '2022-11-28',
          syas: '裹上面包糠，隔壁小孩馋哭了',

          goods_id: 1,

          user_id: 1,
          username: 'admin'
        },
        {
          says_id: 1, //自动递增
          says_time: '2022-11-28',
          syas: '裹上面包糠，隔壁小孩馋哭了',

          goods_id: 1,

          user_id: 1,
          username: 'admin'
        }
   ]
   // 思路：利用goods_id查询相关评论
  ```

购物车表
 ```javascript
  shopping_cart : [
        {
          shopping_cart_id:1, // 自动递增
          shopping_count: 1,// 商品购买总数
          shopping_amount: 1999,// 此类商品购买花费

          goods_id: 1,
          goods_name:'新宝岛1',
          goods_price:1999,
          goods_picture: require('../assets/mypic/goodsPic.jpg'),
          goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏',

          user_id: 1,
          username: 'admin'
        },
        {
          shopping_cart_id:1, // 自动递增
          shopping_count: 1,// 商品购买总数
          shopping_amount: 1999,// 此类商品购买花费

          goods_id: 1,
          goods_name:'新宝岛1',
          goods_price:1999,
          goods_picture: require('../assets/mypic/goodsPic.jpg'),
          goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏',

          user_id: 1,
          username: 'admin'
        }
  ]
 ```

订单表：
```javascript
  orders : [
        {
          order_id: 1,// 订单编号
          order_time: '2022-11-28',
          order_count: 1,// 商品购买总数
          order_amount: 1999,// 此类商品购买花费

          user_id: 1,
          username: 'admin',

          goods_id: 1,
          goods_name:'新宝岛1',
          goods_price:1999,
          goods_picture: require('../assets/mypic/goodsPic.jpg'),
          goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏'
        },
        {
          order_id: 1,// 订单编号
          order_time: '2022-11-28',
          order_count: 1,// 商品购买总数
          order_amount: 1999,// 此类商品购买花费

          user_id: 1,
          username: 'admin',

          goods_id: 1,
          goods_name:'新宝岛1',
          goods_price:1999,
          goods_picture: require('../assets/mypic/goodsPic.jpg'),
          goods_describe: '天玑8100 | 真旗舰芯 | 三星OLED 护眼屏'
        }
  ]
```