Web前后端分离开发的方法是什么

本文主要讲解“Web前端和后端分离的方法是什么”，感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“网页正反面分离的方法是什么？”！ 在传统的Web应用开发中，大多数程序员都会把浏览器作为前后的分界线。浏览器中为用户显示页面的部分称为前端，而所有在服务器上运行并为前端提供业务逻辑和数据准备的代码统称为后端。所谓前端分离开发，就是前端工程师在数据交互接口上达成一致，并行开发测试。后端只提供数据，不负责将数据呈现给页面。前端通过HTTP请求获取数据，负责将数据渲染到页面。这项工作是由浏览器中的JavaScript代码完成的。 使用前端分离开发有很多优点。下面让我们简单谈谈这些优势： 提高开发效率。前端和后端分离后，前端和后端的代码可以解耦。只要前后端沟通，就应用所需的接口和接口参数达成一致，就可以开始并行开发，无需等待对方的开发工作结束。在这种情况下，前后工程师只能专注于自己的开发工作，这有助于建立更好的团队。另外，在前后端分离的开发模式下，即使需求发生变化，只要接口和数据格式保持不变，后端开发人员不需要修改代码，只要前端发生变化即可。 增强代码的可维护性。前端分离后，应用程序代码不再混前端和后端，只在运行时会有调用依赖，这样维护代码的工作会变得轻松很多，也更有乐趣，不会影响全身。当你的代码变得简洁和整洁时，代码的可读性和可维护性将得到质的提高。 支持多终端和服务架构。前端分离后，同一套数据接口可以为不同终端提供服务，更有利于打造多终端应用；此外，因为后端提供的接口可以通过HTTP(S)调用，所以构建面向服务的架构(包括微服务)很有帮助。 接下来，我们将通过分离前后来重写之前的投票应用程序。 以JSON格式返回数据。 刚才说了，在前后端分离的开发模式下，后端需要为前端提供数据接口，这些接口通常以JSON格式返回数据。在Django项目中，我们可以先将对象处理成字典，然后使用Django封装的JsonResponse将JSON格式的数据返回给浏览器，如下图所示。 def显示_主题(请求): queryset=Subject.objects.all() 主题=[] 在queryset:中 subjects . append({ 0 不是：主题。不是， 名称 :主题名称， intro :主题. intro， isHot :主题. is_hot 在上面返回JsonResponse (subjects，safe=false)的代码中，我们循环遍历查询subjects得到的QuerySet对象，将每个subjects的数据处理成字典，将字典保存在一个名为subjects的列表容器中，最后通过JsonResponse序列化列表，将JSON格式的数据返回给浏览器。由于JsonResponse序列化的是列表而不是字典，因此需要将safe参数的值指定为False来完成对主题的序列化，否则将生成TypeError异常。 您可能已经发现，通过编写自己的代码将对象转换为字典是很麻烦的。如果一个对象的属性很多，有些属性与一个复杂的对象相关联，情况会变得更糟。因此，我们可以使用一个名为bpmappers的三方库来简化将对象转换为字典的操作，这个三方库本身也为Django框架提供了支持。 安装三方库bpmappers。 Pipinstallbpmappers编写映射器(实现对象到字典的转换)。 来自bpmappers.djangomodel 导入模型映射器 来自poll2.models 类主题映射器(模型映射器): Meta:类 模型=主题

ode

修改视图函数。

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 
     h2 所有学科 /h2 
     hr 
     div id= app 
         div v-for= subject in subjects 
             h4 
                 a :href= getTeachersHref(subject.no) {{ subject.name }} /a 
                 img v-if= subject.isHot src= /static/images/hot.png width= 32 
             /h4 
             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服务器上。
到此，相信大家对“Web前后端分离开发的方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！