正文

python全栈100天学习笔记day48前后端分离开发入门(代码片段)

Vax_Loves_1314  Vax_Loves_1314  2022-11-30  579

关键词：

前后端分离开发入门

在传统的Web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。所谓前后端分离的开发，就是前后端工程师约定好数据交互接口，并行的进行开发和测试，后端只提供数据，不负责将数据渲染到页面上，前端通过HTTP请求获取数据并负责将数据渲染到页面上，这个工作是交给浏览器中的JavaScript代码来完成。

使用前后端分离开发有诸多的好处，下面我们简要的说下这些好处：

提升开发效率。前后端分离以后，可以实现前后端代码的解耦，只要前后端沟通约定好应用所需接口以及接口参数，便可以开始并行开发，无需等待对方的开发工作结束。在这种情况下，前后端工程师都可以只专注于自己的开发工作，有助于打造出更好的团队。除此之外，在前后端分离的开发模式下，即使需求发生变更，只要接口与数据格式不变，后端开发人员就不需要修改代码，只要前端进行变动即可。
增强代码的可维护性。前后端分离后，应用的代码不再是前后端混合，只有在运行期才会有调用依赖关系，这样的话维护代码的工作将变得轻松愉快很多，再不会牵一发而动全身。当你的代码变得简明且整洁时，代码的可读性和可维护性都会有质的提升。
支持多终端和服务化架构。前后端分离后，同一套数据接口可以为不同的终端提供服务，更有助于打造多终端应用；此外，由于后端提供的接口之间可以通过HTTP(S)进行调用，有助于打造服务化架构（包括微服务）。

接下来我们就用前后端分离的方式来改写之前的投票应用。

返回JSON格式的数据

刚才说过，在前后端分离的开发模式下，后端需要为前端提供数据接口，这些接口通常返回JSON格式的数据。在Django项目中，我们可以先将对象处理成字典，然后就可以利用Django封装的JsonResponse向浏览器返回JSON格式的数据，具体的做法如下所示。

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)

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

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

安装三方库bpmappers。

pip install bpmappers

编写映射器（实现对象到字典转换）。

from bpmappers.djangomodel import ModelMapper

from poll2.models import Subject


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

修改视图函数。

def show_subjects(request):
    queryset = Subject.objects.all()
    subjects = []
    for subject in queryset:
        subjects.append(SubjectMapper(subject).as_dict())
    return JsonResponse(subjects, safe=False)

配置URL映射，然后访问该接口，可以得到如下所示的JSON格式数据。

[
    
        "no": 101,
        "name": "Python全栈+人工智能",
        "intro": "Python是一种计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。",
        "create_date": "2017-08-01",
        "is_hot": true
    ,
    // 此处省略下面的内容
]

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

from bpmappers import RawField
from bpmappers.djangomodel import ModelMapper

from poll2.models import Subject


class SubjectMapper(ModelMapper):
    isHot = RawField('is_hot')

    class Meta:
        model = Subject
        exclude = ('create_date', 'is_hot')

再次查看学科接口返回的JSON数据。

[
    
        "no": 101,
        "name": "Python全栈+人工智能",
        "intro": "Python是一种计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。",
        "isHot": true
    ,
    // 此处省略下面的内容
]

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

使用Vue.js渲染页面

关于Vue.js的知识，我们在第21天到第30天的内容中已经介绍过了，这里我们不再进行赘述。如果希望全面的了解和学习Vue.js，建议阅读它的官方教程或者在YouTube上搜索Vue.js的新手教程（Crash Course）进行学习。

重新改写subjects.html页面，使用Vue.js来渲染页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学科</title>
</head>
<body>
    <h1>所有学科</h1>
    <hr>
    <div id="app">
        <div v-for="subject in subjects">
            <h3>
                <a :href="getTeachersHref(subject.no)"> subject.name </a>
                <img v-if="subject.isHot" src="/static/images/hot.png" width="32">
            </h3>
            <p> subject.intro </p>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        const app = new Vue(
            el: '#app',
            data: 
                subjects: []
            ,
            created() 
                fetch('/subjects/')
                    .then(resp => resp.json())
                    .then(json => this.subjects = json)
            ,
            methods: 
                getTeachersHref(sno) 
                    return `/static/teachers.html/?sno=$sno`
                
            
        )
    </script>
</body>
</html>

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

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

python全栈100天学习笔记day33linux实用程序(代码片段)

实用程序文件和文件夹操作创建/删除空目录-mkdir/rmdir。[root~]#mkdirabc[root~]#mkdir-pxyz/abc[root~]#rmdirabc创建/删除文件-touch/rm。[root~]#touchreadme.txt[root~]#toucherror.txt[root~]#rmerror.txtrm:removeregularemptyfile‘error. 查看详情

python全栈100天学习笔记day34linux用户管理及文件系统(代码片段)

用户管理创建和删除用户-useradd/userdel。[roothome]#useraddhellokitty[roothome]#userdelhellokitty-d-创建用户时为用户指定用户主目录-g-创建用户时指定用户所属的用户组创建和删除用户组-groupadd/groupdel。说明：用户组主要是为了方便对一... 查看详情

python全栈100天学习笔记day44web表单介绍及使用(代码片段)

表单的应用我们继续来完成上一章节中的项目，实现“用户注册”和“用户登录”的功能，并限制只有登录的用户才能为老师投票。Django框架中提供了对表单的封装，而且提供了多种不同的使用方式。首先添加用户模... 查看详情

python全栈100天学习笔记day31操作系统发展史

说明：本文中对Linux命令的讲解都是基于名为CentOS的Linux发行版本，我自己使用的是阿里云服务器，系统版本为CentOSLinuxrelease7.6.1810。不同的Linux发行版本在Shell命令和工具程序上会有一些差别，但是这些差别是很小... 查看详情

python全栈100天学习笔记day32linux概述及基础命令(代码片段)

Linux概述Linux是一个通用操作系统。一个操作系统要负责任务调度、内存分配、处理外围设备I/O等操作。操作系统通常由内核（运行其他程序，管理像磁盘、打印机等硬件设备的核心程序）和系统程序（设备驱动、... 查看详情

python全栈100天学习笔记day41django深入理解框架(代码片段)

深入模型在上一个章节中，我们提到了Django是基于MVC架构的Web框架，MVC架构追求的是“模型”和“视图”的解耦合。所谓“模型”说得更直白一些就是数据（的表示），所以通常也被称作“数据模型”。在实... 查看详情

python全栈100天学习笔记day46导入导出excel报表和配置日志(代码片段)

...表=多样的格式+动态的数据有很多的三方库支持在Python程序中写Excel文件，包括xlwt、xlwings、openpyxl、xlswriter、pandas等，其中的xlwt虽然只支持写xls格式的Excel文件&#x 查看详情

python全栈100天学习笔记day46导入导出excel报表和配置日志(代码片段)

python全栈100天学习笔记day47django中间件使用(代码片段)

中间件的应用实现登录验证我们继续来完善投票应用。在上一个章节中，我们在用户登录成功后通过session保留了用户信息，接下来我们可以应用做一些调整，要求在为老师投票时必须要先登录，登录过的用户可以... 查看详情

python全栈100天学习笔记day47django中间件使用(代码片段)

python全栈100天学习笔记day36关系型数据库及mysql(代码片段)

关系数据库入门关系数据库概述数据持久化-将数据保存到能够长久保存数据的存储介质中，在掉电的情况下数据也不会丢失。数据库发展史-网状数据库、层次数据库、关系数据库、NoSQL数据库。1970年，IBM的研究员E.F.Codd... 查看详情

python全栈100天学习笔记day40mongodb安装配置及应用(代码片段)

MongoDB概述MongoDB简介MongoDB是2009年问世的一个面向文档的数据库管理系统，由C++语言编写，旨在为Web应用提供可扩展的高性能数据存储解决方案。虽然在划分类别的时候后，MongoDB被认为是NoSQL的产品，但是它... 查看详情

python全栈100天学习笔记day39nosql入门及redis概述(代码片段)

NoSQL入门NoSQL概述如今，大多数的计算机系统（包括服务器、PC、移动设备等）都会产生庞大的数据量。其实，早在2012年的时候，全世界每天产生的数据量就达到了2.5EB（艾字节，1EB≈1018B1EB\\approx10^18B1EB... 查看详情

python全栈100天学习笔记day35linux系统软件安装shell编程及配置服务工具(代码片段)

使用包管理工具yum-YellowdogUpdaterModified。yumsearch：搜索软件包，例如yumsearchnginx。yumlistinstalled：列出已经安装的软件包，例如yumlistinstalled|grepzlib。yuminstall：安装软件包，例如yuminstallngin 查看详情

python全栈100天学习笔记day43django静态资源与ajax请求(代码片段)

静态资源和Ajax请求基于前面的知识，我们已经可以使用Django框架来完成Web应用的开发了。接下来我们就尝试实现一个投票应用，具体的需求是用户进入应用首先查看到“学科介绍”页面，该页面显示了一个学校所开... 查看详情

python全栈100天学习笔记day45cookie和session介绍及使用(代码片段)

Cookie和Session实现用户跟踪如今，一个网站如果不通过某种方式记住你是谁以及你之前在网站的活动情况，失去的就是网站的可用性和便利性，继而很有可能导致网站用户的流式，所以记住一个用户（更专业的... 查看详情

python全栈100天学习笔记day45cookie和session介绍及使用(代码片段)

python全栈100天学习笔记day37mysql详解（sql语句基本操作含索引视图存储过程）(代码片段)

SQL详解基本操作我们通常可以将SQL分为三类：DDL（数据定义语言）、DML（数据操作语言）和DCL（数据控制语言）。DDL主要用于创建（create）、删除（drop）、修改（alter）数据库中... 查看详情