vue实现前后端分离,vue怎么和python后端交互
(印象深刻自动(看好红牛)))))))
目录
以JSON格式返回数据
使用Vue.js呈现页面
在传统的web APP应用开发中，很多程序员以浏览器为前后界。浏览器为用户显示页面的部分称为前端，所有运行在服务器上，为前端提供业务逻辑和数据的代码统称为后端。前端和后端分离的开发是指承诺前端和后端工程师之间交换数据，并行进行开发和测试的接口。后端只提供数据，不负责在页面上呈现数据。前端通过HTTP请求数据，并将数据呈现在页面上。这项工作留给浏览器中的JavaScript代码。
前台和后台分开开发有很多好处。让我简单解释一下这些好处。
提升开发效率前后端分离后，前后端代码可以解耦。只要前后端沟通好，对APP需要的接口和接口参数达成一致，就可以并行开发，不用等对方开发工作完成。在这种情况下，前端工程师只能专注于自己的发展，这有助于建立一个更好的团队。另外，在前端和后端分离的开发模式下，如果需要更改，但接口和数据格式不变，那么后端开发人员只需要更改前端，不需要修改代码。增强代码的可维护性分离后，APP应用的代码在运行时只能有调用依赖，而不是混乱。这样维护代码的工作会变得更容易，你也不会一个人动身体。xxdpw简洁干净的代码可以提高代码的可读性和可维护性。支持多终端和服务化架构分离后，同一个数据接口可以服务不同的终端，有助于构建更多的终端APP应用；也可以在后端提供的接口之间通过http(s)调用，从而帮助构建包含微服务器的面向服务的架构。然后，通过前后端分离的方式重写之前的投票APP。
返回JSON格式的数据如上所述，在前端和后端分离的开发模式下，后端必须为前端提供数据接口。这些接口通常以JSON格式返回数据。在Django项目中，可以先把对象当成字典，然后用Django封装的JsonResponse把JSON格式的数据返回给浏览器。具体方法如下。
def show _ subjects(request):query set=subject . objects . all)subjects=[]for subjectnqueryset 3360 subjects . for subjectnqueryset 360 name :subject . name， intro: subject.intro，Ishot :subject . is _ hot }(Return jsonresponse(suushot)subject . is _ hot))Return JSON我们通过查询学科的querysson将字典保存在一个名为subjects的列表容器中，最后用JSON response序列化列表，将JSON格式的数据返回给浏览器因为JsonResponse序列化列表而不是字典，所以必须将safe参数的值指定为False来完成主题的序列化。否则，将发生TypeError异常。
你可能已经知道了，自己写代码把对象转换成字典很麻烦。如果一个对象有很多属性，而且有些属性和复杂的对象有关联，情况会更糟。因此，可以使用一个名为bpmappers的三方库来简化将对象转换为字典的操作。这个三方库本身也支持Django框架。
安装第三方库bpmappers。
Pip install bpmappers创建一个映射器(实现对象到字典的转换)。
Frombmappers。Djangomomodemport模型映射器Poll2。模型子对象类主题映射器(模型映射器)3360类元数据3360
def show _ subjects(request):query set=subject . objects . all)subjects=[]for subjectnqueryset 3360 subjects . fory
()返回jsonresponse (subjects，safe=false)以配置URL映射。
URL patterns=[path( API/subjects/，show _ subjects)]，然后访问接口获取JSON格式数据如下图。
[{no: 1， name: Python全栈人工智能， intro: Python是一种计算机编程语言。是一种面向对象的动态类型语言，最初设计用于编写自动化脚本(shell)。随着版本的不断更新和语言新功能的增加，它越来越多地被用于独立和大规模项目的开发。 is_hot: true }、//此处省略以下内容]如果不想在JSON数据中显示学科的建立时间，我们可以在mapper中排除create_date属性；如果您想将对应于热主题的键命名为isHot(默认名称为is_hot)，也可以通过修改映射器来实现。具体做法如下：
从bpmappers导入rawfield从bpmappers.djangomodel导入ModelMapperfrom poll2.models导入subject class subject mapper(model mapper):ishot=rawfield( is _ hot )class meta:model=subject exclude=( is _ hot )，再次检查subject接口返回的JSON数据。
[{no: 101， name: Python全栈人工智能， intro: Python是一种计算机编程语言。是一种面向对象的动态类型语言，最初设计用于编写自动化脚本(shell)。随着版本的不断更新和语言新功能的增加，它越来越多地被用于独立和大规模项目的开发。 isHot: true }，//此处省略以下内容]有关bpmappers的详细使用指南，请参考其官方文档。这份公文是用日语写的，你可以用浏览器的翻译功能翻译成你熟悉的语言。
使用Vue.js渲染页面接下来我们用前端框架Vue.js渲染页面。如果想全面了解和学习Vue.js，建议阅读其官方教程或者在YouTube上搜索Vue.js的新手教程(Vue.js速成课程)进行学习。
重写subjects.html页面，并使用Vue.js来呈现页面。
！doctype HTML HTML lang= en headmethacharaset= UTF-8 Title学科信息/title style /*此处省略层叠样式表*/style/head body div ID= container H1定学堂中的所有学科/h1 HR div ID= main dl v-for= subjects中的subject dt a:rel= external no follow 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 script let app=new Vue({ El: # main ，data然后(resp=resp.json())。然后(JSON={ this . subjects=JSON })} })/script/body/html前端分离的开发需要将前端页面作为静态资源进行部署。当项目真正上线时，我们会将整个Web应用从静态资源中分离出来。静态资源通过Nginx或Apache服务器部署，生成动态内容的Python程序部署在uWSGI或Gunicorn服务器上，对动态内容的请求通过Nginx或Apache路由到uWSGI或Gunicorn服务器。
在开发阶段，我们通常使用Django自己的测试服务器。如果我们想要尝试分离前端和后端，我们可以首先将静态页面放在之前为静态资源创建的目录中。详情请参考【项目完整代码】(https://gitee.com/Jackfrued/Django19062)。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。