接下来就是将后台视图与前端页面结合起来了完成后台系统了. 实现前端展示用户列表 1.先在base.html代码中把模版中Dashboard下面的内容清空,如下:

具体删除哪些html代码,自己找吧. 2.我们看到Dashboard和空白区域,这里两块内容都应该是可以更改的. 所以还要编辑这两块区域,给这两块区域加上{% block %} 编辑base.html,更改内容

     
      
            
      
{% block page-header %}Your page header{% endblock %}
      {
    % block page-content %}        putyour content here      {
    % endblock %}    
     

这样我们就可以在继承base.html文件的时候,重写这两块的内容了. 3.更改crm/dashboard.html内容如下

1     {% extends 'base.html'%}2     {% block page-header %}3         Crm Dashboard4     {% endblock %}

访问如图:

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

1     from django.conf.urls import url2     from crm import views3 4     urlpatterns = [5         url(r'^$', views.dashboard),6         url(r'^customers/$', views.customers),7     ]

crm/views.py

1     from django.shortcuts import render2 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 List4     {% endblock %}5     {% block page-content %}6     17     28     {% 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         
      
        7             
         8                 
          9                     
10                     
11                     
12                     
13                     
14                     
15                     
16                     
17                     
18                     
19                 
20             
21             
        22             {% for coustomer in customer_list %}23                 
         24                     
25                     
26                     
27                     
28                     
29                     
30                     
31                     
32                     
33                     
34                 
35             {% endfor %}36             
37         
       
        
         
ID
         
QQ
         
姓名
         
渠道
         
咨询课程
         
课程类型
         
客户备注
         
状态
         
课程顾问
         
日期
        
       
       
        
         
{
    {coustomer.id}}
         
{
    {coustomer.qq}}
         
{
    {coustomer.name}}
         
{
    {coustomer.source}}
         
{
    {coustomer.course}}
         
{
    {coustomer.course_type}}
         
{
    {coustomer.consult_memo}}
         
{
    {coustomer.status}}
         
{
    {coustomer.consultant}}
         
{
    {coustomer.date}}
        
       
      
38     {% endblock%}

浏览器截图:

然后我们更改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(中文),通过后台展示的时候可以 把 {
  {coustomer.course_type}} 改成: {
  {coustomer.get_course_type_display}} 把 {
  {coustomer.status}} 改成: {
  {coustomer.get_status_display}} 对于客户备注内容显示过多的问题用一个Django模版语法中的truncatewords标签 把 {
  {coustomer.consult_memo}} 改成  {
  {coustomer.consult_memo|truncatechars:20}} 我们在看下更改后的浏览效果:

下面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样式文件         找到         
             在下面加一行如下内容:         
         3.更改customers.html文件         把 {
  {coustomer.get_status_display}} 改成  {
  { coustomer.get_status_display }}      4. 访问http://127.0.0.1:8000/crm/customers/,结果如图: