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

其他 2020-02-08 15:50:49 阅读次数: 0 
<%@ 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>

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

运行结果如下：

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

 

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

 

 

 

 

 

 

 以上是运行截图

猜你喜欢

转载自www.cnblogs.com/520520520zl/p/12283552.html
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022