家庭记账本小程序之框架设计（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.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...
随机推荐
- java日期 Calendar类的使用
举例: import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; public clas ...
- sql server去掉某个字段前后空格问题
数据通过页面表单保存到数据库,由于有个选项是一个树形的下拉框,导致保存的这个字段的数据前面有空格,在sql server中可以使用 SELECT LTRIM(RTRIM(BelongPartyCode ...
- Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解（函登录验证）
上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页 了解了LigerUI 中Grid的基本用法 现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面 ...
- ps快捷键（有道云笔记翻出来以前的存货）
打开 ctrl+o 关闭 ctrl+w 全选 ctrl+a 新建画布 ctrl+n 取消选区 ctrl+d 标尺 ctrl+r 虚线 ...
- Android: 在native中访问assets全解析
本文总结在Android Native C++开发中访问APK中的assets资源的方法 在CMake中添加相关NDK LIB的 依赖 因为我们接下来用到的一些函数实现在NDK库libandroid. ...
- Android Studio获取开发版SHA1值和发布版SHA1值的史上最详细方法
前言: 今天我想把百度地图的定位集成到项目中来,想写个小小的案例,实现一下,但在集成百度地图时首先要申请秘钥,申请秘钥要用到SHA1值,所以今天就来总结一下怎样去获取这个值吧,希望对大家有帮助. 正常 ...
- 腾讯云服务器配置node环境
1:更新现有包 sudo apt-get update 2:安装依赖 sudo apt-get install vim openssl build-essential libssl-dev wget ...
- linux下的QT打包方法
一句话很简单,一个shell脚本搞定,不跟你嘻嘻哈哈 #!/bin/shexe="ThorIceLocker"#存放你的可执行文件的名字des="/home/ninetr ...
- Spark之Yarn提交模式
一.Client模式 提交命令: ./spark-submit --master yarn --class org.apache.examples.SparkPi ../lib/spark-examp ...
- c# winform多线程实时更新控件
//创建委托 private delegate void SetTextCallback(string text); /// <summary> / ...