[附源码]一个项目帮助你学习or复习javaWeb,基于javaWeb的记账本项目

前言

CSDN博友们好啊!本人最近刚学完了javaWeb,于是花了几天的时间做了一个记账本项目来练手,项目因为是自己独立完成的,没有人指导,存在漏洞是必然的,欢迎大家下载源码进行学习和二次改进!(源码在最后,拿走前记得点赞哟!) 接下来是对项目的基本介绍,可以帮助博友们了解本项目的构成和功能的实现方法,也可以帮助你回顾和梳理web知识或者是作为了解本项目的学习导航.

项目基本介绍

项目基于javaWeb,使用的技术包含:bootstrap,ajax,jsp,el,jstl,servlet,filter,session,cookie,文件的下载…几乎包含web中的所有技术!

项目展示与分析

环境

tomcat 9.0.31
jdk 12.0.2

登陆页面分析

记住密码选项:基于持久化特殊cookie(JSESSIONID)和session实现

登陆提交按钮:去数据库查询对应账号,输入错误会给予人性化的提示
可以提前预览主页面,无登陆信息

注册页面分析

必填项: 红星表示为必须填写的注册项

account输入框: ajax异步请求验证用户名是否存在

每一个输入框: 利用正则表达式对输入框进行基本的校验

code验证码校验: 利用kaptcha实现

了解更多: 会展示一个视频(视频放在了WEB-INF下,通过文件下载,以视频的方式呈现出来)

开启笔记本: 自动检验上方所有的必填项,有问题则会给予人性化的提示, 无问题将数据记录在users表中,然后跳转到注册成功的界面

注册成功界面分析

这个嘛,没有优化界面,利用js实现倒计时,然跳转登陆页面,进行登陆,也可以点击直接跳转

预览界面分析

以普通的游客身份进入,进行操作需要登陆(FIlter实现登陆验证),如果未登录就点击相应的功能,会自动跳转到登陆界面并给予人性化的提示,也可以选择自己去登陆(右上角)

登陆后的首页展示分析

进行身份识别,若为管理员,表示管理员身份并展示管理员菜单选项,设有退出登陆选项(去Servlet注销当前用户的信息)

消费总览: 从后台调取数据处理后展示在网页上,该界面所有数据封装在recordsBean中

查看详情: 从数据库获取自己的所有记录并分页展示,数据记录在pageBean中

记一笔页面分析

记一笔功能,通过模态框方式进行数据的记录,类型和金额为必填项

类型部分: 采用级联选框,基于ajax实现(根据选择类型来动态展示第二级选择框的内容)

完成按钮: 先判断必填项是否填写,若填写再判断选择的类型是否为支出,若为支出则通过ajax同步锁(避免ajax延迟返回失败信息,但是仍然提交了表单)去校验用户当前账户的金额是否够,不够则提交失败

详细信息界面分析

展示当前用户的所有记录,基于pageBean分页,从后台调取数据并分页展示

删除: 获取当前行的recordid(记录的唯一标识码)后,去后台进行删除

分页导航: jsp中根据当前页的页号(pageNo)分情况设置begin和end,再用foreach进行页号的初始化,并设有快捷翻页按钮<<和>>

消费分类管理界面分析

需要具备管理员或者是超级管理员的身份才能看到管理员菜单选项并进行操作(用户权限设置是在表的设计的时候就会专门设计一列属性作为用户权限的标识)

从后台获取types表中所有的类型项信息并展示
增加按钮: 利用模态框进行表单的提交
完成按钮: 检验输入框的填写的内容并提交数据(需要附带typeid唯一标识码),录入到数据库

修改按钮: 将当前行的类型项的id记录到设置的hidden输入框中,然后将当前行的类型名填写在模态框的类型名称中.

完成按钮: 进行简单的验证后提交数据servlet获得数据(需要附带typeid唯一标识码)后去数据库修改

删除按钮: 功能同上面的删除按钮同,都是调用的同一个servlet,当需要注意的是,回应的函数不同,一个是用户详细信息的分页,一个是管理员查看全部信息的分页,因此需要添加一个flag标识进行区分

管理用户界面分析

查询所有用户的信息展示在网页上,鉴别管理员的身份(permission不同展示的身份不同),高级的管理员能对低级的管理员和普通用户操作,低级管理员只能对普通用户操作,未加修改用户信息,若需要可以用上面提到的模态框或者是新增页面来实现,原理就是表单提交

设为管理员: 根据获得的userid去修改用户的表中的权限信息

删除: 根据获得的userid去删除对应表中的行

查看所有用户记录界面分析

实现原理和详细界面信息基本一致
不同点: 1.sql不同
2.管理员自身的记录不会被显示出来
3.低级管理员无法查看高级管理员的记录

源码

敲重点啦!!!: 还请博友们给予点赞,收藏,转发或是评论!
内含源码以及我自己做的思维导图帮助博友们学习本项目,学习javaWeb!
链接：https://pan.baidu.com/s/1dMuqqAmFHNNI9gCd9HcriQ.
提取码：avg1

有疑问加博主QQ: 1216770825 欢迎q我交流,学习

保姆级项目部署展示(idea)

因为有些博友不太清楚如何导入并运行,于是我花了一些时间做了一个保姆级别的导入项目并成功运行的演示

导入项目到idea

找到项目的位置,选择项目父目录后点OK

选择Eclipse项目

next

next

next

选择jdk版本后Finish

选择new Window

进去后点开一个代码文件一般会报红,不过不要慌张,一般都是代码所需打的jar包不存在导致的不发识别对应的类,如下图所示:

选择project Structure

选择Libraries并点击加号选择java

找到项目的lib包 选择里面所有的jar包 后点击ok 再点击apply

还差一个jar包: javax.servlet-api
云盘下载
提取码:imwt
导入javax.servlet-api,方式同上

点击Factes

点击+号并选择WEB

选中创建的项目后ok 再apply

修改资源目录


浏览文件

选择WebCoutent ->ok

点击artifacts

选择如下:

ok后apply

配置tomcat

点击加号并选中tomcat-local

命名后选择Deployment

点击加号并选择artifact

点击apply -> ok

启动tomcat,即可

可能build的时候会报错去如下目录的CharSetFilter

删除一个import就行了