计算机毕业设计 | Vue 构建的小商店管理系统(附源码)

1，绪论

1.1 项目背景

随着社会发展，网上购物已经成为我们日常生活的一部分。但是，至今为止大部分电商平台都是从人们日常生活出发，出售都是一些日常用品比如：食物、服装等等，并未发现一个专注于小商品的电商平台。而我国的电商是以小商品起家，现阶段需要小商品的人们不在少数，而大多时候，人们需要买小商品的时候都需要去特定的商店购买，并且如果路途遥远还需要耗费较长时间。所以开发一个专注于小商品的电商系统来解决人们线下购买商品问题。

1.2 项目意义

通过前期调研、需求分析、数据库设计。系统的设计与实现和测试来构建一个Web端小商品购物的网站，其目的是构建一个小商店管理系统，让用户可以在网上进行购物、商家也可以在网上进行商品的发布，让更多的用户购买自己的小商品。并在存在系统管理员对用户、商品等信息进行统一的管理，维护好小商店管理系统的秩序。

2，系统设计

3，需求分析

• 登录界面：用户通过输入账号id和密码来登入系统
• 商品列表：
  - 商品浏览：在商品列表页面，用户可以通过价格、销量、库存来浏览商品，也可以通过商品分类和搜索功能来浏览商品
  - 购物车：通过点击商品上的加号实现添加购物车的操作，除此之外，用户还可以在购物车页面实现商品的购买或处理
  - 商品结算：在点击购物车页面的结算按钮后，即可开始商品的购买结算
• 商品操作：
  - 商品入库：商品入库分为新商品入库和快捷入库，当然，快捷入口只针对于已有商品
  - 详情信息：可在此查看商品的详情信息和销量情况
• 收银记录：这里记录着系统的所有订单，和其支付方式、金额等等信息
• 消息通知：在设置好商品库存限制数量和保质期距离到期时间后，系统会自动产生提示信息，以方便用户更好的管理商品
• 数据统计：该页面使用饼图，柱状图等统计了系统的每月营业额、本月销售前二十商品、年度销售统计
• 人员管理：管理系统内用户信息
• 待办事项：用户可在此添加代办事项并设置提醒时间，系统会自动提示

4，技术分析

技术	说明	官网
Vue	前端框架	https://vuejs.org/
Vue-router	路由框架	https://router.vuejs.org/
Vuex	全局状态管理框架	https://vuex.vuejs.org/
Element	前端UI框架	https://element.eleme.io
Axios	前端HTTP框架	https://github.com/axios/axios
v-charts	基于Echarts的图表框架	📣 有源码 获取源码
IndexedDB	数据库	https:///docs/Web/API/IndexedDB_AP
iview	UI组件样式	www.iviewui.com/

5，商城页面展示

登录

商品列表

购物车

商品购买

商品操作

商品入库

详情信息

收银记录

消息通知

数据统计

人员管理

代办事项