家庭记账本小程序之框架设计（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.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...
随机推荐
- 第29章 保护API - Identity Server 4 中文文档(v1.0.0)
IdentityServer 默认以JWT(JSON Web令牌)格式发出访问令牌. 今天的每个相关平台都支持验证JWT令牌,这里可以找到一个很好的JWT库列表.热门库例如: ASP.NET Core ...
- Scrapy爬虫错误日志汇总
1.数组越界问题(list index out of range) 原因:第1种可能情况:list[index]index超出范围,也就是常说的数组越界. 第2种可能情况:list是一个空的, 没有一 ...
- Java开发笔记（三十八）利用正则表达式校验字符串
前面多次提到了正则串.正则表达式,那么正则表达式究竟是符合什么定义的字符串呢?正则表达式是编程语言处理字符串格式的一种逻辑式子,它利用若干保留字符定义了形形色色的匹配规则,从而通过一个式子来覆盖满足了 ...
- 浅谈ST表
发现自己学的一直都是假的ST表QWQ. ST表 ST表的功能很简单 它是解决RMQ问题(区间最值问题)的一种强有力的工具 它可以做到$O(nlogn)$预处理,$O(1)$查询最值 算法 ST表是利用 ...
- 使用vue-cli 初始化 vue 项目
1. 安装nodejs 2. 安装 vue-cli npm install -g vue-cli 安装前可以通过设置代理为淘宝仓库地址,以加快下载速度. npm config set registry ...
- Android下获取FPS的几种方法
FPS(Frames Per Second)是关乎Android用户体验最为重要的指标之一,而在VR中更是如此.为了评估VR系统.VR SDK及Unity应用的性能,通常会实时获取FPS并将其显示出来 ...
- Redis压缩列表
此篇文章是主要介绍Redis在数据存储方面的其中一种方式,压缩列表.本文会介绍1. 压缩列表(ziplist)的使用场景 2.如何达到节约内存的效果?3.压缩列表的存储格式 4. 连锁更新的问题 5 ...
- angular应用容器化部署
angular 应用容器化部署 Intro 我自己有做一个个人主页,虽然效果不怎么样(不懂设计的典型程序猿...),但是记录了我对于前端框架及工具的一些实践, 从开始只有一个 angularjs 制作 ...
- Python装饰器、内置函数之金兰契友
装饰器:装饰器的实质就是一个闭包,而闭包又是嵌套函数的一种.所以也可以理解装饰器是一种特殊的函数.因为程序一般都遵守开放封闭原则,软件在设计初期不可能把所有情况都想到,所以一般软件都支持功能上的扩展, ...
- python3 Queue（单向队列）
创建队列 import queue q = queue.Queue() empty(如果队列为空,返回True) import queue q = queue.Queue() print(q.empt ...