返回

美化宝宝账单首页

前端

做项目就是不断的改需求，业务方经常说「我觉得这个不好用，能不能改成那样」。

昨天说历史账单不好用，历史账单页面查看起来很麻烦，今天咱们就优化一下，根据时间进行筛选。优化首页就是增加时间筛选条件，让前端妹子在添加筛选功能的时候方便一些，不必再在后台对账单进行额外查询。

好的，打开之前写好的history.js。

$(function () {
  $('#date_range').daterangepicker({
    ranges: {
      '今天': [moment(), moment()],
      '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      '本周': [moment().startOf('isoWeek'), moment().endOf('isoWeek')],
      '上周': [moment().subtract(1, 'weeks').startOf('isoWeek'), moment().subtract(1, 'weeks').endOf('isoWeek')],
      '本月': [moment().startOf('month'), moment().endOf('month')],
      '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    startDate: moment().subtract(29, 'days'),
    endDate: moment()
  }, function (start, end, label) {
    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
  });

  $('#date_range').on('apply.daterangepicker', function (ev, picker) {
    $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
    queryList(picker.startDate.format('YYYY-MM-DD'), picker.endDate.format('YYYY-MM-DD'))
  });
});

以上代码就是时间筛选功能的代码了，如果没有时间选择器这一步，那就没有办法根据时间来进行查询，这个功能也是必须添加的，代码很简单，把时间范围和时间查询加到我们的代码里就行了。

昨天讲完了历史查询，今天咱们来聊一聊添加、修改和删除账单。

在index页面，有两个按钮「添加账单」和「删除账单」，这个两个按钮都是点击打开一个弹出框，本质都是从数据库读取数据，再填到一个弹出框中，然后再保存或者删除。这样做的目的是为了防止用户误操作。

先打开add.html，添加的html很简单。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/add.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>添加账单</h1>
      <hr>
      <form id="addForm">
        <div class="form-group">
          <label for="name">消费类型</label>
          <input type="text" class="form-control" id="name" placeholder="请输入消费类型">
        </div>
        <div class="form-group">
          <label for="money">消费金额</label>
          <input type="text" class="form-control" id="money" placeholder="请输入消费金额">
        </div>
        <div class="form-group">
          <label for="date">消费日期</label>
          <input type="date" class="form-control" id="date" placeholder="请输入消费日期">
        </div>
        <div class="form-group">
          <label for="remark">备注</label>
          <input type="text" class="form-control" id="remark" placeholder="请输入备注">
        </div>
        <button type="submit" class="btn btn-primary">添加</button>
      </form>
    </div>
  </div>
</div>

<script src="/static/js/jquery-3.6.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/add.js"></script>
</body>
</html>

代码写得非常简单，通过id获取到值，然后交给后台。

接着看add.js，通过js拿到数据，然后再把数据提交到后台，最后再更新页面。

$(function () {
  $('#addForm').submit(function (e) {
    e.preventDefault();

    var name = $('#name').val();
    var money = $('#money').val();
    var date = $('#date').val();
    var remark = $('#remark').val();

    $.ajax({
      url: '/add',
      type: 'POST',
      data: {
        name: name,
        money: money,
        date: date,
        remark: remark
      },
      success: function (data) {
        if (data.code === 0) {
          alert('添加成功');
          window.location.reload();
        } else {
          alert(data.msg);
        }
      },
      error: function () {
        alert('添加失败');
      }
    });
  });
});

添加好了之后，再写一个删除账单的页面，思路和添加账单的页面是一样的，都是先获取到需要的值，然后再传递到后台，最后再更新页面。

先写del.html。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/del.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>删除账单</h1>
      <hr>
      <form id="delForm">
        <div class="form-group">
          <label for="id">账单ID</label>
          <input type="text" class="form-control" id="id" placeholder="请输入账单ID">
        </div>
        <button type="submit" class="btn btn-primary">删除</button>
      </form>
    </div>
  </div>
</div>

<script src="/static/js/jquery-3.6.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/del.js"></script>
</body>
</html>

接着写del.js，先获取到值，再传到后台，最后更新页面。

$(function () {
  $('#delForm').submit(function (e) {
    e.preventDefault();

    var id = $('#id').val();

    $.ajax({
      url: '/del',
      type: 'POST',
      data: {
        id: id
      },
      success: function (data) {
        if (data.code === 0) {
          alert('删除成功');
          window.location.reload();
        } else {
          alert(data.msg);
        }
      },
      error: function () {
        alert('删除失败');
      }
    });
  });
});

edit.html与add.html本质上是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/edit.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>编辑账单</h1>
      <hr>
      <form id="editForm">
        <div class="form-group">
          <label for="id">账单ID</label>
          <input type="text" class="form-control" id="id" placeholder="请输入账