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

技术Web前后端分离开发的方法是什么本篇内容主要讲解“Web前后端分离开发的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“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前后端分离开发的方法是什么”有了更深的了解,不妨来实际操作一番吧!这里是网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/64472.html

(0)

相关推荐

  • 鸟加几是什么字,请问:鸟字下面加个几字读什么

    技术鸟加几是什么字,请问:鸟字下面加个几字读什么是鸟加几是什么字:凫【fú】一、凫的释义:
    1、野鸭。
    2、凫水,游泳。
    二、凫的组词:
    凫茈、凫水、化凫、凫羽、蹑凫、凫骑、凫花、凫泛、凫翁、松凫、玉凫、凫乙、白凫、鱼凫

    生活 2021年10月28日
  • 怎样用Python爬取京东的价格和标题及评价等商品情况

    技术怎样用Python爬取京东的价格和标题及评价等商品情况这篇文章将为大家详细讲解有关怎样用Python爬取京东的价格和标题及评价等商品情况,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知

    攻略 2021年10月26日
  • spark的数据本地优化级别(spark参数优化)

    技术spark中怎么配置启用LZO压缩这篇文章给大家介绍spark中怎么配置启用LZO压缩,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Spark中配置启用LZO压缩,步骤如下:一、spark-en

    攻略 2021年12月17日
  • 怎样实现Mysql 备份与恢复

    技术怎样实现Mysql 备份与恢复怎样实现Mysql 备份与恢复,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。逻辑备份:1.mysqldum

    攻略 2021年11月20日
  • 五行属水最吉利的字,5画五行属水的字有哪些

    技术五行属水最吉利的字,5画五行属水的字有哪些5画五行属水的字有: 白:5画五行属水最吉利的字。清秀伶俐,智勇双全,中年成功,有爱情厄,晚年吉祥。 包:5画。清雅伶俐,谋略出众,中年成功隆昌,晚年劳神。

    生活 2021年10月29日
  • hibernate如何实现逆向工程

    技术hibernate如何实现逆向工程这篇文章将为大家详细讲解有关hibernate如何实现逆向工程,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。导入hibernate 插件,这个自己

    攻略 2021年12月8日