Bob's Blog

通过前面的文章的操作，已经能展示数据在页面了。现在就会添加按钮、下拉框等控件，并新建记账数据并保存。

先添加一个列表组(List Group)并带上徽章(Badge)，以美化账户的界面。

将html中account-overview的部分更新为如下内容，此时会应用上bootstrap的列表组的css表现，并且会用上font awesome的图标。

<div id="account-overview" align="center">
    <ul class="list-group">
        {% for account in accounts %}
        <li class="list-group-item d-flex justify-content-between align-items-center">
            {% if account.amount > 0 %}
            <span><i class="{{ account.icon }}"></i>&ensp;{{ account.name }}</span><span class="badge badge-pill badge-success">{{ account.amount }}</span>
            {% else %}
            <span><i class="{{ account.icon }}"></i>&ensp;{{ account.name }}</span><span class="badge badge-pill badge-danger">{{ account.amount }}</span>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>

会变成这个样子：

接着再添加下拉框、输入组、按钮、文本框等，用于记录账单。

先更新views.py以返回更多的数据到前端。

from django.shortcuts import render
from .models import *

def index(request):
    all_accounts = Account.objects.all()
    categories = Category.objects.all()
    sub_categories = SubCategory.objects.all()
    currencies = Currency.objects.all()
    ie_types = []
    for t in Category.CATEGORY_TYPES:
        ie_types.append(t[0])
    context = {
        'accounts': all_accounts,
        'categories': categories,
        'sub_categories': sub_categories,
        'currencies': currencies,
        'ie_types': ie_types
               }
    return render(request, 'accounting/index.html', context)

接着把category-overview改成history-records-overview，并把这部分的内容修改如下：

<div class="col-lg-6 mb-6" id="history-records-overview" align="center">
    <div class="form-row">
        <div class="col-md-4 mb-3">
            <select class="custom-select" id="ie-type-list">
                {% for ie in ie_types %}
                <option>{{ ie }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-4 mb-3">
            <select class="custom-select" id="category-list">
                {% for c in categories %}
                <option value="{{ c.id }}">{{ c.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-4 mb-3">
            <select class="custom-select" id="sub-category-list">
                {% for sc in sub_categories %}
                <option value="{{ sc.id }}">{{ sc.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-row">
        <div class="col-md-5 mb-3">
            <div class="input-group">
                <div class="input-group-prepend">
                    <select class="custom-select" id="currency-list">
                    {% for c in currencies %}
                    <option value="{{ c.id }}">{{ c.name }}</option>
                    {% endfor %}
                    </select>
                </div>
                <input type="text" aria-label="Money Amount" placeholder="金额" class="form-control">
            </div>
        </div>
        <div class="col-md-7 mb-3">
            <input type="text" aria-label="Comment" placeholder="备注" class="form-control">
        </div>
    </div>
    <button type="submit" class="btn btn-info btn-block">记录账单</button>
    <br>
    <h5>当月账单列表</h5>
    <hr width="90%" class="main-separator"/>
</div>

添加新的控件后，比起上一篇的界面，这样看起来是不是好看一点？

不过数据是默认展示了所有，而忽略了类别之间的从属关系。于是接下来需要通过不同的选项来加载不同的数据。