2021 1 23 近期总结

家庭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表格：