家庭web记账本大致完成。一共就登录、注册、添加流水、查看账单。后续再添加一些计算每周或者没月的汇总，或者美化界面，或者个人信息修改啥的。
自从寒假以来，温习了html，js，学习了新的jQuery，ajax，json，也已经能稍微熟练地运用了。
登录后的界面：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8" import = "java.util.*"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="UTF-8"> 7 <title>Insert title here</title> 8 <style type="text/css"> 9 #table{ 10 top: 200px; 11 left: 200px; 12 color: #0099FF; 13 position: absolute; 14 background-color: aquamarine; 15 /* visibility: hidden; */ 16 } 17 #table2{ 18 top: 200px; 19 right: 200px; 20 color: #0099FF; 21 position: absolute; 22 /* visibility: hidden; */ 23 } 24 th{ 25 width: 150px; 26 } 27 #out{ 28 top: 150px; 29 left: 200px; 30 width: 50px; 31 height: 50px; 32 position: absolute; 33 } 34 #in{ 35 top: 150px; 36 width: 50px; 37 right: 200px; 38 height: 50px; 39 position: absolute; 40 } 41 #div2{ 42 visibility: hidden; 43 } 44 </style> 45 </head> 46 <script type="text/javascript" src="js/jquery-3.5.1.js"></script> 47 <script type="text/javascript"> 48 $(document).ready(function(){ 49 $("#add").click(function(){ 50 var a=$("#span1") 51 /* if(a.css("visibility")=="hidden"){ 52 a.css("visibility","visible"); 53 }else{ 54 a.css("visibility","hidden"); 55 } */ 56 var TEMP=1 57 if($("#span1").text()==""){ 58 $("#span1").append("金额<input type='text'id='money'/>元<br><input type='radio' id='pay' name='pay' value='1' checked='checked'> 支出 <input type='radio' id='pay1' name='pay' value='2'>收入<br>明细<input type='text'id='driction'/><br><input type='button'id='btn' value='提交'/><br> ") 59 }else{ 60 $("#span1").text("") 61 } 62 $("#money").blur(function(){ 63 var a=/^d{1,}$/ 64 if(!(a.test($("#money").val()))){ 65 alert("请输入正确的金额！") 66 }else{ 67 TEMP=0 68 } 69 }) 70 $("#btn").click(function(){ 71 if(TEMP==0){ 72 $.get( 73 "money_servlet", 74 {"money":$("#money").val(),"pay":$("input[type='radio']:checked").val(),"driction":$("#driction").val(),"user":GetQueryString("name")}, 75 function(resp){ 76 console.log(resp) 77 var a=$("#span1") 78 a.text("") 79 alert("添加成功！") 80 }, 81 "json" 82 ) 83 } 84 }) 85 }) 86 87 function GetQueryString(name) 88 { 89 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 90 var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则 91 if(r!=null)return unescape(r[2]); return null; 92 } 93 $("#look").click(function(){ 94 $("#div2").css("visibility","visible") 95 $.ajax({ 96 url:"find_servlet", 97 data:{"name":GetQueryString("name")}, 98 success:function(resp){ 99 $("#table").text("") 100 $("#table1").text("") 101 $("#table").append("<tr><th>金额</th><th>用途</th><th>时间</th></tr>") 102 $("#table1").append("<tr><th>金额</th><th>用途</th><th>时间</th></tr>") 103 $.each(resp,function(i,a){ 104 if(a.pay=="1"){ 105 $("#table").append("<tr><th>"+a.money+"</th><th>"+a.dirction+"</th><th>"+a.time+"</th</tr>") 106 }else{ 107 $("#table2").append("<tr><th>"+a.money+"</th><th>"+a.dirction+"</th><th>"+a.time+"</th</tr>") 108 } 109 }) 110 }, 111 dataType:"json" 112 }) 113 }) 114 }) 115 </script> 116 <body> 117 <div id="div1" align="center"> 118 <input type="button" value="添加新的账目" id="add" /><br> 119 <span id="span1" > 120 <!-- 金额<input type='text'id='money'/>元<br> 121 <input type='radio' name='pay' value='1' checked='checked'> 支出 122 <input type='radio' name='pay' value='2'>收入<br> 123 明细<input type='text'id='driction'/><br> 124 <input type='button'id='btn' value='提交'/><br> --> 125 </span> 126 <input type="button" value="查看账目记录" id="look"/> 127 </div> 128 <div id="div2"> 129 <span id="out">支出:</span> 130 <span id="in">收入:</span> 131 <table border="1px" cellspacing="1" cellpadding="10" id="table"> 132 <tr> 133 <th>金额</th> 134 <th>用途</th> 135 <th>时间</th> 136 </tr> 137 </table> 138 <table border="1px" cellspacing="1" cellpadding="10" id="table2"> 139 <tr> 140 <th>金额</th> 141 <th>用途</th> 142 <th>时间</th> 143 </tr> 144 </table> 145 </div> 146 </body> 147 </html>
后台的money_servlet:
1 package servlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import java.sql.SQLException; 6 7 import javax.servlet.ServletException; 8 import javax.servlet.annotation.WebServlet; 9 import javax.servlet.http.HttpServlet; 10 import javax.servlet.http.HttpServletRequest; 11 import javax.servlet.http.HttpServletResponse; 12 13 import dao.dao; 14 15 /** 16 * Servlet implementation class money_servlet 17 */ 18 @WebServlet("/money_servlet") 19 public class money_servlet extends HttpServlet { 20 private static final long serialVersionUID = 1L; 21 22 /** 23 * @see HttpServlet#HttpServlet() 24 */ 25 public money_servlet() { 26 super(); 27 // TODO Auto-generated constructor stub 28 } 29 30 /** 31 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 32 */ 33 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 34 request.setCharacterEncoding("utf-8"); 35 response.setContentType("text/html;charset=utf-8"); 36 dao p=new dao(); 37 PrintWriter out=response.getWriter(); 38 String money=null; 39 String pay=null; 40 String driction=null; 41 String name=null; 42 money=request.getParameter("money"); 43 pay=request.getParameter("pay"); 44 driction=request.getParameter("driction"); 45 name=request.getParameter("user"); 46 try { 47 p.addmoney(money, pay, driction, name); 48 } catch (SQLException e) { 49 // TODO 自动生成的 catch 块 50 e.printStackTrace(); 51 } 52 String a="{"boolean":"true"}"; 53 out.println(a); 54 } 55 56 /** 57 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 58 */ 59 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 60 // TODO Auto-generated method stub 61 doGet(request, response); 62 } 63 64 }
dao层方法：
1 public List<water> find(String name) throws SQLException 2 { 3 List<water> list=new ArrayList<water>(); 4 Connection coon=getConnection(); 5 String sql="select* from money"; 6 PreparedStatement pa=coon.prepareStatement(sql); 7 /* 8 * pa.setInt(1,(page-1)*5); pa.setInt(2, 5); 9 */ 10 ResultSet rs=pa.executeQuery(sql); 11 while(rs.next()) 12 { 13 if(rs.getString("user").equals(name)) 14 { 15 water p=new water(); 16 p.setDirction(rs.getString("driction")); 17 p.setMoney(rs.getString("money")); 18 p.setPay(rs.getString("pay")); 19 p.setTime(rs.getString("time")); 20 list.add(p); 21 } 22 } 23 rs.close(); 24 pa.cancel(); 25 coon.close(); 26 return list; 27 }
mysql表格：
