1. 技术文章
  2. 寒假第八天——（家庭记账本）

寒假第八天——（家庭记账本）

由 ⅰ亾dé卋堺 提交于 2020-02-08 15:42:47 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
    <style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*这里很关键*/
 
        .outer-wrap{
            /*只有同时为html和body设置height: 100%时，这里的height才生效，
            并且随浏览器窗口变化始终保持和浏览器视窗等高*/
            height: 100%;    
            position: relative;
            background-image: url('images/01.jpg');
        }
        .login-panel{
            width: 400px;
            height: 200px;
            background-image: url('images/02.jpg');
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
<body>
<%
         request.setCharacterEncoding("utf-8");
         String message=(String)request.getAttribute("message");
         if(message!=null){
         if(message.equals("error")){
             %>
             <script type="text/javascript">
              alert("用户名或密码错误");
         </script>
         <%
      }else if(message.equals("noerror")){
          %>
          <script type="text/javascript">
              alert("登录成功");
         </script>
         <%
      }else{
      }
      }
      %>
    <div class="outer-wrap">
    
    <div style="font-size:160px;text-align:center">家庭记账本</div>
    <div class="login-panel">
    <div style="font-size:40px;text-align:center">登陆界面</div>
        <form action="LoginServlet" method="post" >
         用户名<input type="text" style="width:300px;height:30px;text-align:center" name="uname"><br/>
         密&nbsp&nbsp&nbsp码<input style="width:300px;height:30px;text-align:center"type="password" name="upwd"><br/>
      <div style="text-align:center">   <input type="submit"  value="登录"><br/></div>
      <div style="text-align:center">  <a href="register.jsp" >没有账号，立即去注册</a>  </div>
        </form>
    </div>
    </div>
</body>
</html>

以上是登陆界面的前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*这里很关键*/
 
        .outer-wrap{
            /*只有同时为html和body设置height: 100%时，这里的height才生效，
            并且随浏览器窗口变化始终保持和浏览器视窗等高*/
            height: 100%;    
            position: relative;
            
        }
        .index-panel{
            width: 400px;
            height: 300px;
           
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
<body>
<%
         request.setCharacterEncoding("utf-8");
         String message=(String)request.getAttribute("message");
         if(message!=null){
         if(message.equals("error")){
             %>
             <script type="text/javascript">
              alert("用户名或密码错误");
         </script>
         <%
      }else if(message.equals("noerror")){
          %>
          <script type="text/javascript">
              alert("登录成功");
         </script>
         <%
      }else{
      }
      }
      %>
      <div class="outer-wrap">
      <div style="font-size:160px;text-align:center"></div>
      <div class="index-panel">
           <div  style="font-size:40px;text-align:center">欢迎您的使用</div>
           <div style="font-size:30px;text-align:center">  <a href="add.jsp">记账</a><br/> </div>
           <div style="font-size:30px;text-align:center"> <a href="QueryAllBillServlet">查看账目</a> </div>
           <div style="font-size:30px;text-align:center"> <a href="screen.jsp">按日期与类型查看账目</a> </div>
            <div style="font-size:30px;text-align:center"> <a href="screentype.jsp">按账目类型查看账目</a> </div>
            <div style="font-size:30px;text-align:center"> <a href="screendate.jsp">按日期查看账目</a> </div>
      </div>
      </div>
</body>
</html>

以上是登陆后的首页的界面的前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>记账</title>
</head>
 <style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*这里很关键*/
 
        .outer-wrap{
            /*只有同时为html和body设置height: 100%时，这里的height才生效，
            并且随浏览器窗口变化始终保持和浏览器视窗等高*/
            height: 100%;    
            position: relative;
            background-image: url('images/01.jpg');
        }
        .add-panel{
            width: 400px;
            height: 300px;
            background-image: url('images/06.jpg');
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
<body>
<%
         request.setCharacterEncoding("utf-8");
         String message=(String)request.getAttribute("message");
         if(message!=null){
         if(message.equals("error")){
             %>
             <script type="text/javascript">
              alert("添加失败");
         </script>
         <%
      }else if(message.equals("noerror")){
          %>
          <script type="text/javascript">
              alert("添加成功");
         </script>
         <%
      }else{
      }
      }
         
      %>
      
<div class="outer-wrap">
      <div style="font-size:160px;text-align:center">家庭记账本</div>
      <div class="add-panel">
      <a href=index.jsp>返回系统首页</a><br>
      <div style="text-align:center;color:yellow">请输入要添加的账目信息：</div><br/>
      <form action="AddBillServlet" method="post">
      
    <div style="text-align:center;color:yellow">
             账目类型<select id="btype" name="btype">
            <option value="饮食">饮食</option>
            <option value="教育">教育</option>
            <option value="购物">购物</option>
            <option value="医疗">医疗</option>
            <option value="收入">收入</option>
            <option value="借贷">借贷</option>
            <option value="其它">其它</option>
        </select>
    </div>
    <div style="text-align:center;color:red">注：借贷和其它类型的账目不计入收支</div>
    <div style="text-align:center;color:yellow">
     金额<input type="text"  name="bmoney"><br/>
    </div>
    <div style="text-align:center;color:yellow">
     日期<input type="date"  name="bdate"><br/>
    </div>
    <div style="text-align:center;color:yellow">
     备注<input type="text"  name="bremark"><br/>
    </div>
    <div style="text-align:center;color:yellow">
     <input type="submit"  value="添加"><br/>
    </div>
    </form>
      </div>
      </div>
</body>
</html>

以上是前端记账部分的代码

<%@page import="com.zzw.entity.Bill"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*这里很关键*/
 
        .outer-wrap{
            /*只有同时为html和body设置height: 100%时，这里的height才生效，
            并且随浏览器窗口变化始终保持和浏览器视窗等高*/
            height: 100%;    
            position: relative;
            background-image: url('images/01.jpg');
        }
        .info-panel{
            width: 400px;
            height: 300px;
            background-image: url('images/05.jpg');
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
<body>
      <%
         request.setCharacterEncoding("utf-8");
         String message=(String)request.getAttribute("message");
         if(message!=null){
         if(message.equals("error")){
             %>
             <script type="text/javascript">
              alert("操作失败");
         </script>
         <%
      }else if(message.equals("noerror")){
          %>
          <script type="text/javascript">
              alert("操作成功");
         </script>
         <%
      }else{
      }
      }
      %>
<div class="outer-wrap">
      <div style="font-size:160px;text-align:center">家庭记账本</div>
      <div class="info-panel">
         <%
       Bill bill= (Bill)request.getAttribute("bill");
    %>
    <a href=index.jsp>返回系统首页</a><br>
    <form action="UpdateBillServlet">
    <div style="text-align:center">
             账目编号<input type="text" name="bid"  value="<%=bill.getBid() %>" readonly="readonly">
    </div>
        <div style="text-align:center">
             账目类型<input type="text" name="btype"  value="<%=bill.getBtype() %>" readonly="readonly">
    </div>
    <div style="text-align:center">
     金额<input type="text"  name="bmoney" value="<%=bill.getBmoney()%>"><br/>
    </div>
    <div style="text-align:center">
     日期<input type="date"  name="bdate" value="<%=bill.getBdate()%>"><br/>
    </div>
    <div style="text-align:center">
     备注<input type="text"  name="bremark" value="<%=bill.getBremark()%>"><br/>
    </div>
    <div style="text-align:center">
      <input type="submit" value="修改"><br/>
    </div>
    </form>
      </div>
      </div>
</body>
</html>

以上是查看账目用到的

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*这里很关键*/
 
        .outer-wrap{
            /*只有同时为html和body设置height: 100%时，这里的height才生效，
            并且随浏览器窗口变化始终保持和浏览器视窗等高*/
            height: 100%;    
            position: relative;
            background-image: url('images/01.jpg');
        }
        .register-panel{
            width: 400px;
            height: 250px;
            background-image: url('images/03.jpg');
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
<body>
<%
         request.setCharacterEncoding("utf-8");
         String message=(String)request.getAttribute("message");
         if(message!=null){
         if(message.equals("error")){
             %>
             <script type="text/javascript">
              alert("该用户名已被使用，请重试");
         </script>
         <%
      }else if(message.equals("noerror")){
          %>
          <script type="text/javascript">
              alert("注册成功");
         </script>
         <%
      }else{
      }
      }
      %>
 <div class="outer-wrap">
    
    <div style="font-size:160px;text-align:center">家庭记账本</div>
    <div class="register-panel">
    <div style="font-size:40px;text-align:center">注册界面</div>
    <form action="RegisterServlet" method="post">
    <div style="text-align:center">
    用户名<input type="text" style="width:300px;height:30px;text-align:center" name="uname"><br/>
    </div>
    <div style="text-align:center">
    密&nbsp&nbsp&nbsp码<input type="text" style="width:300px;height:30px;text-align:center" name="upwd"><br/>
    </div>
    <div style="text-align:center">
    <label>
                          性别<input type="radio" name="usex" value="男" checked> 男
             </label>
             <label>
             <input type="radio" name="usex" value="女" checked> 女
             </label>
    </div>
    <div style="text-align:center">   <input type="submit"  value="注册"><br/></div>
    <div style="text-align:center">  <a href="login.jsp" >已有账号，立即去登录</a>  </div>
    </form>
    </div>
    </div>
</body>
</html>

以上是登陆失败后选择的注册代码

<%@page import="com.zzw.entity.Bill"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按类型和日期查询账目</title>
</head>
<style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*这里很关键*/
 
        .outer-wrap{
            /*只有同时为html和body设置height: 100%时，这里的height才生效，
            并且随浏览器窗口变化始终保持和浏览器视窗等高*/
            height: 100%;    
            position: relative;
            background-image: url('images/01.jpg');
        }
        .screen-panel{
            width: 400px;
            height: 300px;
            background-image: url('images/05.jpg');
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
<body>
 <%
         request.setCharacterEncoding("utf-8");
         String message=(String)request.getAttribute("message");
         if(message!=null){
         if(message.equals("error")){
             %>
             <script type="text/javascript">
              alert("操作失败");
         </script>
         <%
      }else if(message.equals("noerror")){
          %>
          <script type="text/javascript">
              alert("操作成功");
         </script>
         <%
      }else{
      }
      }
      %>
<div class="outer-wrap">
      <div style="font-size:160px;text-align:center">家庭记账本</div>
      <div class="screen-panel">
      <a href=index.jsp>返回系统首页</a><br>
      <form action="QueryPartBillServlet" method="post" onsubmit="return checkName()">
      
    <div style="text-align:center;color:yellow">
             账目类型<select id="btype" name="btype">
            <option value="饮食">饮食</option>
            <option value="教育">教育</option>
            <option value="购物">购物</option>
            <option value="医疗">医疗</option>
            <option value="收入">收入</option>
            <option value="借贷">借贷</option>
            <option value="其它">其它</option>
        </select>
    </div>
    <div style="text-align:center;color:yellow">
     日期<input type="date"  name="bdate"><br/>
    </div>
   <div style="text-align:center;color:yellow">
     <input type="submit" class="btn btn-primary" value="查询"><br/>
    </div>
    </form>
<script src="jquery-3.4.1.min.js"></script>
    <script>
        function checkName() {
            var date = document.getElementById("bdate");
            if (date.value==null||date.value == "") {
                alert("请选择日期");
                return false;
            }
            return true;
        }
    </script>
          <table border="1px">
         <tr>
         <th>账目编号</th>
         <th>账目类型</th>
         <th>金额</th>
         <th>账目日期</th>
         </tr>
         <%
         List <Bill> bills =(List<Bill>) request.getAttribute("bills");
         if(bills!=null){
           for(Bill bill:bills){
               %>
               
               <tr>                   
                   <td><%=bill.getBid() %></td>
                   <td><%=bill.getBtype() %></td>
                   <td><%=bill.getBmoney() %></td>
                   <td><%=bill.getBdate() %></td>
                   <td><a href ="DeleteBillServlet?bid=<%=bill.getBid() %>">删除</a></td>
                   <td><a href="QueryBillServlet?bid=<%=bill.getBid() %>">查询</a></td>
               </tr>
               <%
           }
         }
         %>
      </table>
      </div>
      </div>
</body>
</html>

以上是按日期与类型查看账目的代码

<%@page import="com.zzw.entity.Bill"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按日期查询账目</title>
</head>
<style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*这里很关键*/
 
        .outer-wrap{
            /*只有同时为html和body设置height: 100%时，这里的height才生效，
            并且随浏览器窗口变化始终保持和浏览器视窗等高*/
            height: 100%;    
            position: relative;
            background-image: url('images/01.jpg');
        }
        .screen-panel{
            width: 400px;
            height: 300px;
            background-image: url('images/05.jpg');
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
<body>
 <%
         request.setCharacterEncoding("utf-8");
         String message=(String)request.getAttribute("message");
         if(message!=null){
         if(message.equals("error")){
             %>
             <script type="text/javascript">
              alert("操作失败");
         </script>
         <%
      }else if(message.equals("noerror")){
          %>
          <script type="text/javascript">
              alert("操作成功");
         </script>
         <%
      }else{
      }
      }
      %>
<div class="outer-wrap">
      <div style="font-size:160px;text-align:center">家庭记账本</div>
      <div class="screen-panel">
      <a href=index.jsp>返回系统首页</a><br>
      <form action="QueryDateServlet" method="post" onsubmit="return checkName()">
      
    <div style="text-align:center;color:yellow">
     日期<input type="date"  name="bdate"><br/>
    </div>
   <div style="text-align:center;color:yellow">
     <input type="submit" class="btn btn-primary" value="查询"><br/>
    </div>
    </form>
<script src="jquery-3.4.1.min.js"></script>
    <script>
        function checkName() {
            var date = document.getElementById("bdate");
            if (date.value==null||date.value == "") {
                alert("请选择日期");
                return false;
            }
            return true;
        }
    </script>
          <table border="1px">
         <tr>
         <th>账目编号</th>
         <th>账目类型</th>
         <th>金额</th>
         <th>账目日期</th>
         </tr>
         <%
         List <Bill> bills =(List<Bill>) request.getAttribute("bills");
         if(bills!=null){
           for(Bill bill:bills){
               %>
               
               <tr>                   
                   <td><%=bill.getBid() %></td>
                   <td><%=bill.getBtype() %></td>
                   <td><%=bill.getBmoney() %></td>
                   <td><%=bill.getBdate() %></td>
                   <td><a href ="DeleteBillServlet?bid=<%=bill.getBid() %>">删除</a></td>
                   <td><a href="QueryBillServlet?bid=<%=bill.getBid() %>">查询</a></td>
               </tr>
               <%
           }
         }
         %>
      </table>
      </div>
      </div>
</body>
</html>

以上是按账目类型查看账目的前端代码。

运行结果如下：

 

 实现了数据库的使用方法如下：

 

 

 

 以上即为家庭记账本的数据库的结构。

 

 

 

 

 

 

 

 

 

 

 

 

 

 以上是运行截图

标签
html代码
text-align
string
position
input
font
margin
bills
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!