06 前后端分离的架构

代码直接生成HTML

 1 # sales.views.py
 2 from django.shortcuts import render
 3 from django.http import HttpResponse
 4 # 导入Customer 对象定义
 5 from common.models import Customer
 6 
 7 
 8 def list_orders(request):
 9     return HttpResponse('路由子表:下面是系统中的所有订单信息')
10 
11 
12 # 先定义好HTML模板
13 html_template = '''
14 <!DOCTYPE html>
15 <html>
16 <head>
17 <meta charset="UTF-8">
18 <style>
19 table {
20     border-collapse: collapse;
21 }
22 th, td {
23     padding: 8px;
24     text-align: left;
25     border-bottom: 1px solid #ddd;
26 }
27 </style>
28 </head>
29     <body>
30         <table>
31         <tr>
32         <th>id</th>
33         <th>姓名</th>
34         <th>电话号码</th>
35         <th>地址</th>
36         </tr>
37         
38         %s
39         
40         
41         </table>
42     </body>
43 </html>
44 '''
45 
46 
47 def listcustomers(request):
48     # 返回一个 QuerySet对象，包含所有的表记录
49     # 每条表记录都是一个dict对象
50     # key 是字段名， value 是字段值
51     # objects是用来操作数据库的Manager接口
52     qs = Customer.objects.values()
53 
54     # 检查url中是否有参数phonenumber
55     ph = request.GET.get('phonenumber', None)
56 
57     # 如果有，添加过滤条件
58     if ph:
59         qs = qs.filter(phonenumber=ph)
60 
61     # # 定义返回给浏览器的字符串
62     # retStr = ''
63     # for customer in qs:
64     #     for name, value in customer.items():
65     #         retStr += f'{name} : {value} | '
66     #     # 一条记录结束后加一个<br>换行
67     #     retStr += '<br>'
68     #
69     # return HttpResponse(retStr)
70 
71     # 生成html模板中要插入的html片段内容
72     tableContent = ''
73     for customer in qs:
74         tableContent += '<tr>'
75         for name, value in customer.items():
76             tableContent += f'<td>{value}</td>'
77 
78         tableContent += '</tr>'
79 
80     return HttpResponse(html_template % tableContent)

使用模板

 1 # sales.views.py
 2 
 3 from django.shortcuts import render
 4 from django.http import HttpResponse
 5 # 导入Customer 对象定义
 6 from common.models import Customer
 7 
 8 
 9 def list_orders(request):
10     return HttpResponse('路由子表:下面是系统中的所有订单信息')
11 
12 
13 # 先定义好HTML模板
14 html_template = '''
15 <!DOCTYPE html>
16 <html>
17 <head>
18 <meta charset="UTF-8">
19 <style>
20 table {
21     border-collapse: collapse;
22 }
23 th, td {
24     padding: 8px;
25     text-align: left;
26     border-bottom: 1px solid #ddd;
27 }
28 </style>
29 </head>
30     <body>
31         <table>
32         <tr>
33         <th>id</th>
34         <th>姓名</th>
35         <th>电话号码</th>
36         <th>地址</th>
37         </tr>
38         
39         {% for customer in customers %}
40             <tr>
41             {% for name, value in customer.items %}
42                 <td>{{value}}</td>
43             {% endfor %}
44             </tr>
45         {% endfor %}
46         
47         </table>
48     </body>
49 </html>
50 '''
51 
52 from django.template import engines
53 
54 django_engine = engines['django']
55 template = django_engine.from_string(html_template)
56 
57 
58 def listcustomers(request):
59     # 返回一个 QuerySet对象，包含所有的表记录
60     # 每条表记录都是一个dict对象
61     # key 是字段名， value 是字段值
62     # objects是用来操作数据库的Manager接口
63     qs = Customer.objects.values()
64 
65     # 检查url中是否有参数phonenumber
66     ph = request.GET.get('phonenumber', None)
67 
68     # 如果有，添加过滤条件
69     if ph:
70         qs = qs.filter(phonenumber=ph)
71 
72     # # 定义返回给浏览器的字符串
73     # retStr = ''
74     # for customer in qs:
75     #     for name, value in customer.items():
76     #         retStr += f'{name} : {value} | '
77     #     # 一条记录结束后加一个<br>换行
78     #     retStr += '<br>'
79     #
80     # return HttpResponse(retStr)
81 
82     # 生成html模板中要插入的html片段内容
83     # tableContent = ''
84     # for customer in qs:
85     #     tableContent += '<tr>'
86     #     for name, value in customer.items():
87     #         tableContent += f'<td>{value}</td>'
88     #
89     #     tableContent += '</tr>'
90     #
91     # return HttpResponse(html_template % tableContent)
92 
93     # 传入渲染模板需要的参数
94     rendered = template.render({'customers': qs})
95     return HttpResponse(rendered)

不利于前后端开发任务的分离，前后端开发人员要做额外的沟通。
如果前端除了web浏览器，还有手机APP的话，APP不需要服务端返回HTML，就得再开发一套数据接口
渲染任务在后端执行，大大的增加了后端的性能压力，尤其是有的HTML页面很大，当有大量的用户并发访问的时候，后端渲染工作量很大，很耗费CPU资源

前后端分离架构的好处
- 服务端只负责提供数据，页面的构成全部在前端（浏览器或者手机前端）进行，称之为前端渲染
- 前后端之间的交互就完全是业务数据了
- 需要定义好前后端交互数据的接口
- 目前接口设计最普遍的就是使用REST风格的API接口
- 前端通过API接口从后端获取数据展示在界面上
- 前端通过API接口告诉后端需要更新的数据是什么
- 前后端的API接口通常是由架构师设计的，有时候也可以由经验丰富的前端开发者或者后端开发者

posted @ 2025-12-05 22:33 理想赵雷阅读(6) 评论(0) 收藏举报

刷新页面返回顶部

理想赵雷

06 前后端分离的架构

公告