超市账单管理系统.docVIP

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所示:

Part1

Part1系统标题

Part3

Part3

内容显示操作区

Part2

导航

图3—1界面布局图

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

3。3系统个子模块详细设计

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

3.3.1登录模块

用户打开登录页面，在页面输入自己的用户名及密码，并且输入验证码，才能点击登录按钮,在提交表单之前,会在客户端对提交的表单进行非空验证,并会在下方显示出相应的提示。前端验证通过后，系统会从数据库查询输入的用户名和对应的密码，当用户名存在并且密码正确时，登录成功，进入首页。否则返回登陆页面，并显示“用户名或密码错误的信息，用户需重新登录。登陆界面如图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用户详情

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

在用户详情页面中,用户可以根据需求修改用户的信息，也可以删除此用户。修改信息