python前后端分离开发Vue+Django REST,前后端分离 python
Python实现前端分离开发1。前端分离介绍2。返回JSON格式数据3。使用Vue.js呈现页面
1.前端分离介绍在传统的Web应用开发中，大部分程序员都会以浏览器作为前端和后端的分界线。浏览器为用户显示页面的部分称为前端，所有运行在服务器上为前端提供业务逻辑和数据准备的代码统称为后端。所谓开发前端分离，就是前端工程师对数据交互接口达成一致，进行并行开发和测试。后端只提供数据，不负责将数据呈现给页面。前端通过HTTP请求数据，并负责将数据呈现给页面。这项工作由浏览器中的JavaScript代码完成。
使用前端和后端分离开发有很多好处。让我们简单谈谈这些优势：
提高开发效率。前后端分离后，前后端代码可以解耦。只要前后端沟通好，对应用所需的接口和接口参数达成一致，就可以开始并行开发，不用等对方的开发工作结束。在这种情况下，前后方工程师只能专注于自己的开发工作，这有助于建立更好的团队。另外，在前端和后端分离的开发模式下，即使需求发生变化，只要接口和数据格式保持不变，后端开发人员也不需要修改代码，只要前端发生变化。增强代码的可维护性。前端分离后，应用的代码不再是前端和后端混在一起，只有在运行时才会有调用依赖。这样维护代码的工作会轻松很多，也更愉快，全身都不会再受影响。当你的代码变得简洁、整洁时，你的代码的可读性和可维护性就会得到质的提高。支持多终端和服务架构。前后端分离后，同一套数据接口可以为不同的终端提供服务，更有利于构建多终端应用；此外，由于后端提供的接口可以通过HTTP(S)调用，因此有助于构建面向服务的架构(包括微服务)。我们可以在python后端代码中使用return json格式数据，将后端输出返回到前端，使用Vue.js渲染我们的前端页面。
2.返回JSON格式数据。在前后端分离的开发模式下，后端需要为前端提供数据接口，通常返回JSON格式的数据。在Django项目中，我们可以先将对象处理成一个字典，然后我们可以使用Django封装的JsonResponse将JSON格式的数据返回给浏览器，如下所示。
定义显示_主题(请求):
queryset=Subject.objects.all()
主题=[]
对于查询集中的主题：
subjects.append({
否:主题。否，
name: subject.name，
intro :主题. intro，
“isHot”:subject . is _ hot
})
在上面的代码Return JsonResponse (subjects，safe=false)中，我们通过循环遍历subject的QuerySet对象，将每个subject的数据处理成一个字典，并将字典保存在一个名为subjects的列表容器中。最后，我们使用JSON Response来完成列表的序列化，并将JSON格式的数据返回给浏览器。因为JsonResponse序列化的是一个列表而不是一个字典，所以需要将safe参数的值指定为False来完成主体的序列化，否则会产生TypeError异常。
你可能已经发现，自己写代码把一个对象变成字典很麻烦。如果一个对象有许多属性，并且一些属性与一个更复杂的对象相关，情况会变得更糟。因此，我们可以使用一个名为bpmappers的三方库来简化将对象转换为字典的操作，并且这个三方库本身也提供了对Django框架的支持。
安装第三方库bpmappers。
Pip BP Mappers编写一个映射器(实现从对象到字典的转换)。
从bpmappers.djangomodel导入模型映射器
从poll2.models导入主题
类别主题映射器(模型映射器):
类别元：
模型=主题修改视图功能。
定义显示_主题(请求):
queryset=Subject.objects.all()
主题=[]
对于查询集中的主题：
subjects . append(subject mapper(subject))。as_dict())
返回JSON响应(subjects，safe=false)配置URL映射。
urlpatterns=[
路径( api/subjects/，show_subjects)，
]然后访问接口，可以得到如下图的JSON格式数据。
[
{
否:1，
名称: Python全栈人工智能，
简介：Python是一种计算机编程语言。是一种面向对象的动态类型语言，最初设计用于编写自动化脚本(shell)。随着版本的不断更新和语言新功能的加入，它越来越多地被用于独立和大型项目的开发。
is_hot :真
},
//此处省略以下内容
]如果不想在JSON数据中显示学科的成立时间，我们可以在mapper中排除create_date属性；如果您想将对应于热主题的键命名为isHot(默认名称为is_hot)，也可以通过修改映射器来实现。具体做法如下：
从bpmappers导入RawField
从bpmappers.djangomodel导入模型映射器
从poll2.models导入主题
类别主题映射器(模型映射器):
isHot=RawField(is_hot )
类别元：
模型=主题
Exclude=(is_hot ，)再次检查规程接口返回的JSON数据。
[
{
否:101，
名称: Python全栈人工智能，
简介：Python是一种计算机编程语言。是一种面向对象的动态类型语言，最初设计用于编写自动化脚本(shell)。随着版本的不断更新和语言新功能的加入，它越来越多地被用于独立和大型项目的开发。
isHot :对
},
//此处省略以下内容
有关bpmappers的详细说明，请参考其官方文档，该文档用日语编写。你可以使用浏览器的翻译功能将其翻译成你熟悉的语言。
3.使用Vue.js渲染页面，接下来我们使用前端框架vue.js渲染页面。如果想全面了解和学习Vue.js，建议阅读其官方教程或者在w3school上学习Vue.js教程。
重写subjects.html页面，并使用Vue.js来呈现页面。
！声明文档类型
html lang=en
头
meta charset=UTF-8
主题信息/标题
风格
/*此处省略级联样式表*/
/风格
/头
身体
div id=容器
扣除丁学校所有学科/h1
整点
div id=main
dl v-for=主语中的主语
震颤性精神错乱（Delirium Tremens的缩写）
a:href= /static/html/teachers . html？sno= subject.no
{{ subject.name }}
/a
img v-if= subject . is _ hot src=/static/images/hot-icon-small . png
/dt
dd {{ subject.intro }} /dd
/dl
/div
/div
script src= https://cdn . bootcdn . net/Ajax/libs/vue/2 . 6 . 11/vue . min . js /script
脚本
let app=new Vue({
el: #main ，
数据：{
主题：[]
},
已创建(){
fetch(/api/subjects/)。然后(resp=resp.json())。然后(json={
this.subjects=json
})
}
})
/脚本
/body
/html的前后端分离开发需要将前端页面部署为静态资源。当项目真正启动时，我们将把整个Web应用从静态资源中分离出来。静态资源通过Nginx或Apache服务器部署，生成动态内容的Python程序部署在uWSGI或Gunicorn服务器上，对动态内容的请求通过Nginx或Apache路由到uWSGI或Gunicorn服务器。
转载请联系作者获得授权，否则将追究法律责任。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。