Django实践-09前后端分离开发入门

用户2225445

发布于 2023-10-16 17:06:57

2180

发布于 2023-10-16 17:06:57

Django实践-09前后端分离开发入门

官网：https://www.djangoproject.com/ 博客：https://www.liujiangblog.com/ 本博客内容参考git：https://gitcode.net/mirrors/jackfrued/Python-100-Days 一些细节问题，大家可以查看git连接。本文主要的改变为把代码升级为django4.1版本。

Django静态文件问题备注：参考： Django测试开发-20-settings.py中templates配置，使得APP下的模板以及根目录下的模板均可生效解决django 多个APP时 static文件的问题 django配置app中的静态文件步骤 Django多APP加载静态文件 django.short包参考：中间件的应用 Django 前后端分离（REST Framework）

前后端分离开发概述

前后端分离开发的优点包括：

可以提高开发效率：前后端可以并行开发，加快产品发布速度。可以降低系统的耦合性：前后端各自独立开发，前端不需要考虑后端的具体实现细节，后端也不用考虑前端的展示方式。更好的可扩展性：前后端分离架构可以轻松地扩展新功能或模块，而无需改变整个系统。更好的跨平台兼容性：前后端分离开发可以为多个平台提供服务，如 Web、Android、iOS 等。更好的用户体验：通过前后端分离，可以更好地处理数据和 UI 展现，提升用户体验。

前后端分离开发的缺点包括：

开发难度较大：前后端分离需要开发者具备更多的技术能力和经验，同时需要更多的协调和沟通工作。系统复杂度增加：前后端分离会增加系统的网络请求次数和数据交互，对于一些简单的应用来说可能会影响系统性能。需要额外的工具支持：前后端分离需要使用一些额外的工具，如 Webpack、Babel 等，增加了开发成本。安全性风险：前后端分离架构需要将数据和逻辑分别部署在不同的服务器上，可能会面临一些安全性问题。

基于前后端分离改写投票应用

接下来我们就用前后端分离的方式来改写之前的投票应用。为了避免影响原有的案例，现在新建一个应用polls2，然后在polls2应用中，完成前后端分离的应用，同时也体现了django的可插拔应用设计。

创建新的应用polls2

1.创建polls2

django-admin startapp polls2

2.修改settings.py文件

注册应用到INSTALLED_APPS

INSTALLED_APPS = [
    # ...
    'polls2', # 新增
]

3.修改polls2下的views.py文件

新增

from django.http import JsonResponse
from django.shortcuts import render
from polls.models import Subject
# Create your views here.
def show_subjects(request):
    queryset = Subject.objects.all()
    subjects = []
    for subject in queryset:
        subjects.append({
            'no': subject.no,
            'name': subject.name,
            'intro': subject.intro,
            'isHot': subject.is_hot
        })
    return JsonResponse(subjects, safe=False,json_dumps_params={'ensure_ascii':False})
    # json_dumps_params={'ensure_ascii':False} 可以在前端显示中文，否则显示为转义后的值 读者可以尝试去掉这个参数

上面的代码中，我们通过循环遍历查询学科得到的QuerySet对象，将每个学科的数据处理成一个字典，在将字典保存在名为subjects的列表容器中，最后利用JsonResponse完成对列表的序列化，向浏览器返回JSON格式的数据。由于JsonResponse序列化的是一个列表而不是字典，所以需要指定safe参数的值为False才能完成对subjects的序列化，否则会产生TypeError异常。

4.修改urls.py添加api/subjects/

from polls2 import views as polls2_views

urlpatterns = [
    # ...
    path('api/subjects',polls2_views.show_subjects), # 新增
]

5.运行项目并测试

运行项目

python manage.py runserver

测试

127.0.0.1:8000/api/subjects

未添加json_dumps_params={‘ensure_ascii’:False}参数

添加 json_dumps_params={‘ensure_ascii’:False} 参数

6.基于bpmappers简化对象转字典操作

可能大家已经发现了，自己写代码将一个对象转成字典是比较麻烦的，如果对象的属性很多而且某些属性又关联到一个比较复杂的对象时，情况会变得更加糟糕。为此我们可以使用一个名为bpmappers的三方库来简化将对象转成字典的操作，这个三方库本身也提供了对Django框架的支持。

安装三方库bpmappers。

pip install bpmappers

在polls2的views.py添加映射器代码（实现对象到字典转换）。

from bpmappers.djangomodel import ModelMapper

from polls.models import Subject # 复用polls中的models模型


class SubjectMapper(ModelMapper):
   
    class Meta:
        model = Subject

修改polls2应用下的views.py中的show_subjects函数

def show_subjects(request):
    queryset = Subject.objects.all()
    subjects = []
    for subject in queryset:
        # subjects.append({
        #     'no': subject.no,
        #     'name': subject.name,
        #     'intro': subject.intro,
        #     'isHot': subject.is_hot
        # })
        subjects.append(SubjectMapper(subject).as_dict())
    return JsonResponse(subjects, safe=False,json_dumps_params={'ensure_ascii':False})

运行与测试

127.0.0.1:8000/api/subjects

5.定制SubjectMapper映射器如果希望将是否为热门学科对应的键取名为isHot（默认的名字是is_hot），如果希望在JSON数据中不显示原有的is_hot属性，可以在映射器中排除is_hot属性；也可以通过修改映射器来做到。具体的做法如下所示：

from bpmappers.djangomodel import ModelMapper
from polls.models import Subject # 复用polls中的models模型
from bpmappers import RawField # 新增
class SubjectMapper(ModelMapper):
    isHot = RawField('is_hot') # 新增

    class Meta:
        model = Subject
        exclude = ('is_hot', ) # 新增

运行与测试

127.0.0.1:8000/api/subjects

关于bpmappers详细的使用指南，请参考它的官方文档，这个官方文档是用日语书写的，可以使用浏览器的翻译功能将它翻译成你熟悉的语言即可。

使用Vue.js渲染页面

在static/html目录下新建api_subjects.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学科信息</title>
    <style>
		/* 此处省略层叠样式表 */
        #container {
            width: 80%;
            margin: 10px auto;
        }
        .user {
            float: right;
            margin-right: 10px;
        }
        .user>a {
            margin-right: 10px;
        }
        #main>dl>dt {
            font-size: 1.5em;
            font-weight: bold;
            border: 1px solid red;
        }
        #main>dl>dd {
            font-size: 1.2em;
        }
        a {
            text-decoration: none;
            color: darkcyan;
        }
    </style>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

    <div id="container">
        <h1>所有学科</h1>
        <hr>
        <div id="main">
            <dl v-for="subject in subjects">
                <dt>
                    <a :href="'/static/html/api_teachers.html?sno=' + subject.no">
                        [[subject.name]]  <!-- 原先为 {{subject.name}}-->
                    </a>
                    <img v-if="subject.isHot" src="/static/images/hot-icon-small.png">
                </dt>
                <dd>[[subject.intro]] </dd> <!-- 原先为 {{subject.intro}}-->
            </dl>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: '#main',
            delimiters: ["[[", "]]"], // ***修改处*** vue 的与django模板语法冲突
            data: {
                subjects: []
            },
            created() {
                fetch('http://127.0.0.1:8000/api/subjects')
                    .then(resp => resp.json())
                    .then(json => {
                        console.log(json)
                        this.subjects = json
                    })
            }
        })
    </script>
</body>
</html>

运行测试

运行

python manage.py runserver

测试

http://127.0.0.1:8000/static/html/api_subjects.html

前后端分离的开发需要将前端页面作为静态资源进行部署，项目实际上线的时候，我们会对整个Web应用进行动静分离，静态资源通过Nginx或Apache服务器进行部署，生成动态内容的Python程序部署在uWSGI或者Gunicorn服务器上，对动态内容的请求由Nginx或Apache路由到uWSGI或Gunicorn服务器上。

在开发阶段，我们通常会使用Django自带的测试服务器，如果要尝试前后端分离，可以先将静态页面放在之前创建的放静态资源的目录下。

总结

本文主要是Django系列博客。本文是Django前后端分离开发。步骤如下:

1.创建应用polls2 2.在settings.py中注册polls2 3.在polls2的views.py中添加视图函数 4.在urls.py中添加路由 5.运行测试 6.基于bpmappers简化对象转换为json 7.基于vue修改前端页面 8.把前端代码部署在服务器上如果你看到这里，且博客有帮助，可以关注，点赞，收藏，评论哈💯

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-11，如有侵权请联系 cloudcommunity@tencent.com 删除

django