家庭记账本小程序之框架设计（java web基础版一）
更新于2020.3.29，博主对于JavaWeb有了一定的开发经验，对本家庭记账本程序重构，该教程仅适用于javaweb入门教程，因为要使代码尽量通俗易懂，故会存在bug和不规范的情况。
该网站已部署到服务器，可供体验具体功能：点击体验
网站源码在第2页
1.家庭记账本主页
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>家庭记账本主页</title>
<!-- 采用绝对路径导入css文件 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
<!-- 采用绝对路径导入jquery文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//验证非空，并提交查询请求
$("#submit").click(function () {
//验证输入框是否为空
var keyword = $("#keyword").val();
if(keyword ==""){
alert("请输入关键字");
return false;
}else {
//javascript语言提供了一个location地址栏对象
//它有一个属性href,可以获取浏览器中地址栏地址
location.href="${pageContext.request.contextPath }/manager/homeCostServlet?action=query&keyword="+keyword;
} }); });
</script>
</head>
<body>
<div id="header">
<span class="wel_word">家庭记账本</span>
<div>
<a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=list">往期消费记录</a>
<a href="${pageContext.request.contextPath }/cost_edit.jsp">新增消费记录</a>
<input style="margin-left:20px"id="keyword" name="keyword" type="text" placeholder="请输入关键字"value=""/>
<input id="submit"type="submit" value="查询"/>
</div>
</div> <div id="main">
<h1>欢迎进入家庭记账本系统</h1>
</div> </html>
index.jsp
2.管理消费记录页面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消费记录管理</title>
<!-- 采用绝对路径导入css文件 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
<!-- 采用绝对路径导入jquery文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.2.js"></script>
<script type="text/javascript"> $(function () {
//提示用户添加失败，删除失败，修改失败
if(!${empty requestScope.msg}){
alert("${requestScope.msg}");
}
//验证非空，并提交查询请求
$("#submit").click(function () {
//验证输入框是否为空
var keyword = $("#keyword").val();
if(keyword ==""){
alert("请输入关键字");
return false;
}else {
//javascript语言提供了一个location地址栏对象
//它有一个属性href,可以获取浏览器中地址栏地址
location.href="${pageContext.request.contextPath }/manager/homeCostServlet?action=query&keyword="+keyword;
} }); //删除提示
$("a.deleteClass").click(function () {
//在事件fuction函数中有一个this对象，即当前响应事件的dom对象 /**
* confirm是确认提示框函数
* 参数是提示内容
* 两个按钮：确认和取消
* 返回true表示点击确认
*/
return confirm("你确定要删除【"+ $(this).parent().parent().find("td:first").text()+"】?");
}); });
</script>
</head>
<body>
<div id="header">
<span class="wel_word">家庭记账本</span>
<div>
<a href="${pageContext.request.contextPath }/cost_edit.jsp">新增消费记录</a>
<input style="margin-left:20px"id="keyword" name="keyword" type="text" placeholder="请输入关键字"value=""/>
<input id="submit"type="submit" value="查询"/>
</div>
</div>
<div id="main">
<table style="margin-top:30px">
<tr>
<td class="costname" style="width:200px">消费名称</td>
<td>消费金额</td>
<td>累计消费</td>
<td style="width:200px">登记日期</td>
<td colspan="2">操作</td>
</tr>
<!-- 使用el表达式注意在jsp页面(如本页面第一行)导入相应的包 -->
<c:forEach items="${requestScope.homeCost}" var="item">
<tr>
<td>${item.name}</td>
<td>${item.money}</td>
<td>${item.sum}</td>
<td>${item.date}</td>
<td><a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=getHomeCostById&id=${item.id}">修改</a></td>
<td><a class="deleteClass" href="${pageContext.request.contextPath }/manager/homeCostServlet?action=delete&id=${item.id}">删除</a></td>
</tr>
</c:forEach>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"><a href="${pageContext.request.contextPath }/cost_edit.jsp">新增</a></td>
</tr>
<tr>
<td colspan="5" >共有${requestScope.homeCost.size()}笔消费记录</td>
<td></td>
</tr>
</table> </div>
</body>
</html>
manager.jsp
3.编辑消费记录页面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑消费记录</title>
<!-- 采用绝对路径导入css文件 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
<!-- 采用绝对路径导入jquery文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//提示用户添加失败，删除失败，修改失败
if(!${ empty requestScope.msg }){
alert("${requestScope.msg}");
}
//验证非空，并提交查询请求
$("#submit").click(function () {
//验证输入框是否为空
var keyword = $("#keyword").val();
if(keyword ==""){
alert("请输入关键字");
return false;
}else {
//javascript语言提供了一个location地址栏对象
//它有一个属性href,可以获取浏览器中地址栏地址
location.href="${pageContext.request.contextPath }/manager/homeCostServlet?action=query&keyword="+keyword;
}
});
//验证输入框非空
$("#tablesubmit").click(function(){
//验证输入框是否为空
var costname = $("#costname").val();
var money = $("#money").val();
if(costname == null || costname ==""){
alert("消费名称不能为空");
$("#costname").focus();
return false;
}
if(money == null || money ==""){
alert("消费金额不能为空");
$("#money").focus();
return false;
}
}); });
</script>
</head>
<body>
<div id="header">
<span class="wel_word">编辑消费记录</span>
<div>
<a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=list">返回历史记录</a>
<input style="margin-left:20px"id="keyword" name="keyword" type="text" placeholder="请输入关键字"value=""/>
<input id="submit"type="submit" value="查询"/>
</div>
</div> <div id="main">
<form action="${pageContext.request.contextPath }/manager/homeCostServlet" method="get">
<!-- hidden隐藏域,判断是添加请求还是修改请求：param.id取id的值,id为空是添加；id非空是修改 -->
<input type="hidden" id="action" name="action" value="${ empty param.id ? "add":"update" }">
<table>
<tr>
<td>消费名称</td>
<td>消费金额</td>
<td>登记日期</td>
<td colspan="2">操作</td>
</tr>
<tr>
<!-- 使用el表达式注意在jsp页面(如本页面第一行)导入相应的包 -->
<input type="hidden" id="id" name="id" value="${requestScope.homeCost.id}">
<td><input id="costname" name="name" type="text" placeholder="请输入名称"value="${requestScope.homeCost.name}"/></td>
<td><input id="money" name="money" type="text"placeholder="请输入金额" value="${requestScope.homeCost.money}"/></td>
<td><input name="date" type="text"placeholder="日期系统自动录入"value="${requestScope.homeCost.date}"disabled="disabled" /></td>
<td><input id="tablesubmit"type="submit" value="提交"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
cost_edit.jsp
4.查询消费记录页面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询消费记录</title>
<!-- 采用绝对路径导入css文件 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
<!-- 采用绝对路径导入jquery文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//验证非空，并提交查询请求
$("#submit").click(function () {
//验证输入框是否为空
var keyword = $("#keyword").val();
if(keyword ==""){
alert("请输入关键字");
return false;
}else {
//javascript语言提供了一个location地址栏对象
//它有一个属性href,可以获取浏览器中地址栏地址
location.href="${pageContext.request.contextPath }/manager/homeCostServlet?action=query&keyword="+keyword;
} }); //删除提示
$("a.deleteClass").click(function () {
//在事件fuction函数中有一个this对象，即当前响应事件的dom对象 /**
* confirm是确认提示框函数
* 参数是提示内容
* 两个按钮：确认和取消
* 返回true表示点击确认
*/
return confirm("你确定要删除【"+ $(this).parent().parent().find("td:first").text()+"】?");
}); });
</script>
</head>
<body>
<div id="header">
<span class="wel_word">查询消费记录</span>
<div>
<a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=list">返回历史记录</a>
<a href="${pageContext.request.contextPath }/cost_edit.jsp">新增消费记录</a>
<input style="margin-left:20px"id="keyword" name="keyword" type="text" placeholder="请输入关键字"value=""/>
<input id="submit"type="submit" value="查询"/>
</div>
</div> <div id="main">
<c:if test="${requestScope.homeCost.size()>=0}">
<table style="margin-top:30px;margin-left:180px">
<tr>
<td class="costname" style="width:200px">消费名称</td>
<td>消费金额</td>
<td style="width:200px">登记日期</td>
<td colspan="2">操作</td>
</tr>
<!-- 使用el表达式注意在jsp页面(如本页面第一行)导入相应的包 -->
<c:forEach items="${requestScope.homeCost}" var="item">
<tr>
<td>${item.name}</td>
<td>${item.money}</td>
<td>${item.date}</td>
<td><a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=getHomeCostById&id=${item.id}">修改</a></td>
<td><a class="deleteClass" href="${pageContext.request.contextPath }/manager/homeCostServlet?action=delete&id=${item.id}">删除</a></td>
</tr>
</c:forEach>
<tr>
<td colspan="5" >共有${requestScope.homeCost.size()}笔消费记录</td>
</tr>
</table>
</c:if>
</div>
</body>
</html>
query.jsp：
页面效果：
补充：有人问到所用数据库相关信息，说明如下：
所用数据库：mysql
表结构说明：
id,int,主键，自动递增；
name,varchar类型
money,decimal类型，小数位数2位；
date,timestamp类型，默认值CURRENT_TIMESTAMP（插入数据，自动获取时间并录入）
建表SQL语句：
CREATE TABLE `home` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`money` decimal(11,2) DEFAULT NULL,
`date` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=86 DEFAULT CHARSET=utf8;
home.sql
表结构截图：
家庭记账本小程序之框架设计（java web基础版一）的更多相关文章
- 家庭记账本小程序之查（java web基础版六）
实现查询消费账单 1.main_left.jsp中该部分,调用search.jsp 2.search.jsp,提交到Servlet中的search方法 <%@ page language=&qu ...
- 家庭记账本小程序之改（java web基础版五）
实现修改消费账单 1.main_left.jsp中该部分,调用Servlet中的list方法 2.Servlet中的list方法,调用Dao层的list方法,跳转到list.jsp页面 3.Dao层的 ...
- 家庭记账本小程序之删（java web基础版四）
实现删除消费账单 1.main_left.jsp中该部分,调用Servlet中delete方法 2.Servlet中delete方法,调用Dao层list方法,跳转到del.jsp页面 3.Dao层l ...
- 家庭记账本小程序之增（java web基础版三）
实现新增消费账单 1.main_left.jsp中该部分,调用add.jsp 2. add.jsp,提交到Servlet的add方法 <%@ page language="java&q ...
- 家庭记账本小程序之java代码部分（java web基础版二）
1.连接数据库 package util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Res ...
- 微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
- 快速了解微信小程序的使用，一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- 小程序第三方框架对比 ( wepy / mpvue / taro )(转)
文章转自 https://www.cnblogs.com/Smiled/p/9806781.html 众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程 ...
- 小程序第三方框架对比 ( wepy / mpvue / taro )
众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...
随机推荐
- "每日一道面试题".net托管堆是否会存在内存泄漏的情况
首先说答案:会 所谓的内存泄漏,就是指内存空间上产生了不再被实际使用却又无非被分配的对象.严格意义上来说,在.net中经常会遇到内存泄漏的情况,因为托管堆内的对象不再被使用时,需要等待下一次GC才会被 ...
- [PHP] defunct僵尸进程
1.如果子进程先于父进程退出, 同时父进程又没有调用wait/waitpid,则该子进程将成为僵尸进程 2.如果fork完就不管了可以使用 忽略子进程信号, 防止僵尸进程 pcntl_signal(S ...
- js报错：Uncaught SyntaxError: Unexpected string
一.问题 今天在写jsp页面时,发现加上某段代码后,页面的其它js就失效了,死活出不来,然后打开谷歌浏览器发现,页面js报如下错误: Uncaught SyntaxError: Unexpected ...
- git 常用命令，上传，下载，更新线上代码
git 常用命令以及推荐git新建上传个人博客 $ git clone //本地如果无远程代码,先做这步,不然就忽略 $ git status //查看本地自己修改了多少文件 $ git add . ...
- .NET的未来-广州.NET俱乐部学生分会
偶然的一次机会,让我发现了在我们社区的微信群里潜藏着许多高校的学生,他们有的来自重点高校中山大学.华南理工,也有的来自普通高校的惠州学院.广州白云学院等. 因为相同的技术爱好使他们聚集在社区.相同的技 ...
- 开启bin-log日志mysql报错:This function has none of DETERMINISTIC, NO SQL解决办法
开启bin-log日志mysql报错:This function has none of DETERMINISTIC, NO SQL解决办法: 创建存储过程时 出错信息: ERROR 1418 (HY ...
- LayoutInflater.inflate()方法两个参数和三个参数
转载请标明出处:https://www.cnblogs.com/tangZH/p/7074853.html 很多人都用过LayoutInflater(布局填充器) 对于我来说通常使用下面两种:Lay ...
- [Python][Scrapy 框架] Python3 Scrapy的安装
1.方法(只介绍 pip 方式安装) PS.不清楚 pip(easy_install) 可以百度或留言. cmd命令: (直接可以 pip,而不用跳转到 pip.exe目录下,是因为把所在目录加入 P ...
- mysql使用索引的注意事项
使用索引的注意事项 使用索引时,有以下一些技巧和注意事项: 1.索引不会包含有NULL值的列 只要列中包含有NULL值都将不会被包含在索引中,复合索引中只要有一列含有NULL值,那么这一列对于此复合索 ...
- Linux 访问控制列表(access control list)
简介 随着应用的发展,传统的linux文件系统权限控制无法适应复杂的控制需求,而ACL的出现,则是为了扩展linux的文件权限控制,以实现更为复杂的权限控制需求.其可以针对任意的用户和用户组进行权限分 ...