sports_shop
这是 一个 专卖运动类商品 的商城系统
（本文侧重于介绍该系统的前端设计，与数据库表设计）
- gitee项目地址：gitee.com/kang-zhenbi…
- 掘金博客地址 掘金博客: sports_shop
如何运行：
基础环境要求：
- 安装Node.js 建议和我的版本一致：v16.15.0
- 安装vue-cli
具体环境搭建：
- nodeJS的安装可以查看我的这篇文章：NodeJS安装 NodeJS第一行代码 - 掘金 (juejin.cn)
- vue-cli可以在nodeJS安装完成后,打开 命令行 执行
npm install-g @vue/cli - 关于vue-cli可以阅读我的这篇文章：Vue全家桶——Vue-CLI2及Vue-CLI3手把手教学 - 掘金 (juejin.cn)
运行方式
1、源码下载
照着图片提示下载，完成后找个地方解压源码
2、Project setup
安装完上面要求的环境，切换到 项目源码 的 根目录 ，打开 命令行 ，并执行下面的这行代码
npm install
3、以下二选一，即可运行项目
想要预览项目效果，或者进行热编译代码，可以执行以下的命令
npm run serve
也可以执行如下命令，使用图形化界面打开
vue ui
步骤如下
4、这步可选，用来打包代码
npm run build
Customize configuration
简介
运动商城系统就是网上销售系统，该系统可供两类用户使用。
其中用户主要功能包括：查看所有商品、查看指定商品详细信息、添加商品到购物车、结算购买商品、查看订单···等功能。 如下图：
而管理员拥有上架和下架商品功能。 管理员的功能无非增删改查，这里忙着复习其他科目期末考，暂时没做。
为什么做这个
打算写一个信息管理系统，
思前想后，还是商城系统好做，例子🌰也多：
大到淘宝天猫，小到宿舍楼机智校友卖泡面卖零食的小卖部微信小程序。
仿佛万物皆可电商
当然，为了使项目更加好写，这里简单的参考了一下蜜雪冰城微信小程序，和尚硅谷书城项目。
制作流程
我并没有做太多需求分析，思考用例、活动图、流程图、状态图类、数据库·····那些东西。
在项目开始时凭直觉快速开发 一个简单可交互的前端界面原型，
然后在这个原型基础上，根据页面需要的数据反过来思考数据库的设计
(图方便，数据库并没有进行范式分解，也没有外键联系)
数据库大概设计好后，再来分析每个页面需要的数据，约定好前后端的交互（草稿了一份api接口文档）
之后就是不断调整细节，修改改动，前后端不断相辅相成
一些记录（都已过时，不必看）以API接口文档为准
2022.11.25记录
- 完成了登录注册界面，和主体内容界面
- 完成了左侧导航栏的路由跳转
- 完成了商品展示页面的功能
图片展示：
2022.11.26记录
- 完善了商品展示页的界面与功能
- 完成了购物车的界面与功能
图片展示：
2022.11.27记录
- 完成了订单页的界面与功能
- 完成了个人中心的界面与功能
2022.11.28记录
- 分析了前端界面所需的数据
- 完成了后端数据库的设计，并将MySQL的库与表结构搭建完成
这里我把导出来的sql文件也放在了源码根目录下
2022.12.14记录
- 因繁忙缘故，文档断更了。
- 今日前后端主要功能都已完成
- 项目几乎被重构了一遍，不仅是后台接口有修改和新加，就连前端界面改了一些功能
数据分析
前端界面所需数据分析
登录界面：
user: {
username:'admin',
password:'123456',
remenber: true // 记住账户功能
}
注册界面：
user: {
username:'admin',
password:'123456'
}
商品展示界面：
基本商品展示：
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 响应给前端
商品详情须有 评论数据：
comment: [
{
goods_id: 1,
user_id: 1,
username: 'admin'
syas: '裹上面包糠，隔壁小孩馋哭了'
},
]
// 思路：利用goods_id查询相关评论
购物车界面：
基本的购物车数据
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'
}
]
还需要有用户数据：
user: {
username:'admin',
wallet: 99999,
}
还有商品总价：
totalpay:1999
// 从购物车对象数组的order_pay累加获得，用于最后扣钱
订单界面：
在购物车结算商品后，一个个购物车数组的对象元素，生成一个个订单数据
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'
}
]
个人中心界面：
user: {
username:'admin',
level: 1, // 账户等级
grade: svip, // 权益
wallet: 99999,
state_massage: '这个人很懒，什么都没有留下'
}
升华前端数据，归纳成表：
这里我其实已经把数据库结构写好了，导出来的sql文件也放在了根目录下
user表
user: {
user_id:1,
username:'admin',
password:'123456',
level: 1, // 账户等级
grade: svip, // 权益
type: 'root'
wallet: 99999,
user_picture: "绝对路径/assets/userimg/goodsPic.jpg"
state_massage: '这个人很懒，什么都没有留下'
}
商品表
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 护眼屏'
}
]
商品评论表：
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查询相关评论
购物车表
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'
}
]
订单表：
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 护眼屏'
}
]
