2021 1 22 家庭web记账本进度二

家庭web记账本进度二

经验总结：

1、用Chrome打开网页之后动态的效果没用，代码也看不出问题，就应该用F12打开网页编译器寻找错误

2、jQuery的css函数对图层的可视性能进行操作

3、js获取url参数问题，可以直接定义函数以便调用，

4、

登录之后的界面的添加流水的功能：

 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     #span1{
10         visibility: hidden;
11     }
12 </style>
13 </head>
14 <script type="text/javascript" src="js/jquery-3.5.1.js"></script>  
15 <script type="text/javascript">
16     $(document).ready(function(){
17         $("#add").click(function(){
18             var a=$("#span1")
19             a.css("visibility","visible");
20             var TEMP=1
21             /* $("#span1").text("")
22             $("#span1").append("金额<input type='text'id='money'/>元<br><input  type='radio' id='pay' name='pay' value='1' checked='checked'> 支出 <input  type='radio' id='pay' name='pay' value='2'>收入<br>明细<input type='text'id='driction'/><br><input type='button'id='btn' value='提交'/><br> ") */
23             $("#money").blur(function(){
24                 var a=/^d{1,}$/
25                 if(!(a.test($("#money").val()))){
26                     alert("请输入正确的金额！")
27                 }else{
28                     TEMP=0
29                 }
30             })
31             $("#btn").click(function(){
32                 if(TEMP==0){
33                     $.get(
34                             "money_servlet",
35                             {"money":$("#money").val(),"pay":$("#pay").val(),"driction":$("#driction").val(),"user":GetQueryString("name")},
36                             function(resp){
37                                 console.log(resp)
38                                 var a=$("#span1")
39                                 a.css("visibility","hidden");
40                                 alert("添加成功！")
41                             },
42                             "json"
43                         )
44                     }
45             })
46         })
47         
48         function GetQueryString(name)
49                 {
50                      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
51                      var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
52                      if(r!=null)return  unescape(r[2]); return null;
53                 } 
54     })
55 </script>
56 <body>
57     <div id="div1" align="center">
58         <input type="button" value="添加新的账目" id="add" /><br>
59         <span id="span1" >
60             金额<input type='text'id='money'/>元<br>
61             <input  type='radio' name='pay' value='1' checked='checked'> 支出 
62             <input  type='radio' name='pay' value='2'>收入<br>
63             明细<input type='text'id='driction'/><br>
64             <input type='button'id='btn' value='提交'/><br> 
65         </span>        
66         <input type="button" value="查看账目记录" id="look"/>
67     </div>
68 </body>
69 </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层的相应的函数：

public boolean addmoney(String money,String pay,String driction,String user) throws SQLException//add matter
    {
        Connection coon=getConnection();
        int row,temp=0;
        String sql;
        sql="insert into money(money,pay,driction,time,user)values(?,?,?,?,?)";//matters' name in table
        PreparedStatement b;
        Date date = new Date();
        SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
        String time = sf.format(date);
        try {
            b = coon.prepareStatement(sql);
            b.setString(1,money);
            b.setString(2,pay);
            b.setString(3,driction);
            b.setString(4,time);
            b.setString(5,user);
            row=b.executeUpdate();
            if(row<0) temp=1;
            b.close();
        } catch (SQLException e) {
            // TODO 自动生成的 catch 块
            e.printStackTrace();
        }
        coon.close();
        if(temp==0) return true;
        else return false;
    }

mysql的相应表格：

2021 1 22 家庭web记账本 进度二

2021 1 22 家庭web记账本进度二