zoukankan      html  css  js  c++  java
  • 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的相应表格:

  • 相关阅读:
    Spring Cloud Hystrix Dashboard的使用 5.1.3
    Spring Cloud Hystrix 服务容错保护 5.1
    Spring Cloud Ribbon 客户端负载均衡 4.3
    Spring Cloud 如何实现服务间的调用 4.2.3
    hadoop3.1集成yarn ha
    hadoop3.1 hdfs的api使用
    hadoop3.1 ha高可用部署
    hadoop3.1 分布式集群部署
    hadoop3.1伪分布式部署
    KVM(八)使用 libvirt 迁移 QEMU/KVM 虚机和 Nova 虚机
  • 原文地址:https://www.cnblogs.com/fuxw4971/p/14315095.html
Copyright © 2011-2022 走看看