接下来就是将后台视图与前端页面结合起来了完成后台系统了.
实现前端展示用户列表
1.先在base.html代码中把模版中Dashboard下面的内容清空,如下:
具体删除哪些html代码,自己找吧.
2.我们看到Dashboard和空白区域,这里两块内容都应该是可以更改的.
所以还要编辑这两块区域,给这两块区域加上{% block %}
编辑base.html,更改内容
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<!--<h1 class="page-header">Dashboard</h1>-->
<h1 class="page-header">{% block page-header %}Your page header{% endblock %}</h1>
{% block page-content %}
putyour content here
{% endblock %}
</div>
这样我们就可以在继承base.html文件的时候,重写这两块的内容了.
3.更改crm/dashboard.html内容如下
1 {% extends 'base.html'%}
2 {% block page-header %}
3 Crm Dashboard
4 {% endblock %}
访问如图:
4.创建一个新的html,新的URL,新的views用来展示用户列表
crm/urls.py
1 from django.conf.urls import url
2 from crm import views
3
4 urlpatterns = [
5 url(r'^$', views.dashboard),
6 url(r'^customers/$', views.customers),
7 ]
crm/views.py
1 from django.shortcuts import render
2
3 # Create your views here.
4
5 def dashboard(request):
6 return render(request,'crm/dashboard.html')
7 def customers(request):
8 return render(request,'crm/customers.html')
创建templates/crm/customers.html
1 {% extends 'base.html' %}
2 {% block page-header %}
3 Customers List
4 {% endblock %}
5 {% block page-content %}
6 1
7 2
8 {% endblock%}
完成后我们来看下效果:
我们显示用户的列表的时候,使用table比较合适.所以我们可以从bootstrap上直接下表格的代码,让我们的页面上去更为美观.
访问www.bootcss.com,在全局CSS样式中找到表格项,然后找到你认为好看的表格样式,复制代码,在加上自己的table,我选中的代码如下:
1 {% extends 'base.html' %}
2 {% block page-header %}
3 Customers List
4 {% endblock %}
5 {% block page-content %}
6 <table class="table table-hover">
7 <thead>
8 <tr>
9 <th>ID</th>
10 <th>QQ</th>
11 <th>姓名</th>
12 <th>渠道</th>
13 <th>咨询课程</th>
14 <th>课程类型</th>
15 <th>客户备注</th>
16 <th>状态</th>
17 <th>课程顾问</th>
18 <th>日期</th>
19 </tr>
20 </thead>
21 <tbody>
22 {% for coustomer in customer_list %}
23 <tr>
24 <td>{{coustomer.id}}</td>
25 <td>{{coustomer.qq}}</td>
26 <td>{{coustomer.name}}</td>
27 <td>{{coustomer.source}}</td>
28 <td>{{coustomer.course}}</td>
29 <td>{{coustomer.course_type}}</td>
30 <td>{{coustomer.consult_memo}}</td>
31 <td>{{coustomer.status}}</td>
32 <td>{{coustomer.consultant}}</td>
33 <td>{{coustomer.date}}</td>
34 </tr>
35 {% endfor %}
36 </tbody>
37 </table>
38 {% endblock%}
coustomer.html浏览器截图:
然后我们更改crm/views.py如下:
1 from django.shortcuts import render
2 from crm import models # 引入models
3 # Create your views here.
4
5 def dashboard(request):
6 return render(request,'crm/dashboard.html')
7 def customers(request):
8 customer_list = models.Customer.objects.all() # 获取纪录列实例列表
9 # print(customer_list)
10 return render(request,'crm/customers.html',{'customer_list':customer_list}) # 传给前端列表
我们访问http://127.0.0.1:8000/crm/customers/,结果如图:
我们看后台查询出的结果已经展示到前端页面上了,接下来 就是一些美观上的处理了.
美观上的处理大部分都是通过修改css,js来实现的.
首先我们先上图中的两个点优化
显示"课程类型"和"状态"字段时都是英文,我们知道这两个字段models中都是有选择的,(key,value)的形式.
数据库存的key(英文),不存value(中文),通过后台展示的时候可以
把 <td>{{coustomer.course_type}}</td> 改成: <td>{{coustomer.get_course_type_display}}</td>
把 <td>{{coustomer.status}}</td> 改成: <td>{{coustomer.get_status_display}}</td>
对于客户备注内容显示过多的问题用一个Django模版语法中的truncatewords标签
把 <td>{{coustomer.consult_memo}}</td> 改成 <td>{{coustomer.consult_memo|truncatechars:20}}</td>
我们在看下更改后的浏览效果:
下面Alex分享了一个前端应用技巧.
我们看状态分为四种:
('signed',u"已报名"),('unregistered',u"未报名"),('graduated',u"已毕业"),('drop-off',u"退学")
现在就几条纪录,假如几百条纪录,我想让每一种状态的背景颜色不一样.怎样实现
我们的思路:
首先是定义四种同的样式,然后对每一条纪录判读,每条纪录会在前端 if ... elif...elif...else 经历四次.
老师的思路:
同样创建四种样式,不同的是四种css样式的名称就分别以状态的key命名
.signed{} .unregistered{} .graduated{} .drop-off{}
同样是循环,不同的是,不用if...else...直接定义样式名
代码如下:
1.添加四种css样式
2. 更改base.html,引入自定义的css样式文件
找到
<link href="/static/bootstrap/css/dashboard.css" rel="stylesheet">
在下面加一行如下内容:
<link href="/static/bootstrap/css/custom.css" rel="stylesheet">
3.更改customers.html文件
把 <td>{{coustomer.get_status_display}}</td> 改成 <td class ="{{ coustomer.status }}"> {{ coustomer.get_status_display }} </td>
4. 访问http://127.0.0.1:8000/crm/customers/,结果如图:
