首先，今天使用BootStrap对记账本的首页进行了重构，首先是首页效果图：
其中左边的导航使用了BootStrap的默认样式，右边的联系我们添加了一个链接到我的QQ的超链接，是QQ提供的一个外部服务。以下是代码部分：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>--> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 11 <title>记账本</title> 12 <!-- 引入Bootstrap核心样式文件 --> 13 <link href="css/bootstrap.css" rel="stylesheet"> 14 <!-- 引入jQuery核心js文件 --> 15 <script src="./js/jquery-1.11.3.min.js"></script> 16 <!-- 引入BootStrap核心js文件 --> 17 <script src="./js/bootstrap.js"></script> 18 </head> 19 <body> 20 <div class="container-fluid" style="margin-top: 15px;"> 21 <div class="row"> 22 <!-- 导航条部分 --> 23 <div class="col-lg-11"> 24 <ul class="nav nav-pills"> 25 <li role="presentation" style="font-size:20px;"><a href="begin.html">开始记账</a></li> 26 <li role="presentation" style="font-size:20px"><a href="sum.html">账单汇总</a></li> 27 <li role="presentation" style="font-size:20px"><a href="#">图表数据</a></li> 28 <li role="presentation" style="font-size:20px"><a href="#">进入后台</a></li> 29 </ul> 30 </div> 31 <div class="col-lg-1" style="padding-top: 15px;"> 32 <a href="tencent://message/?uin=1098577802&Site=&Menu=yes"><font color="red";>联系我们</font></a> 33 </div> 34 </div> 35 </div> 36 <div class="container-fluid" style="margin-top: 240px;"> 37 <p style="font-family: 华文行楷; font-size:100px; text-align: center;">欢迎使用记账本!</p> 38 </div> 39 </body> 40 41 </html>
点击开始记账后，进入记账界面，如下图：
其中图标来自于BootStrap的说明文档提供的开源图标，点击后会弹出一个添加窗口：
本来想在这里实现一个选择日期的插件，但怎么样都无法实现。
下面是使用了BootStrap的默认表格样式,其中鼠标移到哪里哪里就会高亮。
代码如下：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>--> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 11 <title>记账本</title> 12 <!-- 引入Bootstrap核心样式文件 --> 13 <link href="css/bootstrap.min.css" rel="stylesheet"> 14 <!-- 引入jQuery核心js文件 --> 15 <script src="./js/jquery-1.11.3.min.js"></script> 16 <!-- 引入BootStrap核心js文件 --> 17 <script src="./js/bootstrap.js"></script> 18 </head> 19 <body> 20 <div class="container-fluid" style="margin-top: 15px;"> 21 <div class="row"> 22 <!-- 导航条部分 --> 23 <div class="col-lg-11"> 24 <ul class="nav nav-pills"> 25 <li role="presentation" style="font-size:20px;"><a href="begin.html">开始记账</a></li> 26 <li role="presentation" style="font-size:20px"><a href="sum.html">账单汇总</a></li> 27 <li role="presentation" style="font-size:20px"><a href="#">图表数据</a></li> 28 <li role="presentation" style="font-size:20px"><a href="#">进入后台</a></li> 29 </ul> 30 </div> 31 <div class="col-lg-1" style="padding-top: 15px;"> 32 <a href="tencent://message/?uin=1098577802&Site=&Menu=yes"> 33 <font color="red" ;>联系我们</font> 34 </a> 35 </div> 36 </div> 37 </div> 38 <!-- 添加 --> 39 <div class="container-fluid"> 40 <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal"> 41 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 42 </button> 43 <!-- Modal --> 44 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 45 <div class="modal-dialog" role="document"> 46 <div class="modal-content"> 47 <div class="modal-header"> 48 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 49 <h4 class="modal-title" id="myModalLabel">新增消费项</h4> 50 </div> 51 <div class="modal-body"> 52 <form action="#" method="get"> 53 <div class="form-group"> 54 <label for="exampleInputEmail1">消费时间</label> 55 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Time" name="time"> 56 </div> 57 <div class="form-group"> 58 <label for="exampleInputPassword1">种类</label> 59 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Type" name="type"> 60 </div> 61 <div class="form-group"> 62 <label for="exampleInputPassword1">金额</label> 63 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Cost" name="cost"> 64 </div> 65 <button type="submit" class="btn btn-primary" style="margin-left: 520px;">添加</button> 66 </form> 67 </div> 68 </div> 69 </div> 70 </div> 71 </div> 72 <!-- 显示部分 --> 73 <div class="container-fluid"> 74 <table class="table table-hover"> 75 <thead style="font-size: 20px;color:#46B8DA"> 76 <tr> 77 <td>编号</td> 78 <td>时间</td> 79 <td>种类</td> 80 <td>金额</td> 81 <td>操作</td> 82 </tr> 83 </thead> 84 <tbody> 85 <tr> 86 <td></td> 87 <td></td> 88 <td></td> 89 <td></td> 90 <td> 91 <button type="button" class="btn btn-default btn-lg"> 92 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 93 </button> 94 <button type="button" class="btn btn-default btn-lg"> 95 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 96 </button> 97 </td> 98 </tr> 99 </tbody> 100 </table> 101 </div> 102 </body> 103 104 </html>begin.html
之后做了一个账单汇总页：
在这里实现了日期控件的使用。预计在下面添加一个表格，但还没想好具体细节。暂时没加。
剩下两个界面的具体细节都还没想好，等日后再添加。
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>记账本</title>
<!-- 引入Bootstrap核心样式文件 -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<!-- 引入jQuery核心js文件 -->
<script src="./js/jquery-1.11.3.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="./js/bootstrap.js"></script>
<script src="js/moment-with-locales.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
$(function(){
var picker1 = $('#datetimepicker1').datetimepicker({
format: 'yyyy-mm-dd',
locale: moment.locale('ZH-CN'),
minDate: '2016-7-1',
minView: "month",
autoclose: true
});
var picker2 = $('#datetimepicker2').datetimepicker({
format: 'yyyy-mm-dd',
locale: moment.locale('zh-cn'),
minView: "month",
minDate: '2016-7-1',
autoclose: true,
});
picker1.on('dp.change', function (e) {
picker2.data('DateTimePicker').minDate(e.date);
});
picker2.on('dp.change', function (e) {
picker1.data('DateTimePicker').maxDate(e.date);
});
})
</script>
</head>
<body>
<div class="container-fluid" style="margin-top: 15px;">
<div class="row">
<!-- 导航条部分 -->
<div class="col-lg-11">
<ul class="nav nav-pills">
<li role="presentation" style="font-size:20px;"><a href="begin.html">开始记账</a></li>
<li role="presentation" style="font-size:20px"><a href="#">账单汇总</a></li>
<li role="presentation" style="font-size:20px"><a href="#">图表数据</a></li>
<li role="presentation" style="font-size:20px"><a href="#">进入后台</a></li>
</ul>
</div>
<div class="col-lg-1" style="padding-top: 15px;">
<a href="tencent://message/?uin=1098577802&Site=&Menu=yes">
<font color="red" ;>联系我们</font>
</a>
</div>
</div>
</div>
<!-- 查询栏 -->
<div class="container-fluid">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label>选择开始时间：</label>
<!--指定 date标记-->
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-5'>
<div class="form-group">
<label>选择结束时间：</label>
<!--指定 date标记-->
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-1" style="margin-top: 25px;">
<button type="button" class="btn btn-primary">计算总额</button>
</div>
</div>
</div>
</body>
</html>
sum.html
关于课程学习，今天复习了mysql的操作和JDBC的基础操作，因为已经学习过，所以只是对其进行了大致回顾。
今日遇到的问题：日期控件的使用十分反人类。在百度搜索到使用方法后，对其进行了使用。并摸清了一些基本参数,如format(格式),minData(最小日期),autoclose(点击后自动关闭)，但对于如何在弹出窗口使用日期控件还不明确。
明日任务：学习JDBC连接池和DBUtils(工具类)