首先，今天使用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>
之后做了一个账单汇总页：
在这里实现了日期控件的使用。预计在下面添加一个表格，但还没想好具体细节。暂时没加。
剩下两个界面的具体细节都还没想好，等日后再添加。
代码如下：
<!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>
关于课程学习，今天复习了mysql的操作和JDBC的基础操作，因为已经学习过，所以只是对其进行了大致回顾。
今日遇到的问题：日期控件的使用十分反人类。在百度搜索到使用方法后，对其进行了使用。并摸清了一些基本参数,如format(格式),minData(最小日期),autoclose(点击后自动关闭)，但对于如何在弹出窗口使用日期控件还不明确。
明日任务：学习JDBC连接池和DBUtils(工具类)