python2.0_s12_day19_前端结合后端展示客户咨询纪录

接下来就是将后台视图与前端页面结合起来了完成后台系统了.
实现前端展示用户列表
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 %}


访问如图:

python2.0_s12_day19_前端结合后端展示客户咨询纪录

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%}

完成后我们来看下效果:

python2.0_s12_day19_前端结合后端展示客户咨询纪录


我们显示用户的列表的时候,使用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