SSM+Maven+Mysql+BootStrap+Echarts网上银行交易系统前台系统_bootstrap制作银行网站首页-优快云博客

项目说明：

该项目主要需要实现：

【功能一】浏览器输入http://localhost:8080/进入用户登录页面

【功能二】登录成功，跳转到成功页面。具体如下

【功能三】存款业务，点击导航栏存款跳转到存款页面。输入有效金额，点击确定，返回操作结果。具体如下（图-9）

【功能四】取款业务，点击导航栏取款，跳到取款页面。输入正确有效金额，取款成功后返回取款结果如图-10。

【功能五】点击导航栏转账跳转到转账页面。输入有效账号和有效金额，点击确定，返回操作结果。具体如下

【功能六】账单查询业务，点击导航栏账单查询跳转到账单页面。具体如下

【功能七】账本虚拟消费业务，点击导航栏账虚拟消费跳转到商品消费页面。具体如下

【功能八】收支报表业务，点击导航栏收支报表，会调转到报表页面

【功能九】退出，点击退出，注销session信息，跳转到登录页，如图-19

数据库设计共5张表

项目说明：

本项目考察ssm整合技术+bootstrap前台页面优化+echarts数据图表+常用前端插件+数据交易逻辑+jsp常用标签+mysql，以下截图和推荐实现步骤和方法，除特别要求外，仅供参考。此交易系统由于涉及金额的变动，均需考虑到持久层事务的开启，另需注意账户的默认初始密码为111111，开户后账户初始金额不得低于1元。（没有开发后台，因此建议自行插入不少于三条账户数据，初始金额均设置为1，密码均设置为111111。）

该项目主要需要实现：

【功能一】浏览器输入http://localhost:8080/进入用户登录页面

图-1

图-2

图-3

【功能一】说明：

登录需要对账号和密码做非空校验，账号为数字或者带有字母X,密码为六位数字，校验不通过，点击登录无效。如图-2
登录账号既可以使用银行卡号也可以使用身份证号进行登录。
登录方式必须为异步请求方式，点击登录，当用户名或密码错误时，页面给出提示，如图-3
用户未登录成功状态下，无法访问其他功能页，推荐设计拦截器进行登录校验

【功能二】登录成功，跳转到成功页面。具体如下

图-4

图-5

图-6

图-7

图-8

【功能二】说明：

此页面展示用户个人信息，账户信息，如图-4
除登录页面外，其余页面（包含本页面）均有导航栏，点击对应栏目，会跳转到相应页面
如果使用身份证号登录成功，可能存在多个银行账户，此时会提示需要选择一个银行账户进行后续交易操作，否则无法进行其余操作，会重新调转到登录页面。如图-4，图-5，选择一个银行卡号后，页面会自动重新加载账户信息，如图-6.本功能均需用到异步加载动态数据。
如果使用银行卡号登录，则不存在选择账户操作，直接返回的界面如图-7.
页面均使用了bootstrap的栅格系统，如上图-8。
由于卡状态对应的字段，1:有效/-1:冻结。用户状态对应的字段0：无效/1：有效因此在页面显示的时候，需要进行转义。如图-8

【功能三】存款业务，点击导航栏存款跳转到存款页面。输入有效金额，点击确定，返回操作结果。具体如下（图-9）

图-9

【功能三】说明：

存款金额必须为有效金额，需要是数字类型，禁止输入字符类型，会进行校验，推荐使用正则表达式
存款成功后，会在结果页面显示当前存入金额，和账户余额。同样采用异步提交方式

【功能四】取款业务，点击导航栏取款，跳到取款页面。输入正确有效金额，取款成功后返回取款结果如图-10。

图-10

【功能四】说明：

取款金额必须为有效金额，需要是数字类型，禁止输入字符类型，会进行校验，推荐使用正则表达式
取款操作需要考虑余额是否足够，当余额不足，会返回信息到页面。
取款成功后，同样会在结果页面显示当前取款金额，和账户余额。同样采用异步提交方式

【功能五】点击导航栏转账跳转到转账页面。输入有效账号和有效金额，点击确定，返回操作结果。具体如下

图-11

图-12

【功能五】说明：

转账金额必须为有效金额，需要是数字类型，禁止输入字符类型
转账除了需要考虑转账账户余额是否充足外，还需要考虑对方账户是否异常，如果对方账户不存在，或者对方账户被冻结，此时会返回提示到页面。如图-11，图-12
此业务需要注意转账后，对方账户余额的同步变化。

【功能六】账单查询业务，点击导航栏账单查询跳转到账单页面。具体如下

图-13

【功能六】说明：

账单展示本账户的所有涉及金额的操作记录，有存款，取款，转出，操作金额，余额，时间，对方账号
属于转账操作时，对方账户需要存在，不可为空
此由于操作方式对应的字段在数据库中为数字状态，操作类型：0：存、1：取、2：转入、3：转出。因此在页面显示的时候，需要进行转义。
此功能需要采用分页展示如图-13
实现账单的导出功能，导出为Excel表

【功能七】账本虚拟消费业务，点击导航栏账虚拟消费跳转到商品消费页面。具体如下

图-14

【功能七】说明：

商品消费主要包含消费记录+消费金额+打上标签操作
商品消费同样需要对输入框作校验
商品消费提交后，会从账户扣款，因此需要注意账户余额是否充足，如若不足，会返回页面提示。并且此消费记录会同时记录在总账单以及消费账单中。
打标签分类已在数据库tag表中定义好
消费记录成功，会在页面加载结果信息。

【功能八】收支报表业务，点击导航栏收支报表，会调转到报表页面

图-15

图-16

图-17

图-18

【功能八】说明：

收支报表页面主要分上下两部分，上部分为收支月度统计，选择日期，会自动统计出本月度的收入和支出，以及当前账户的余额。下部分为消费分析的饼状图如图-15，图-16.
消费分析图可以下载，将鼠标悬浮在每个饼状图上，可显示统计的信息，同时可切换成数据视图。如图-17，图-18

【功能九】退出，点击退出，注销session信息，跳转到登录页，如图-19

数据库设计共5张表

表名	account		中文表名称		账户表
序号	字段名称	字段说明	类型	位数	备注
1	aid	账号	varchar	40	主键非空
2	cid	身份证号	varchar	40	非空
3	astate	卡状态	int	11	1:有效/-1:注销
4	apassword	密码	int	11	非空默认值：111111
5	abalance	余额	double	20	默认值：1

表名	detail		中文表名称		明细表
序号	字段名称	字段说明	类型	位数	备注
1	did	主键id	int	11	主键自动增长
2	ddate	日期	datetime	11
3	dmoney	金额	double	11
4	dtype	操作类型	int	11	操作类型：0：存、1：取、2：转入、3：转出
5	d_pre_balance	上次余额	double	11
6	dcount	对方账号	varchar	40
7	daccount	本次操作账号	varchar	40
8	dbalance	余额	double	11

表名	customer		中文表名称		用户表
序号	字段名称	字段说明	类型	位数	备注
1	cid	主键id，身份证号	varchar	11	主键
2	cname	用户名	varchar	11
3	csex	性别	int	11	0：女/1：男
4	ctel	电话	varchar	11
5	caddr	地址	double	11	0：无效/1：有效
6	cstate	状态	varchar	40
7	cdate	录入时间	varchar	40

tag标签表

id自增长

t_type:标签数字类型

type_name:标签名称

表名	consume		中文表名称		消费记录表
序号	字段名称	字段说明	类型	位数	备注
1	id	主键id	int	11	主键，自增长
2	c_content	账本记录	text	11
3	c_price	价格	int	11
4	c_date	消费日期	varchar	11
5	c_accid	消费账号	double	40	外键
6	c_tag_id	消费类别		11	外键