艾妮记账本Web开发（开发版）

因为没有办法制作微信小程序版的艾妮记账本所以只能选择做Web开发版，但因为是花时间赶出来到的（但用了我已学的所有Web知识）所以就没有办法按老师的要求写七天的制作过程。

其实真正说起来我的这个Web开发制作时间是有七天之长的前四天都是在网络上观摩别人的网页记账本是怎么设计的，然后自己找感觉，收集图片，修改图片。

后面三天是根据自己的感觉，使用修改好的图片设计网页，然后实现后台的数据连接制作成一个开发版的Web程序。

为什么会说是开发版的是因为我打算将这个记账本小程序打造为大四找工作可以拿的出手的软件之一。

这个开发版记账本使用了HTML设计，css设计，jQuery和JavaScript（一般是用一种就可以了，但是由于现在我学的还不是很好，只能一起结合使用），bootstrap，不过都是比较基础的。

使用MVC模式建立的，即model（模型），view（界面），controller（控制台），简单的说就是Servlet进行页面跳转。

本来想用validate进行表单验证的，但是由于比较赶所以没有用。不过在这个学期的最后一个月我重新打造记账本会添加进去。

现在开始介绍一下我的艾妮记账本

制作这个界面是根据一个巨幕的模型想到的，用来简要介绍艾妮记账本的用处。你可以点击Let's start按钮跳转到主页面，也可以等候几秒自动跳转到主页面。

一下是艾妮记账本的主页面

这个页面的组成部分是由导航栏，轮播图，以及账单显示组合成的。图片是我在网络上自己摘取然后再加工的。

双击简要的账单会显示详细的账单，如果想让其隐藏可再次双击简要账单部分 如图

如果想要修改账单的话可以将鼠标移到账单图片上，这个图标被制作成按钮，这样当鼠标移到图标上就会显示可点击，这样就会比较友善，让用户知道这是可以点击的。

这是修改账单页面  如下图

有没有觉得这个背景很熟悉，没错就是进入淘宝时会显示的一张图片。

这个账单类型的图标会根据你选择的账单类型随之更换，修改后点击保存就可以了，当然你想要删除这个账单的话也可以点击删除。

接下来介绍一下我们的导航栏，导航栏上面的“关于我们”点击后会跳转到我一开始给出的巨幕那个页面。点击记账则会跳转到记录账单的页面 如图

这里设置了“付款金额”，“支付成员”，“记账时间”，都是必填的。并使用JavaScript限制“记账时间”必须是按照年-月-日来输入的。同时图标和账单类型的选择也是对应的。

输入完账单信息后点击提交就会跳转到主页面，同时你还能发现主页面的账单部分添加了你提交的账单。

最后面就是介绍导航栏上的报表部分了，报表部分是我思考了最久的部分差不多想了两天，因为我对iterator这个迭代器还不是很熟悉。通过这两天的查找终于弄懂了iterator这个迭代器的用法，iterator.next()必须跟iterator.hasnext()一起使用，并且写了tally tal = iterator.next();就不能再写tal = iterator.next();这个报表分日期的思想是这样的首先定义两个全局变量，一个是tally类变量用于显示数据，一个是Boolean值用来辅助判断。然后建立一个if语句判断数据库中是否有数据，如果有就先读取一次并设置一个Boolean值 a=flase；设置一个循环循环条件是a的值为ture或者iterator.hasnext()为ture。在里面为创建一个String值接收时间再设置一个循环，只要接收的时间等于下一条数据的时间以及后下一条将显示简要的账单数据并设置a为tur值e。如果不相等则退出循环并设置a为flase；显示下一个日期的总帐单。这样就可以创建一个数据库让其按时间分类  效果如图所示

为报表页面设置了一个“返回首页”的超链接，这样增加了软件的可用性；