用Django做一个简单的记账网站(二)建立初始页面
前一篇已经把相关的环境弄好了，在这里会建立第一个页面，把views的数据加载到template里的html中，并根据登录与否来展示内容，为后续的页面做准备。
先更新accounting/views.py:
from django.http import HttpResponse
def index(request):
return HttpResponse(HttpResponse.__doc__)
在accounting目录下新建urls.py，urls就代表路由，根据访问的地址来加载视图中的对应方法。
在urls.py中添加如下代码:
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
同时需要更新一下rdie/urls.py:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('accounting/', include('accounting.urls')), # 添加这一行
path('admin/', admin.site.urls),
]
rdie的url是对整个项目而言的路由，而accounting的url是对某个应用的路由，在这里就代表着http://127.0.0.1:8000/accounting/就会指向accounting的urls.py中的index。
当runserver后就能看到页面上显示了HttpResponse的doc文字，没有样式，因此我们需要创建html模板，并渲染数据展示到页面。
接下来在根目录创建文件夹: templates，并在其中创建子文件夹accounting，新建一个index.html文件，添加如下html内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/fontawesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
<title>记录收支</title>
</head>
<body>
<div class="sample">
<div class="dropdown" align="left" style="float:left; padding: 0px 20px">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
大类
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">餐饮</a>
<a class="dropdown-item" href="#">购物</a>
<a class="dropdown-item" href="#">娱乐</a>
</div>
</div>
<div class="record">
<button type="button" class="btn btn-info">记一笔</button>
</div>
</div>
</body>
</html>
我们在head中预先引用了bootstrap，font awesome，echarts，并添加了一个下拉框和一个按钮。
不过这个时候还不能正常显示。
需要把templates的路径放在settings.py中：
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], # 修改这一行
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
然后修改accounting/view.py中的index方法：
from django.shortcuts import render
def index(request):
return render(request, 'accounting/index.html')
此时再次runserver就能看到页面上多了下拉框和按钮，并且展示了bootstrap的样式。
现在有个问题就是个人的记账数据是比较私密的，并不希望对所有人展示，于是可以设定为登录后才可以看到。
通过user.is_authenticated来判断是否登录，未登录便只展示一个提示语。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/fontawesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
<title>记录收支</title>
</head>
<body>
{% if user.is_authenticated %}
<div class="sample">
<div class="dropdown" align="left" style="float:left; padding: 0px 20px">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
大类
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">餐饮</a>
<a class="dropdown-item" href="#">购物</a>
<a class="dropdown-item" href="#">娱乐</a>
</div>
</div>
<div class="record">
<button type="button" class="btn btn-info">记一笔</button>
</div>
</div>
{% else %}
<div class="unauthenticated">
<h3>Please login to view data or record expense</h3>
</div>
{% endif %}
</body>
</html>
接下来就可以自定义数据模型了。