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内容如下

     {% extends 'base.html'%}
     {% block page-header %}
         Crm Dashboard
     {% endblock %}

访问如图:

4.创建一个新的html,新的URL,新的views用来展示用户列表
crm/urls.py

     from django.conf.urls import url
     from crm import views

     urlpatterns = [
         url(r'^$', views.dashboard),
         url(r'^customers/$', views.customers),
     ]

crm/views.py

     from django.shortcuts import render

     # Create your views here.

     def dashboard(request):
         return render(request,'crm/dashboard.html')
     def customers(request):
         return render(request,'crm/customers.html')

创建templates/crm/customers.html

     {% extends 'base.html' %}
     {% block page-header %}
         Customers List
     {% endblock %}
     {% block page-content %}

     {% endblock%}

完成后我们来看下效果:

我们显示用户的列表的时候,使用table比较合适.所以我们可以从bootstrap上直接下表格的代码,让我们的页面上去更为美观.
访问www.bootcss.com,在全局CSS样式中找到表格项,然后找到你认为好看的表格样式,复制代码,在加上自己的table,我选中的代码如下:

     {% extends 'base.html' %}
     {% block page-header %}
         Customers List
     {% endblock %}
     {% block page-content %}
         <table class="table table-hover">
             <thead>
                 <tr>
                     <th>ID</th>
                     <th>QQ</th>
                     <th>姓名</th>
                     <th>渠道</th>
                     <th>咨询课程</th>
                     <th>课程类型</th>
                     <th>客户备注</th>
                     <th>状态</th>
                     <th>课程顾问</th>
                     <th>日期</th>
                 </tr>
             </thead>
             <tbody>
             {% for coustomer in customer_list %}
                 <tr>
                     <td>{{coustomer.id}}</td>
                     <td>{{coustomer.qq}}</td>
                     <td>{{coustomer.name}}</td>
                     <td>{{coustomer.source}}</td>
                     <td>{{coustomer.course}}</td>
                     <td>{{coustomer.course_type}}</td>
                     <td>{{coustomer.consult_memo}}</td>
                     <td>{{coustomer.status}}</td>
                     <td>{{coustomer.consultant}}</td>
                     <td>{{coustomer.date}}</td>
                 </tr>
             {% endfor %}
             </tbody>
         </table>
     {% endblock%}

coustomer.html

浏览器截图:

然后我们更改crm/views.py如下:

     from django.shortcuts import render
     from crm import models  # 引入models
     # Create your views here.

     def dashboard(request):
         return render(request,'crm/dashboard.html')
     def customers(request):
         customer_list = models.Customer.objects.all()  # 获取纪录列实例列表
         # print(customer_list)
         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/,结果如图: