超市账单管理系统

3 系统详细设计

3.1 数据表结构设计

根据本项目的实际需求以及应用规模，我们只需要建立一个数据库，在该数据库中建立三个数据表。

(1) 用户信息表consumer

(2) 商品信息表product

(3) 供应商信息表provider

对这3个数据表的字段名称、数据类型及属性具体说明如表3-1至表3-3所示：

表3-1用户信息表(consumer)

字段名（中文）字段名（英文）数据类型长度是否为空用户编号C_ID Varchar2 20 No

用户名称USERNAME Varchar2 20 No

用户密码PASSWORD Varchar2 20 No

用户年龄C_AGE Number 20 No

用户性别C_SEX Varchar2 20 No

用户电话C_PHONE Varchar2 20 No

用户地址C_ADDRESS Varchar2 20 No

用户权限C_AUTHORITY Number 20 No

表3-2商品信息表(product)

字段名（中文）字段名（英文）数据类型长度是否为空商品编号PD_ID Varchar2 20 No

商品名称PD_NAME Varchar2 20 No

商品数量PD_NUMBER Number 20 No

商品金额AMOUNT Number 20 No

商品描述PD_DESCRIPTION Varchar2 100 No

是否付款PAYMENT Varchar2 20 No

创建时间CREATETIME DATE No

表3-3供应商信息表(provider )

字段名（中文） 字段名（英文）

数据类型 长度 是否为空 供应商编号 PV_ID Varchar2 20 No 供应商名称 PV_NAME Varchar2 20 No 联系人 LINKMAN Varchar2 20 No 供应商号码 PV_PHONE Varchar2 20 No 供应商描述 PV_DESCRIPTION Varchar2 100 No 供应商地址

PV_ADDRESS

Varchar2

50

No

3.2主页面设计

本系统的所有界面 采用Internet 的设计方式，借鉴于网页的设计方法，本系统的界面 设计成如图3-1所示：

图3-1 界面布局图

主界面包含三个主要区域，Part1为标题区，只显示系统标题；Part2为导航条区，显示全部的功能菜单；Part3为操作区域也是最大的区域，全部的数据录入，数据显示均在这里进行。当点击Part2菜单中的按钮时，Part3中将显示不同的内容。此功能通过iframe 框架来实现，在三个区域包含不同的子页面。

3.3 系统个子模块详细设计

本系统共有四个模块，分别为登录模块，用户管理模块，账单管理模块和供应商管理模块。下面将分别对四个模块进行详细的介绍。 3.3.1登录模块

用户打开登录页面，在页面输入自己的用户名及密码，并且输入验证码，才能点击登录按钮，在提交表单之前，会在客户端对提交的表单进行非空验证，并会在下方

Part1 系统标题

Part2 导航

Part 3 内容显示操作区

显示出相应的提示。前端验证通过后，系统会从数据库查询输入的用户名和对应的密码，当用户名存在并且密码正确时，登录成功，进入首页。否则返回登陆页面，并显示“用户名或密码错误”的信息，用户需重新登录。登陆界面如图3-2所示：

图3-2系统登录页面

主要代码见附录：系统登录主代码。

当用户成功登陆后，页面上方会显示蓝色的登录用户的名称，并且会根据用户的权限显示相应的导航菜单，便于不同用户进行不同的操作。管理员和普通用户登录成功进入的首页，如图3-3和3-4所示：

图3-3 管理员登陆界面

图3-4 普通用户登陆界面

3.3.2用户管理模块

点击左边导航栏中的“用户管理”，会进入用户管理界面。用户可以在此界面根

据需求对数据进行增、删、改、查等相关操作。如图3-5所示：

图3-5 用户管理界面

在这个界面中，用户可以通过在搜索框输入用户名，查找到所有符合条件的结果，

如图3-6所示：

图3-6 查找用户界面

主要代码见附录：查找用户主代码。

用户也可以在用户界面点击“添加数据”按钮来进行数据的添加功能。并且在添加的时候，会对特定项进行非空验证，并且会有相应的提示。添加成功后，会更新数据库列表并进入用户首页。如图3-7所示：

图3-7 添加用户

主要代码见附录：添加用户主代码。

在用户管理首页，点击用户名称会跳转到用户详情页面，可以查看用户更加详细的信息。如图3-8所示：

图3-8用户详情

主要代码见附录：查看用户详情主代码。

在用户详情页面中，用户可以根据需求修改用户的信息，也可以删除此用户。修改信息会对所填表单进行非空判断，点击“提交”按钮时，会更新数据库并显示到页面。如图3-9所示：

图3-9 修改用户信息

主要代码见附录：修改用户主代码。

3.3.3账单管理模块

点击左边导航栏中的“账单管理”，会进入账单管理界面。用户可以在此界面根据不同需求对数据进行增、删、改、查等相关操作。如图3-10所示：

图3-10 账单管理界面

在这个界面，用户可以通过搜索框输入商品名称，查找到符合条件的结果，如图3-11所示：

图3-11 查找账单界面

主要代码见附录：查找账单主代码。

用户也可以在账单界面点击“添加数据”按钮来进行数据的添加功能。并且在添加的时候，会对特定项进行非空验证，并且会有相应的提示。添加成功后，会更新数据库列表并返回账单首页。如图3-12所示：

图3-12 添加账单

主要代码见附录：添加账单主代码。

在账单管理首页，点击商品名称会跳转到账单详情页面，可以查看账单更加详细的信息。如图3-13所示：