前后端分离开发还不会?手把手教你了
off999 2025-01-07 14:55 15 浏览 0 评论
前后端分离开发入门
在传统的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，我整理了视频版的学习教程，要学习的伙伴可以留言回复：“Python视频教程”，领取视频教程。
重新改写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自带的测试服务器，如果要尝试前后端分离，可以先将静态页面放在之前创建的放静态资源的目录下，不清楚的地方，可以留言！
之前建了个100天Python从新手到大神专栏，很多伙伴跟着学习，也收获了不少，也有伙伴跟我说希望出视频教程，看的直观些，这也整理出来了。
Python 900集全套视频教程https://pan.baidu.com/s/1cU5lDWq9gh0cQ7hCnXUiGA 提取码: m
要学习的伙伴，回复“Python视频教程”，领取！
相关推荐
- 全网第一个讲清楚CPK如何计算的Step by stepExcel和Python同时实现
-
在网上搜索CPK的计算方法，几乎全是照搬教材的公式，在实际工作做作用不大，甚至误导人。比如这个又比如这个：CPK=min（（X-LSL/3s），（USL-X/3s））还有这个，很规范的公式，也很清晰很...
- [R语言] R语言快速入门教程（r语言基础操作）
-
本文主要是为了从零开始学习和理解R语言，简要介绍了该语言的最重要部分，以快速入门。主要参考文章：R-TutorialR语言程序的编写需要安装R或RStudio，通常是在RStudio中键入代码。但是R...
- Python第123题:计算直角三角形底边斜边【PythonTip题库300题】
-
1、编程试题：编写一个程序，找出已知面积和高的直角三角形的另外两边(底边及斜边)。定义函数find_missing_sides()，有两个参数：area(面积)和height(高)。在函数内，计算另外...
- Tensor:Pytorch神经网络界的Numpy
-
TensorTensor，它可以是0维、一维以及多维的数组，你可以将它看作为神经网络界的Numpy，它与Numpy相似，二者可以共享内存，且之间的转换非常方便。但它们也不相同，最大的区别就是Numpy...
- python多进程编程（python多进程进程池）
-
forkwindows中是没有fork函数的，一开始直接在Windows中测试，直接报错importosimporttimeret=os.fork()ifret==0:...
- 原来Python的协程有2种实现方式（python协程模型）
-
什么是协程在Python中，协程（Coroutine）是一种轻量级的并发编程方式，可以通过协作式多任务来实现高效的并发执行。协程是一种特殊的生成器函数，通过使用yield关键字来挂起函数的执行...
- ob混淆加密解密，新版大众点评加密解密
-
1目标：新版大众点评接口参数_token加密解密数据获取：所有教育培训机构联系方式获取难点：objs混淆2打开大众点评网站，点击教育全部，打开页面，切换到mobile模式，才能找到接口。打开开发者工具...
- python并发编程-同步锁（python并发和并行）
-
需要注意的点：1.线程抢的是GIL锁，GIL锁相当于执行权限，拿到执行权限后才能拿到互斥锁Lock，其他线程也可以抢到GIL，但如果发现Lock仍然没有被释放则阻塞，即便是拿到执行权限GIL也要立刻...
- 10分钟学会Python基础知识（python基础讲解）
-
看完本文大概需要8分钟，看完后，仔细看下代码，认真回一下，函数基本知识就OK了。最好还是把代码敲一下。一、函数基础简单地说，一个函数就是一组Python语句的组合，它们可以在程序中运行一次或多次运行。...
- Python最常见的170道面试题全解析答案(二)
-
60.请写一个Python逻辑，计算一个文件中的大写字母数量答：withopen(‘A.txt’)asfs：count=0foriinfs.read()：ifi.isupper...
- Python 如何通过 threading 模块实现多线程。
-
先熟悉下相关概念多线程是并发编程的一种方式，多线程在CPU密集型任务中无法充分利用多核性能，但在I/O操作（如文件读写、网络请求）等待期间，线程会释放GIL，此时其他线程可以运行。GIL是P...
- Python的设计模式单例模式（python 单例）
-
单例模式，简单的说就是确保只有一个实例，我们知道，通常情况下类其实可以有很多实例，我们这么来保证唯一呢，全局访问。如配置管理、数据库连接池、日志处理器等。classSingleton: ...
- 更安全的加密工具:bcrypt（bcrypt加密在线）
-
作为程序员在开发工作中经常会使用加密算法，比如，密码、敏感数据等。初学者经常使用md5等方式对数据进行加密，但是作为严谨开发的程序员，需要掌握一些相对安全的加密方式，今天给大家介绍下我我在工作中使用到...
- 一篇文章搞懂Python协程（python协程用法）
-
前引之前我们学习了线程、进程的概念，了解了在操作系统中进程是资源分配的最小单位,线程是CPU调度的最小单位。按道理来说我们已经算是把cpu的利用率提高很多了。但是我们知道无论是创建多进程还是创建多线...
- Python开发必会的5个线程安全技巧
-
点赞、收藏、加关注，下次找我不迷路一、啥是线程安全？假设你开了一家包子铺，店里有个公共的蒸笼，里面放着刚蒸好的包子。现在有三个顾客同时来拿包子，要是每个人都随便伸手去拿，会不会出现混乱？比如第一个顾...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- python计时 (73)
- python安装路径 (56)
- python类型转换 (93)
- python进度条 (67)
- python吧 (67)
- python字典遍历 (54)
- python的for循环 (65)
- python格式化字符串 (61)
- python静态方法 (57)
- python列表切片 (59)
- python面向对象编程 (60)
- python 代码加密 (65)
- python串口编程 (60)
- python读取文件夹下所有文件 (59)
- java调用python脚本 (56)
- python操作mysql数据库 (66)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python多态 (60)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)