前后端分离的架构
前面，我们的数据展示在界面上是这样的
很不好看。
因为我们返回的其实就是字符串，并不是HTML。
要好看一些，我们可以使用HTML来展示数据。
代码直接生成HTML
HTML本身其实也是字符串，只是这个字符串里面的内容是符合HTML语言规范的。
既然它也是字符串，我们可以使用Python直接构建出 HTML 字符串内容。
修改
# 先定义好HTML模板
html_template ='''
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>id</th>
<th>姓名</th>
<th>电话号码</th>
<th>地址</th>
</tr>
%s
</table>
</body>
</html>
'''
def listcustomers(request):
# 返回一个 QuerySet 对象 ，包含所有的表记录
qs = Customer.objects.values()
# 检查url中是否有参数phonenumber
ph = request.GET.get('phonenumber',None)
# 如果有，添加过滤条件
if ph:
qs = qs.filter(phonenumber=ph)
# 生成html模板中要插入的html片段内容
tableContent = ''
for customer in qs:
tableContent += '<tr>'
for name,value in customer.items():
tableContent += f'<td>{value}</td>'
tableContent += '</tr>'
return HttpResponse(html_template%tableContent)
我们用一个变量 html_template 存储html模板， 然后 代码中生成html 里面需要插入的表格记录的内容，这个内容是html片段，也就是 html 表格的每行 。
最后填入到 html_template 模板里面，就产生了完整的HTML 字符串。
最后返回该 html 文档 字符串 即可。
修改后，再次访问 http://127.0.0.1/sales/customers/
得到如下内容
使用模板
上面我们是用Python代码直接拼接出html内容。
但是这种方式，我们代码处理比较麻烦。特别是，如果html里面有多处内容需要填入，使用Python代码直接拼接就显得很繁杂，不好维护。
很多后端框架都提供了一种 模板技术， 可以在html 中嵌入编程语言代码片段， 用模板引擎（就是一个专门处理HTML模板的库）来动态的生成HTML代码。
比如JavaEE 里面的JSP。
Python 中有很多这样的模板引擎 比如 jinja2 、Mako， Django也内置了一个这样的模板引擎。
我们修改一下代码，使用Django的模板引擎
# 先定义好HTML模板
html_template ='''
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>id</th>
<th>姓名</th>
<th>电话号码</th>
<th>地址</th>
</tr>
{% for customer in customers %}
<tr>
{% for name, value in customer.items %}
<td>{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</body>
</html>
'''
from django.template import engines
django_engine = engines['django']
template = django_engine.from_string(html_template)
def listcustomers(request):
# 返回一个 QuerySet 对象 ，包含所有的表记录
qs = Customer.objects.values()
# 检查url中是否有参数phonenumber
ph = request.GET.get('phonenumber',None)
# 如果有，添加过滤条件
if ph:
qs = qs.filter(phonenumber=ph)
# 传入渲染模板需要的参数
rendered = template.render({'customers':qs})
return HttpResponse(rendered)
然后，访问浏览器，可以得到一样的结果。
对比 Python直接产生 HTML，大家可以发现，使用模板引擎的好处，就是产生HTML的代码更简单方便了。
因为我们可以直接把要生成的 HTML片段 写在 HTML模板 里面。
然后，只需要传入渲染模板所需要的参数就可以了，模板引擎会自动化帮我们生成的HTML
上面只是一种模板用法的简单演示。
关于Django模板的详细用法，大家可以参考官方文档。
前后端分离架构
有了模板引擎，对我们后端开发来说，简化了程序员后端生成HTML的任务，提高了开发效率。
但是，通常后端开发人员的核心任务不是开发前端界面， 而且大部分后端开发人员对前端界面开发还是不熟悉的。
前端界面的开发还是得由前端人员去做。
如果动态的界面内容都是由后端模板生成， 就意味着前端开发人员要接触后端的模板。
比如这里，就需要他们了解Django的HTML模板。
或者需要前端人员提供他们做好的HTML， 交给后端人员，再由后端人员把它修改成Django模板。
这样有什么问题？
-
不利于前后端开发任务的分离，前后端开发人员要做额外的沟通。
-
如果前端除了web浏览器，还有手机APP的话， APP 不需要服务端返回HTML, 就得再开发一套数据接口
-
渲染任务在后端执行，大大的增加了后端的性能压力。
尤其是有的HTML页面很大， 当有大量的用户并发访问的时候， 后端渲染工作量很大，很耗费CPU 资源。
现在随着 浏览器中javascript 解释器性能的突飞猛进，以及一些前端模板库和框架的流行。很多架构师将 页面的html 内容生成 的任务放到前端。
这样 服务端就只负责提供数据， 界面的构成全部在前端（浏览器前端或者手机前端）进行，称之为前端渲染。
只是这个工作在前端执行， 使用前端的 框架库去完成，比如 Angular，React，Vue。
这样 界面完全交给前端开发人员去做， 后端开发只需要提供前端界面所需要的数据就行了。
前端 和 后端 之间的交互就完全是 业务数据了。
这样需要 定义好 前端和后端 交互数据 的接口。
目前通常这样的接口设计最普遍的就是使用 REST 风格的 API 接口。
前端通过 API 接口 从后端获取数据展示在界面上。
前端通过 API 接口 告诉后端需要更新的数据是什么。
通常 前后端的 API 接口 是由 架构师 设计的， 有时也可以由经验丰富的前端开发者、或者后端开发者设计。
接下来我们就聚焦在后端，我们的系统前端由另外的团队开发，我们只负责后端业务数据的维护
现在我们的系统，API接口 已经由架构师定义好了， 点击这里查看
我们只需要根据这个接口文档，实现后端系统的部分。
注意：需要Django返回的信息，通常都是所谓的 动态 数据信息。 比如：用户信息，药品信息，订单信息，等等。
这些信息通常都是存在数据库中，这些信息是会随着系统的使用发生变化的。
而 静态 信息，比如： 页面HTML文档、css文档、图片、视频等，是不应该由 Django 负责返回数据的。
这些数据通常都是由其他的 静态资源服务软件，比如 Nginx、Varnish等等，返回给前端。这些软件都会有效的对静态数据进行缓存，大大提高服务效率。在实际的项目中，往往还会直接使用 静态文件 云服务（ OSS + CDN ）提供静态数据的访问服务。
总之，Django处理并返回的应该是动态业务数据信息。
目前为止，我们项目代码，在如下百度网盘中的 bysms_04.zip
百度网盘链接：https://pan.baidu.com/s/1nUyxvq6IYykBNtPUf4Ho6w 提取码：9w2u