技术栈
前端:vue
后端:spring boot
总体设计
功能分析
企业基本信息
就是将自己企业的一些信息展示出来,然后涉及修改的操作,可以修改企业的一些基本信息。然后我将用户人数,管理员人数,商品种类数,和商品数量为0的种类数展示出来了。
商品基本信息
对于管理员就是用表单将自己仓库的商品展示出来,然后可以对商品进行查询,完成根据不同类别或关键词进行组合查询,然后入库和出库就是对商品的添加、删除、修改等操作,修改商品的数量可以看成一种入库出库已存在的商品,添加就是入库以前没有的商品,删除就是这个商品已经出库完了的一种象征,对于用户的商品管理,就是查询商品这里也完成了根据不同类别或关键词进行组合查询,然后购买也就是减少商品的数量,商品数量要是不足,提示库存不足。
用户的基本信息
对于管理员就是很多用户形成的一个表单,里面的功能有添加、删除、修改和查询用户,其中查询完成了根据不同类别或关键词进行组合查询,然后对于用户就是显示自己的基本信息,可以更改自己的基本信息,但是其中的身份也就是权限是自己改不了的需要管理员才有修改的权限,用户还可以注销自己的账户,也就是删除的操作。
入库管理模块
我将其分化为各个模块中的添加和修改的操作,就比如用户基本信息中的添加用户和修改用户信息以及商品中的添加商品和修改商品信息还有商品分类中添加和修改商品分类。
出库管理模块
我将其分化为各个模块中的删除和修改的操作,就比如用户基本信息中的删除用户和修改用户信息以及商品中的删除商品和修改商品信息还有商品分类中删除和修改商品分类,当删除一个商品分类,这个分类下的商品也会删除。
查询模块
各个模块都完成了根据不同类别或关键词进行组合查询。
拓展
我在数据库用户表单中设计了一个标志位,然后根据标志位设计两种不同的用户权限,一种是管理员一种是用户,不同用户登录后操作功能有所区别。
详细设计
1、登录功能
(1)界面设计:我是选择了elementUI中的一个组件修改了一下,然后设计一下背景图片,修改了这个组件的透明度边框椭圆以及改了一下颜色,这个组件有一个判断输入是否为空的然后给出提示的功能。
(2)登录功能:先输入用户名和密码,然后使用axios发送请求,将用户名和密码传给后端,后端使用的是根据用户名查询,如果存在,传回用户名的全部信息,不 存在传回null,如果传回来的是空或者密码不一致则出现一个弹框提示用户名或密码错误,然后再根据我在数据库中设计的标志为来判断是管理员还是用户,由此根据不同的角色来授予不同的权限,进入不同的界面。
2、注册功能
(1)界面设计:这里和登录功能的差不多。
(2)注册功能:先输入用户名和密码,然后再次输入密码,两次密码不一致会用提示,然后正确之后使用axios发送请求,将用户名后端,后端使用的是根据用户名查询,如果存在,传回该用户名已存在,不存在传回null,如果传回来的是空则再发送一个添加该用户的请求,如果不是空则出现一个弹框该用户已存在。
3、用户功能
(1)用户的基本信息:这里的用户基本信息是使用elementUI中的一个表单组件来显示的,可以进行修改的操作,但是修改不能修改身份,也就是不能变更为管理员,点击修改会出现一个弹窗,弹窗会显示用户已经存在的一些基本信息。用户的基本信息的查询,是将用户的用户传回去查询后返回的值,而用户的id是在登陆的时候就用localStorage.setItem('shareData', formName.id)来记录,然后在用户的界面用const value = localStorage.getItem('shareData');来获取的,这样就完成了不同界面的信息传递。
(2)用户购买功能: 用户点击商品,会发送请求给后端,然后将返回的数据以表单的形式显示出来,然后可以根据商品的分类,商品名或者是两个组合查询,然后可以点击想要购买的商品进行购买,会出现一个弹框,是一个选择数量的弹窗,如果你选择的数量超过库存就会显示库存不足,如果你购买完这个商品就不会再显示出来了
4、管理员功能
(1)整体结构:将整个页面分为头部、侧边栏和主要展示区域,然后侧边栏点击以后,就是进行路由跳转,跳转到相应的页面中去,点击退出就可以返回登录界面。主要展示部分的设计了一个背景图片。
(2)企业的基本信息:将企业的基本信息展示出来,使用的是element-ui的一个表单组件,然后像后端请求数据,然后将数据展示出来,我还展示了管理员人数,用户人数,商品种类数以及商品数量为零的种类数,都是去数据库进行一个查询操作,返回到达要求的数目。
(3)管理员的商品管理功能:将商品的基本信息以表单的形式展示出来,是element-ui的一个组件,数据是从后端查询返回的,商品的基本信息可以分类查询,也可以搜索商品名查询,也可以两个组合查询,还有对商品的添加、修改以及删除的操作,点击添加商品会显示一个表单填写商品的基本信息,然后添加就会把这些基本信息传给后端,后端就会增加这个商品进入数据库,修改商品也会但是一个表单,这个表单会显示商品的基本信息,你可以修改商品的基本信息,然后点击确认,然后就利用axios传送数据给后端修改数据库,删除你可以进行单个商品的删除,也可以批量删除商品,在前面的选择框点击然后点击批量删除,就会进行批量删除,然后将商品的goodsno传回后端然后将这些数据删除。
(4)管理员的用户管理功能:将用户的基本信息以表单的形式展示出来,是element-ui的一个组件,数据是从后端查询返回的,用户的基本信息可以分类查询,也可以搜索用户名查询,也可以两个组合查询,还有对用户的添加、修改以及删除的操作,点击添加用户会显示一个表单填写用户的基本信息,然后添加就会把这些基本信息传给后端,后端就会增加这个商品进入数据库,修改商品也会但是一个表单,这个表单会显示用户的基本信息,你可以修改用户的基本信息,然后点击确认,然后就利用axios传送数据给后端修改数据库,删除你可以进行单个用户的删除,也可以批量删除用户,在前面的选择框点击然后点击批量删除,就会进行批量删除,然后将用户的goodsno传回后端然后将这些数据删除。
(5)管理员的商品分类管理功能:将商品的分类信息以表单的形式展示出来,是element-ui的一个组件,数据是从后端查询返回的,商品的分类信息可以搜索商品分类名查询,还可以对商品分类的进行添加、修改以及删除的操作,点击添加商品分类会显示一个表单填写商品的分类名,然后确认就会将商品分类名传回后端加入数据库中,修改商品分类也会但是一个表单,这个表单会显示商品的分类名,你可以修改商品分类名,然后点击确认,然后就利用axios传送数据给后端修改数据库,删除你可以进行商品分类的删除,点击删除以后就会删除这个分类的所有商品以及这个商品分类,
下载地址
gitee:warehouse: 仓库管理平台 (gitee.com)