家庭记账本小程序之框架设计（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.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...
随机推荐
- [MySQL] explain中的using where和using index
1. 查看表中的所有索引 show index from modify_passwd_log; 有两个 一个是id的主键索引 , 一个是email_id的普通索引 2. using index表示 ...
- Vue UI：Vue开发者必不可少的工具
译者按: Vue开发工具越来越好用了! 原文: Vue UI: A First Look 译者: Fundebug 本文采用意译,版权归原作者所有 随着最新的稳定版本Vue CLI 3即将发布,是时候 ...
- JS的arguments
arguments对象:当前函数内置的全局属性,表示当前函数的所有参数的集合可以用来检测函数实参的个数 使用环境:当函数的参数个数无法确定时,使用arguments 写一个函数输出arguments看 ...
- 【20190407】JavaScript-indexOf方法解析
在JavaScript中,字符串类型String和数组类型Array都有indexOf()方法,虽然他们的作用都是返回传入元素在指定字符串或数组中的位置,但他们之间还是存在着一点点不同. Str.in ...
- 关于Windows系统不会变慢的设想
记录软件安装的过程,比如创建了哪些服务,哪些计划任务以及启动项等等. 然后软件安装完成后把关于软件的进程,服务,计划任务等都删掉. 然后手动创建一个脚本,用脚本代替软件的启动.比如,如果要启动sqls ...
- 如何利用Vagrant快速搭建相同配置的开发环境？
作为一名程序猿,我们常常会遇到需要搭建开发环境的问题,特别是在新入职的时候,sublime, node, apache, mysql, php等等以及各种框架的安装.如果入职的是大公司有可能这些必要的 ...
- 委托学习总结（一）浅谈对C#委托理解
初入社会,对于我这个初级程序员来说要学的东西实在太多了,公司最近在做一个winform框架开发的桌面应用程序,众所周知,winform也好,webform也好,里面随处可见的事件驱动,有事件,当然也少 ...
- Python 日志模块logging
logging模块: logging是一个日志记录模块,可以记录我们日常的操作. logging日志文件写入默认是gbk编码格式的,所以在查看时需要使用gbk的解码方式打开. logging日志等级: ...
- js 学习之路7：switch/case语句的使用
语法格式: switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代 ...
- 【记录】使用在线KMS激活Office系列
摘要 (有能力的请支持正版office) 网上一些激活工具可能捆绑了木马.病毒.使用激活工具有风险.使用在线KMS来激活则没有这个风险. 找到你的office安装目录 已管理员身份运行cmd输入:cd ...