预览网址: http://117.50.96.227/cashbook2/
1、作品展示
1、登陆页面
2、注册页面
点击登陆页面下方的蓝色小字即可进入注册页面
加入了判断,如果账号已注册,会提示账号已注册
3、登陆后主页面
- 金额:为要记账的金额。
- 账目类型:可选择 支出 或 收入 。
- 记账日期:当点击时默认选择当日的日期,可以自行更改。
- 备注:可以为该账目添加备注信息。
4、“我”导航页
1、我的信息
显示当前登陆的人的账号密码姓名信息。
2、修改密码
可以修改登陆密码。
3、月账单查询
可以根据月份查询账单信息。
- 当点击记账日期时默认选择当前月份,可以根据需要自行更改。
- 首先显示一个总账单,列出总收入和总支出,已经该月的收支总和。
- 其他的账目会根据记账顺序列出来。
2、开发笔记
1、框架的选择
首先在网上搜了很多的框架,移动端的优秀前端框架很多,但是大部分都是基于Vue.js来实现的,由于我还未学习Vue,所以就没有选择那些火热的框架,最终选择了一款多年前的框架—SUI Mobile。由于对前端框架不是很熟悉,所以使用起来还是有些不方便,也踩了不少坑,而去网上搜索解决问题时发现能找到的答案很少,由此看来选择一个热门的框架很重要,虽然技术不分好赖,但是使用人数多的技术生态好,解决问题很方便。下面是SUI的一些介绍:
- SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。
- 轻量的UI库:SUI Mobile 非常轻量,核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K,却提供了20+个常用的组件。对于只有HTML&CSS的组件,你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件,并且提供了 Zepto/jQuery 风格的API,你将会非常熟悉这种方式。
- 酷炫的IOS风格:我们的组件都是按照iOS风格设计的,所有有很多组件都是iOS独有的炫酷设计。
SUI是 阿里巴巴共享业务事业部UED团队 维护的,所以我也是相信他的强大并选择了这个框架。
2、页面代码
1、登陆页面
1 | <%@ page language="java" contentType="text/html; charset=UTF-8" |
2、注册页面
1 | <%@ page language="java" contentType="text/html; charset=UTF-8" |
3、记账页面
1 | <%@ page language="java" contentType="text/html; charset=UTF-8" |
4、“我” 页面
1 | <%@ page language="java" contentType="text/html; charset=UTF-8" |
5、我的信息页面
1 | <%@ page language="java" contentType="text/html; charset=UTF-8" |
6、修改密码页面
1 | <%@ page language="java" contentType="text/html; charset=UTF-8" |
7、月账单查询页面
1 | <%@ page language="java" contentType="text/html; charset=UTF-8" |
3、servlet代码
1、记账servlet
1 | package com.cashbook.web; |
2、修改密码servlet
1 | package com.cashbook.web; |
3、月账单查询servlet
1 | package com.cashbook.web; |
4、登陆servlet
1 | package com.cashbook.web; |
5、退出登陆servlet
1 | package com.cashbook.web; |
6、注册servlet
1 | package com.cashbook.web; |
7、展示用户信息界面servlet
1 | package com.cashbook.web; |
4、dao层代码
1、账目记录操作的dao
1 | package com.cashbook.dao; |
2、用户操作的dao
1 | package com.cashbook.dao; |
3、总结
- 框架的选择比较重要。
- 长时间没写web以致开发过程中有些小问题都看不出来,果然还是要每天都学习。
- 开发难度并不大,处理好业务逻辑很重要,而我需要这方面的大量练习。