小型超市进销存管理系统开发：优化管理，提升效率与规范化水平
摘要
随着计算机和通信技术的信息系统正在积极发展。在当今的商品经济和社会，随
着产品信息的类型和数量的增加，管理人员越来越难以管理大量的产品信息，如何优化
管理方法成为热议话题。
国外大型超市的进销存管理系统非常完善。无论是前台界面的设计，还是后台管理
系统的构建，都有很多值得借鉴的经验。近年来，由于国内计算机和互联网技术的快速
发展，小型超市的库存管理系统也取得了很大的进步。
小型超市管理系统是对小型超市内商品的购销存进行管理的系统。该系统的开
发可以使小型超市的工作人员减少工作流程，对商品的采购、销售和仓储进行系统的
管理。同时可以减少采购、销售、仓储等部门的劳动强度，方便各部门之间的管理和信
息交流。加快各部门信息化步伐，使管理更加规范。
小型超市管理，由于商品数量庞大，采购、销售和库存管理工作复杂繁重。利
用计算机数据库技术和网络技术实现小型超市的自动采购、销售和库存管理已迫在眉
睫。为了提高工作效率，它带来了一种新的现代化、规范化、标）隹化的管理模式。
关键字：企业资源计划；存货；数据库；面向对象；javaScript
1前言
1-1课题背景
随着计算机和通信技术的信息系统正在积极发展。在当今的商品经济和社会，随
着产品信息的类型和数量的增加，管理人员越来越难以管理大量的产品信息，如何优化
管理方法成为该系统的热议话题。
国外大型超市的进销存储管理系统非常完善。无论是前台界面的设计，还是后台管
理系统的构建，都有很多值得借鉴之处。近年来，由于国内计算机和互联网技术的快速
发展，小型超市的进销存管理系统也取得了很大的进步。
1.2课题研究意义
目前，国内小超市信息技术匮乏，计算机利用率低，日常工作处理量大，因此工
作效率很低，内部沟通不畅等问题，导致仓库无法及时给采购、生产商及管理人员提供
准确的参考数据。
解决物流管理物料统一编码管理、信息流、积压、物料匹配等问题，提高仓库管
理效率，整合商品，整合供应信息做出快速合理的经营决策。
1.3课题章节安排
说明书共分七个章节。第一章详细的分析了课题的研究现状和意义；第二章介绍了
相关技术的可行性、项目的调研及可行性的评价；第三章介绍了系统框架的需求、页面
的设计和数据库的设计；第四章解释了主页的具体细节；第五章解释了详细代码实现之
后的系统；第六部分介绍了系统的每个模块的测试。测试每个模块的功能是否完善，是否
有各种隐藏的漏洞。
1.前言
本章主要介绍了系统设计的背景环境和必要性，分析了系统研究的现实情况及本说
明的大体结构。
2.需求分析
本章对网站的相关技术及其他可行性进行了详细的分析和阐述。
3.系统分析
本章从架构层次构思了系统的功能，简化用户操作的流程，以及系统后台及数据库
结构、逻辑设计到物理数据库表的设计，并对其进行了阐述。
4.界面功能设计
本章对前台的功能模块详细的说明，并介绍了图形界面。
5.系统详细设计与实现
本章对系统的功能模块进行了说明，描述了相关接口的调用。介绍了相关图形界面
和代码。
6.系统测试
本章介绍了对系统部分模块功能的测试，进行了商品的入库出库等基本操作。
2需求分析
2.1系统相关技术分析
本系统使用JavaScript语言开发，使用普遍的MVVM设计模式⑺，既节约了开发的
成本，又降低了后期维护的难度。Web页面使用VUE+Eleentui,使用VScode编辑器,
数据库服务器使用的是ysql,性能优越。
2.2项目调研
近几年，各种行业的管理系统如雨后春笋般发展。超市作为人们日常生活的转站
自然也要跟上时代发展的步伐，所以需要一个现代化的、丰富的手工辅助管理系统。为
了适应时代潮流，使超市管理人员和销售人员从繁重的工作任务解脱出来。
超市进销存管理系统使用了当前较为流行的计算机技术，旨在实现进销存管理的便
捷化，数据化。为人们的生活消费和超市库存提供便捷服务。
2.3平台可行性分析
(1)硬件：PC机(i5cpu,8G内存，6G显卡，1T硬盘)
(2)软件：Window10,JavaScript,nodejs,Mysql,vscodeo
此系统对电脑硬件要求不高，做到了一次开发在哪都能用，因此是非常满足开发与
市场需求的。但因为比较简单，所以说在开发上也是没有问题的。
2.4其他可行性分析
超市库存管理系统，可以运行与浏览器，数据量小，任何数据库都可以满足要求。
在实现过程，可以连接到数据库，并且可以使用SQL语句进行增删查改等操作，所
以功能实现起来并不复杂。我学过数据库、软件工程等相关的课程，语言的基本思想是
大致相同的，掌握JavaScript语言我没有问题。此外，互联网上的信息特别丰富。可以
在网上搜索该系统所需信息。在技术方面，导师可以指导我。给予我技术方面的帮助与
支持。
3系统分析
3.1功能需求
对于超市来说商品信息不可或缺。通过对系统的分析，前台系统主要分为商品分类
模块、商品出库模块、商品入库模块。后台管理系统主要分为商品信息管理系统、进货
管理系统、出库管理系统和库存管理系统。
3.1.1前台系统模块
前台系统主要分为商品分类模块、商品出库模块、商品入库模块。具体描述如下：
(1)商品分类模块：
商品分类模块分为所有模块和新建分类模块。所有分类模块可以查看当前分类
数、分类ID、分类名称和删除分类。新建分类模块可以新建分类，设置分类名称、
货架区域、创建时间、分类性质等。
(2)商品出库模块：
商品出库模块用于处理商品的销售操作，包括商品ID、数量、价格、时间、当
前分类等。
(3)商品入库模块：
商品入库模块分为商品入库模块和查询当前分类模块。商品存储模块包括商品
的ID、名称、数量、价格、存储时间和代码。查询当前分类模块的标识，用于查询
该分类下的所有商品。
3.1.2后台管理系统
后台管理系统主要是对商品的进货、信息、销售、库存进行分类。具体描述如下：
(1)商品进货的管理：
主要分为进货和出货两个模块，用来对进出货的数据进行处理，并实时更新到
Web界面，帮助管理人员把握存量。
(2)商品信息的管理：
商品信息管理系统分为商品类别和信息两个模块，用于归类商品形成商品集合,
规定存货区域等。
(3)商品销售的管理:
商品销售管理系统分为销售信息和退货信息的录入，检索。形成责任到个人的
体系，也可对不守诚信的供货商进行备注，有助于超市人员管理制度的优化，提高
超市所售商品的质量，为客户带去更好的购物体验。
(4)商品库存的管理：
主要是用来查询指定商品的信息，库存，销售额等。
3.2系统结构
前台系统模块是商场系统用户的操作平台。用户使用浏览器操作系统对商品进行
添加、删除、检查和修改；后台系统模块是系统的功能结构，如下图3.1所示：
图3.1系统结构图
3.3数据库的分析与设计
3.3.1数据库的逻辑结构设计
在这个系统的开发使用的数据库系统是ysql。数据库有三个表。商品库存表、
商品分类表以及出库表。该表包含字段名、类型、长度、主键、描述和允许的空值。
1.库存表“entegoods”如下表所示：
表3.1库存表“entegoods”
列名数据类型长度允许空是否主键说明
entegoods_id
int否是进货商品id号
entegoods_nae
varchar255否否进货商品名字
entegoods_tie
varchar255否否进货商品生产日期
entegoods_nu
int否否进货商品序列号
entegoods_code
varchar255否否进货商品编码
sortid
int否否外键码
2.分类表“goods”如下表所示：
表3.2分类表“goods”
表名数据类型长度允许空是否主键说明
goods_idint否是商品id号
goods_naevarchar255否否商品名字
goods_nuint否否商品数量
goods_pricedecial10（小数点否否商品价格
后两位）
goods_tievarchar50否否商品创建时间
goods_codevarchar255否否商品编码
sort_idint否否外键码
3.出库表“outgoods”如下表所示:
表3.3出库表“outgoods”
表名数据类型长度允许空是否主键说明
outgoods_idint否是出库商品id号
outgoods_naevarchar255否否出库商品名字
outgoods_nuint否否出库商品数量
outgoods_pricedecial10否否出库商品价格
outgoods_tievarchar50否否出库商品时间
outgoods_profitdecial10否否出库商品利润
outgoods_codevarchar255否否出库商品编码
sort_idint否是外键码
3.3.2数据库的概要结构设计
(1)商品实体属性图
因为对应的商品信息有很多进货信息、库存信息、销售信息。采购涉及的属性较多,
包括记录采购商品或供应商的商品信息，收货编号、产品编号、产品类型和商品名称。
如下图3.2所示：
图3.2商品实体属性图
(2)商品库存实体属性图
库存反映了存货某一特定商品的数量。项目编号用于标识项目。库存是指仓库
剩余的货物数量。当购买相同的商品时，存货与商品编号相对应的数量发生了变化。
如下图3.3所示：
库存商品信息—
图3.3商品库存实体属性图
(3)已上架商品实体属性图
已上架商品信息是指从库存到柜台销售的商品信息。属性商品编号是商品的唯一标
识。货架上的商品数量是指柜台上销售的商品数量。销售价格是所售商品的价格，存货
是剩余存货图。如下图3.4所示:
图3.4已上架商品实体属性图
(4)新增上架商品实体属性图
新增上架商品信息是指柜台上有库存但尚未售出的商品信息。它包含五个属性:商品
编号、商品名称、商品类型、货架上的商品编号和价格。其，上架数和售价分别代表
新产品在柜台销售的数量和价格。如下图3.5所示：
图3.5新增商品上架实体属性图
4界面功能设计
4.1主窗体界面
此窗体是成功启动后出现的第一个界面。主要形式分为左右机部分。左侧显示各功
能模块，右侧显示各功能的操作界面，主要使用Eleentui库实现。如下图4.1所示:
图4.1主窗体界面
4.2商品分类界面设计
商品分类模块分为所有模块和新分曾类模块。所有分类模块可以查看当前分类数
量、分类ID、分类名称和删除分类。新建分类模块可以创建新的分类，并设置分类名
称货架区域、仓U建时间和分类性质。商品分类一一所有分类界面如下图4.1所示:
I市存理皿
图4.2商品分类-所有分类图
10
商品分类一一新建分类界面如下图4.3所示:
图4.3商品分类--新建分类图
4.3商品出库界面设计
商品出库模块是用来处理商品的销售操作，其包括商品id、数量、价格、时间、和
当前所在的分类。商品出库界面如下图4.4所示:
图4.4商品出库界面图
4.4商品入库界面设计
商品入库模块分为商品入库模块和查询当前分类模块。商品入库模块包括商品的
ID、名称、数量、售价、入库时间和代码代码。查询当前分类模块需要的分类ID,用
于查询分类下的所有商品。商品入库一一商品入库界面如下图4.5所示：
11
超市诳91存理聚筑⑦
S痴盼突
ciwaiM
QMlAJt
MSLAJf
图4.5商品入库--商品入库界面图
商品入库查询分类界面如下图4.6所示：
超市遂第存理畋⑦
88心分安HESSB
OaaaM•Afi・SAf»MUUWQMccxMSM
丁KULMT
ftttAJt
图4.6商品入库--查询分类下商品图
12
5系统详细设计与实现
本系统设计的主要功能分为前台系统和后台机个模块，前台系统主要是对某商品的
入库、出库、价格、分类等进行处理并形成相应的数据表格，系统后台主要根据前台通
过特定的网络接口发送请求，对相应的数据库进行添加和删除，整理数据并返回到前台。
5.1前台设计
在前端页面开发，我使用了流行的Vue+eleent后端前台解决方案，它基于Vue
和eleentuio本项目前端开发属于单页开发，能够适应当前市场主流显示器。
5.1.1系统首页面
本系统的主页设计主要由仙部分组成。下方分为左侧导航栏和右侧功能区。其功能
如下:上层主要使用嵌套的＜divx/div＞标签，使用弹性盒布局来显示系统相关信息。在
左下方，元素界面的导航栏组用来展示此项目的功能。展开时，其子节点是项目的路由
导航。右下角是空的＜divx/div＞标签，用于在单击左侧导航栏时呈现基于路由变化的功
能性视图。如下图5.1所示：
图5.1系统首页面
5.1.2商品分类
商品分类功能是使用EleentUI的表格组件和Vue的V-for指令在一个循环呈现,
每行分类后的删除按钮都可以将其删除。网络请求在vue的生命周期created在面页第
13
一次加载时就请求数据，点击删除时会调用handleClick方法。具体实现方法如下图5.2
所示：
I〃力噌请求
created(){
this.$axios.post(http://localhost:8088/allSort.thenres=
this.data=res.data.data;
ethods:{
handleclickinfor
I//嬲除请求
this.$axios
.posthttp://loca3.host:8088/deleSort,(
sort_id:infor.sort_id,
.then(res)=(
thisSconfir：..此操作将永久删除该分类，是否继续？..提示“，{
confirButtonText:确定,
cancelButtonText:消，
type:warning,
.then(()=
if(res.data.code!=200)(
this.^essage
type:error,
essage:res.data.sg,
IJz«»
)else(
this.^essagei：
type:success,
essage:res.data.sg,
J)J
this.$axios
.post(http://localhost:8088/allSopt)
.then((res:=(
this.data=res.data.data;
console.log(this.data);
.catch(=
this.$essage((
type:info,
essage:..已取消删除”,
图5.2商品数据请求与删除请求代码截图
商品所有分类界面如下图5.3所示：
14
ccn
图5.3商品分类页面图
5.1.3新建分类
新建分类功能是使用EleentUI的表单表单组件获取用户通过Vue的双向绑定输入
的数据。当点击“立即创建”时，会将用户输入的信息进行打包调用SubitFor上
传到服务器，当点击“重置”时，会调用ResetFor方法清除当前用户输入的信息。新
建商品分类界面如下图5.4所示:
imi
・瘩g域
53
・分史皿食*ran
图5.4新建商品分类页面
新建商品页面的代码实现如下图5.5所示:
15
submitFonn(fomNanie{
this.$efsfomName.validate^(valid)=(
if(valid)(
this.$axios
•post「http://localhost:8088/sot,(
sot_name:this.uleFo,
.then((es)=(
alet(es.data.msg);
JJ
}else{
console.logeosubmit!!H);
etunfalse;
S)»
J9
esetFom(fomName)(
this.$efsfomName.esetFields;
J»
图5.5新建商品分类代码截图
5.1.4商品出库
商品出库功能是使用Eleentui的表格表单组件，通过vue的双向绑定取到用户输
入的数据，点击“立即出库”时会调用。ut方法，将商品出库。商品出库界面如下图5.6
所示：
图5.6商品出库页面
商品出库界面实现如图5.7所示:
16
ou±
//consoL.Log(i:hi,s.formLab^LALign)j
this.$axlos