家庭記賬本小程序之前端頁面設計（java web基礎版一）

本文轉載自查看原文 2019-02-26 16:47 6063

更新於2020.3.29，博主對於JavaWeb有了一定的開發經驗，對本家庭記賬本程序重構，該教程僅適用於javaweb入門教程，因為要使代碼盡量通俗易懂，故會存在bug和不規范的情況。

該網站已部署到服務器，可供體驗具體功能：點擊體驗

網站源碼在第2頁

1.家庭記賬本主頁

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>家庭記賬本主頁</title>
 7     <!-- 采用絕對路徑導入css文件 -->
 8     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
 9     <!-- 采用絕對路徑導入jquery文件 -->
10     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.2.js"></script>
11     <script type="text/javascript">
12     $(function () {
13         //驗證非空，並提交查詢請求
14         $("#submit").click(function () {
15             //驗證輸入框是否為空
16             var keyword = $("#keyword").val();
17             if(keyword ==""){
18                 alert("請輸入關鍵字");
19                 return false;
20             }else {
21                 //javascript語言提供了一個location地址欄對象
22                 //它有一個屬性href,可以獲取瀏覽器中地址欄地址
23                 location.href="${pageContext.request.contextPath }/manager/homeCostServlet?action=query&keyword="+keyword;
24             }
25 
26         });
27         
28     });
29     </script>
30 </head>
31 <body>
32     <div id="header">
33         <span class="wel_word">家庭記賬本</span>
34         <div>
35                <a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=list">往期消費記錄</a>
36                <a href="${pageContext.request.contextPath }/cost_edit.jsp">新增消費記錄</a>
37                <input style="margin-left:20px"id="keyword" name="keyword" type="text" placeholder="請輸入關鍵字"value=""/>
38             <input id="submit"type="submit" value="查詢"/>
39         </div>
40     </div>
41     
42     <div id="main">
43         <h1>歡迎進入家庭記賬本系統</h1>
44     </div>
45     
46 </html>

index.jsp

2.管理消費記錄頁面

 1 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 2 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>消費記錄管理</title>
 8     <!-- 采用絕對路徑導入css文件 -->
 9     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
10     <!-- 采用絕對路徑導入jquery文件 -->
11     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.2.js"></script>
12     <script type="text/javascript">
13     
14     $(function () {
15         //提示用戶添加失敗，刪除失敗，修改失敗
16         if(!${empty requestScope.msg}){
17             alert("${requestScope.msg}");
18         }
19         //驗證非空，並提交查詢請求
20         $("#submit").click(function () {
21             //驗證輸入框是否為空
22             var keyword = $("#keyword").val();
23             if(keyword ==""){
24                 alert("請輸入關鍵字");
25                 return false;
26             }else {
27                 //javascript語言提供了一個location地址欄對象
28                 //它有一個屬性href,可以獲取瀏覽器中地址欄地址
29                 location.href="${pageContext.request.contextPath }/manager/homeCostServlet?action=query&keyword="+keyword;
30             }
31 
32         });
33         
34         //刪除提示
35         $("a.deleteClass").click(function () {
36             //在事件fuction函數中有一個this對象，即當前響應事件的dom對象
37 
38             /**
39              * confirm是確認提示框函數
40              * 參數是提示內容
41              * 兩個按鈕：確認和取消
42              * 返回true表示點擊確認
43              */
44             return confirm("你確定要刪除【"+ $(this).parent().parent().find("td:first").text()+"】?");
45         });
46         
47     });
48     </script>
49 </head>
50 <body>
51     <div id="header">
52         <span class="wel_word">家庭記賬本</span>
53         <div>
54                <a href="${pageContext.request.contextPath }/cost_edit.jsp">新增消費記錄</a>
55                <input style="margin-left:20px"id="keyword" name="keyword" type="text" placeholder="請輸入關鍵字"value=""/>
56                <input id="submit"type="submit" value="查詢"/>
57         </div>
58     </div>
59     <div id="main">
60         <table style="margin-top:30px">
61             <tr>
62                 <td class="costname" style="width:200px">消費名稱</td>
63                 <td>消費金額</td>
64                 <td>累計消費</td>
65                 <td style="width:200px">登記日期</td>
66                 <td colspan="2">操作</td>
67             </tr>
68             <!-- 使用el表達式注意在jsp頁面(如本頁面第一行)導入相應的包 -->
69             <c:forEach items="${requestScope.homeCost}" var="item">
70                 <tr>
71                     <td>${item.name}</td>
72                     <td>${item.money}</td>
73                     <td>${item.sum}</td>
74                     <td>${item.date}</td>
75                     <td><a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=getHomeCostById&id=${item.id}">修改</a></td>
76                     <td><a  class="deleteClass" href="${pageContext.request.contextPath }/manager/homeCostServlet?action=delete&id=${item.id}">刪除</a></td>
77                 </tr>
78             </c:forEach>
79             <tr>
80                 <td></td>
81                 <td></td>
82                 <td></td>
83                 <td></td>
84                 <td colspan="2"><a href="${pageContext.request.contextPath }/cost_edit.jsp">新增</a></td>
85             </tr>
86             <tr>
87                 <td colspan="5" >共有${requestScope.homeCost.size()}筆消費記錄</td>
88                 <td></td>
89             </tr>
90         </table>
91 
92         
93     </div>
94 </body>
95 </html>

manager.jsp

3.編輯消費記錄頁面

 1 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 2 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>編輯消費記錄</title>
 8     <!-- 采用絕對路徑導入css文件 -->
 9     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
10     <!-- 采用絕對路徑導入jquery文件 -->
11     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.2.js"></script>
12     <script type="text/javascript">
13         $(function () {
14             //提示用戶添加失敗，刪除失敗，修改失敗
15             if(!${ empty requestScope.msg }){
16                 alert("${requestScope.msg}");
17             }
18             //驗證非空，並提交查詢請求
19             $("#submit").click(function () {
20                 //驗證輸入框是否為空
21                 var keyword = $("#keyword").val();
22                 if(keyword ==""){
23                     alert("請輸入關鍵字");
24                     return false;
25                 }else {
26                     //javascript語言提供了一個location地址欄對象
27                     //它有一個屬性href,可以獲取瀏覽器中地址欄地址
28                     location.href="${pageContext.request.contextPath }/manager/homeCostServlet?action=query&keyword="+keyword;
29                 }
30             });
31             //驗證輸入框非空
32             $("#tablesubmit").click(function(){
33                 //驗證輸入框是否為空
34                 var costname = $("#costname").val();
35                 var money = $("#money").val();
36                 if(costname == null || costname ==""){
37                     alert("消費名稱不能為空");
38                     $("#costname").focus();
39                     return false;
40                 }
41                 if(money == null || money ==""){
42                     alert("消費金額不能為空");
43                     $("#money").focus();
44                     return false;
45                 }
46             });
47             
48         });
49     </script>
50 </head>
51 <body>
52     <div id="header">
53         <span class="wel_word">編輯消費記錄</span>
54         <div>
55                <a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=list">返回歷史記錄</a>
56                <input style="margin-left:20px"id="keyword" name="keyword" type="text" placeholder="請輸入關鍵字"value=""/>
57             <input id="submit"type="submit" value="查詢"/>
58         </div>
59     </div>
60     
61     <div id="main">
62         <form action="${pageContext.request.contextPath }/manager/homeCostServlet" method="get">
63             <!-- hidden隱藏域,判斷是添加請求還是修改請求：param.id取id的值,id為空是添加；id非空是修改 -->
64             <input type="hidden" id="action" name="action" value="${ empty param.id ? "add":"update" }">
65             <table>
66                 <tr>
67                     <td>消費名稱</td>
68                     <td>消費金額</td>
69                     <td>登記日期</td>
70                     <td colspan="2">操作</td>
71                 </tr>        
72                 <tr>
73                     <!-- 使用el表達式注意在jsp頁面(如本頁面第一行)導入相應的包 -->
74                     <input type="hidden" id="id" name="id" value="${requestScope.homeCost.id}">
75                     <td><input id="costname" name="name" type="text" placeholder="請輸入名稱"value="${requestScope.homeCost.name}"/></td>
76                     <td><input id="money" name="money" type="text"placeholder="請輸入金額" value="${requestScope.homeCost.money}"/></td>
77                     <td><input name="date" type="text"placeholder="日期系統自動錄入"value="${requestScope.homeCost.date}"disabled="disabled" /></td>
78                     <td><input id="tablesubmit"type="submit" value="提交"/></td>
79                 </tr>    
80             </table>
81         </form>
82     </div>
83 </body>
84 </html>

cost_edit.jsp

4.查詢消費記錄頁面

 1 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 2 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>查詢消費記錄</title>
 8     <!-- 采用絕對路徑導入css文件 -->
 9     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
10     <!-- 采用絕對路徑導入jquery文件 -->
11     <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.js"></script>
12     <script type="text/javascript">
13         $(function () {
14             //驗證非空，並提交查詢請求
15             $("#submit").click(function () {
16                 //驗證輸入框是否為空
17                 var keyword = $("#keyword").val();
18                 if(keyword ==""){
19                     alert("請輸入關鍵字");
20                     return false;
21                 }else {
22                     //javascript語言提供了一個location地址欄對象
23                     //它有一個屬性href,可以獲取瀏覽器中地址欄地址
24                     location.href="${pageContext.request.contextPath }/manager/homeCostServlet?action=query&keyword="+keyword;
25                 }
26     
27             });
28             
29             //刪除提示
30             $("a.deleteClass").click(function () {
31                 //在事件fuction函數中有一個this對象，即當前響應事件的dom對象
32     
33                 /**
34                  * confirm是確認提示框函數
35                  * 參數是提示內容
36                  * 兩個按鈕：確認和取消
37                  * 返回true表示點擊確認
38                  */
39                 return confirm("你確定要刪除【"+ $(this).parent().parent().find("td:first").text()+"】?");
40             });
41             
42         });
43     </script>
44 </head>
45 <body>
46     <div id="header">
47         <span class="wel_word">查詢消費記錄</span>
48         <div>
49                <a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=list">返回歷史記錄</a>
50                <a href="${pageContext.request.contextPath }/cost_edit.jsp">新增消費記錄</a>
51                <input style="margin-left:20px"id="keyword" name="keyword" type="text" placeholder="請輸入關鍵字"value=""/>
52             <input id="submit"type="submit" value="查詢"/>
53         </div>
54     </div>
55     
56     <div id="main">
57         <c:if test="${requestScope.homeCost.size()>=0}">
58             <table style="margin-top:30px;margin-left:180px">
59             <tr>
60                 <td class="costname" style="width:200px">消費名稱</td>
61                 <td>消費金額</td>
62                 <td style="width:200px">登記日期</td>
63                 <td colspan="2">操作</td>
64             </tr>
65             <!-- 使用el表達式注意在jsp頁面(如本頁面第一行)導入相應的包 -->
66             <c:forEach items="${requestScope.homeCost}" var="item">
67                 <tr>
68                     <td>${item.name}</td>
69                     <td>${item.money}</td>
70                     <td>${item.date}</td>
71                     <td><a href="${pageContext.request.contextPath }/manager/homeCostServlet?action=getHomeCostById&id=${item.id}">修改</a></td>
72                     <td><a  class="deleteClass" href="${pageContext.request.contextPath }/manager/homeCostServlet?action=delete&id=${item.id}">刪除</a></td>
73                 </tr>
74             </c:forEach>
75             <tr>
76                 <td colspan="5" >共有${requestScope.homeCost.size()}筆消費記錄</td>
77             </tr>
78             </table>
79         </c:if>
80     </div>
81 </body>
82 </html>

query.jsp：

頁面效果：

補充：有人問到所用數據庫相關信息，說明如下：

所用數據庫：mysql

表結構說明：

id,int,主鍵，自動遞增；

name,varchar類型

money,decimal類型，小數位數2位；

date,timestamp類型，默認值CURRENT_TIMESTAMP（插入數據，自動獲取時間並錄入）

建表SQL語句：

1 CREATE TABLE `home` (
2   `id` int(11) NOT NULL AUTO_INCREMENT,
3   `name` varchar(255) DEFAULT NULL,
4   `money` decimal(11,2) DEFAULT NULL,
5   `date` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
6   PRIMARY KEY (`id`)
7 ) ENGINE=InnoDB AUTO_INCREMENT=86 DEFAULT CHARSET=utf8;

home.sql

表結構截圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 家庭記賬本小程序之刪（java web基礎版四）家庭記賬本小程序之改（java web基礎版五）家庭記賬本小程序之查（java web基礎版六）家庭記賬本教程之增（java web基礎版三）家庭記賬本小程序之后台java代碼部分（java web基礎版二） Java后台+數據庫+Java web前端——記賬本微信記賬本小程序（代碼+設計） Android實戰項目——家庭記賬本設計思路微信小程序-記賬本記賬本設計思路