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

												

python2.0_s12_day19_前端结合后端展示客户咨询纪录的更多相关文章

  1. python2.0_s12_day19_前端模版使用

    Django中引用bootstrap实现在前端可以创建客户信息,可以修改客户信息我们需要设计一个前端用户交互系统.我们在设计之前,讨论一些需求:前端实现:1. 不同角色的用户,看到的东西是不一样的 销 ...

  2. 巨蟒django之CRM2 展示客户列表&&分页

    1.展示客户列表 点击画红线中的views,进入下列界面 路径的查找顺序:应该是先查找外层的templates里边的html,然后查找app里边的templates 另一个会按照app的顺序进行寻找, ...

  3. [转载]Web前端和后端之区分,以及面临的挑战

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  4. Web前端和后端之区分,以及…

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  5. [转载]Web前端和后端之区分,以及面临的挑战【转】

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  6. Spring MVC之中前端向后端传数据

    Spring MVC之中前端向后端传数据和后端向前端传数据是数据流动的两个方向, 在此先介绍前端向后端传数据的情况. 一般而言, 前端向后端传数据的场景, 大多是出现了表单的提交,form表单的内容在 ...

  7. 看完让你彻底理解 WebSocket 原理,附完整的实战代码(包含前端和后端)

    1.前言 最近有同学问我有没有做过在线咨询功能.同时,公司也刚好让我接手一个 IM 项目.所以今天抽时间记录一下最近学习的内容.本文主要剖析了 WebSocket 的原理,以及附上一个完整的聊天室实战 ...

  8. bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页

    1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...

  9. java前端与后端怎么选??

    想做这个行业,就应该了解职能以及技能需求,这样学习才能更高效.我知道一些刚刚入行的小伙伴不清楚前端.后端.到底指的是什么?两者直接的区别 前端开发 前端开发主要涉及网站和App,用户能够从浏览器上或A ...

随机推荐

  1. vim复制粘贴常用命令

    在Windows下我们习惯的操作,复制单个字符,复制单行多行,删除单行多行,在linux的vim中操作如下: G(shift+g+g):跳到文档尾 g+g:跳转到文档首 home键:光标移动到行首 e ...

  2. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. Python+Django+SAE系列教程12-----配置MySQL数据库

    由于SAE上支持的是Mysql,首先我们要在本地配置一个Mysql的环境 ,我在网上找到MySQL-python-1.2.4b4.win32-py2.7.exe,并双击 安装 选择典型安装 安装结束后 ...

  4. elasticsearch介绍

    elasticsearch是一个基于lucene所编写的分布式的搜索引擎,能够达到实时搜索,稳定高效. 我所了解的elasticsearch有下面这些特点 1 配置简单,对于初学者来说几乎是下载后零配 ...

  5. 线程安全的atomic wrapper classes例子

    先参考一个例子 http://www.cnblogs.com/aigongsi/archive/2012/04/01/2429166.html#!comments 即使只是i++,实际上也是由多个原子 ...

  6. Java:单例模式的七种写法<转>

    第一种(懒汉,线程不安全):  1 public class Singleton {   2     private static Singleton instance;   3     privat ...

  7. Android——FileOutputStream与openFileOutput()的区别分析【第一个用于文件存储,第二个用于SD卡存储】【转】

    本文实例分析了Android编程中FileOutputStream与openFileOutput()的区别.分享给大家供大家参考,具体如下: openFileOutput() 首先给大家介绍使用文件如 ...

  8. Hive UDF IP解析(二):使用geoip2数据库自定义UDF

    开发中经常会碰到将IP转为地域的问题,所以以下记录Hive中自定义UDF来解析IP. 使用到的地域库位maxmind公司的geoIP2数据库,分为免费版GeoLite2-City.mmdb和收费版Ge ...

  9. Python idle安装与使用教程 调试、下载

    Python idle安装与使用教程 调试.下载 今天我们就来讲一下如何安装Python idle编辑器,也它的调试和使用. 第一步,我们先去下载一个Python idle程序安装包. 本节讲的是wi ...

  10. CentOS每次开机都要ifup eth0的解决方法小结

    vim /etc/sysconfig/network-scripts/ifcfg-eth0 把里面的 ONBOOT 设为 yes 即可. [编辑]艺搜参考 http://www.jbxue.com/L ...