Shulou(Shulou.com)06/02 Report--

This article shows you the sample analysis of the introduction to front-end and front-end separation development in Python, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Introduction to front and rear separation development

In traditional Web application development, most programmers will use the browser as the dividing line between the front and back end. The part of the browser that displays the page for the user is called the front end, and all the code that runs on the server and provides business logic and data preparation for the front end is collectively referred to as the back end. The so-called front and back end separate development means that the front and back end engineers agree on the data interaction interface and develop and test in parallel. The back end only provides data and is not responsible for rendering the data to the page. The front end obtains the data through HTTP requests and is responsible for rendering the data to the page. This work is handed over to the JavaScript code in the browser to complete.

There are many benefits of using front-and back-end separate development. Let's briefly talk about these benefits:

Improve the efficiency of development. After the front and rear ends are separated, the front and back end codes can be decoupled. As long as the front and back ends communicate and agree on the interfaces and interface parameters required by the application, they can start parallel development without waiting for each other's development work to be completed. In this case, front and rear engineers can only focus on their own development work, helping to build a better team. In addition, in the front-end separate development mode, even if the requirements change, as long as the interface and data format remain unchanged, the back-end developers do not need to modify the code, as long as the front end changes.

Enhance the maintainability of the code. After the separation of the front and back ends, the code of the application is no longer mixed with the front and rear ends, and there will be call dependencies only at run time, so that the work of maintaining the code will become much easier and enjoyable, and will no longer affect the whole body. When your code becomes concise and neat, the readability and maintainability of your code will be qualitatively improved.

Supports multi-terminal and service-oriented architecture. After the front and rear ends are separated, the same set of data interfaces can provide services for different terminals, which is more conducive to the creation of multi-terminal applications. In addition, because the interfaces provided by the back end can be called through HTTP (S), it helps to build a service-oriented architecture (including micro-services).

Then we will rewrite the previous voting application by separating the front and rear ends.

Return data in JSON format

As I just said, in a separate development mode, the back end needs to provide the front end with data interfaces, which usually return data in JSON format. In the Django project, we can first process the object as a dictionary, and then use Django encapsulated JsonResponse to return data in JSON format to the browser, as shown below.

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)

In the above code, we loop through the QuerySet object obtained by querying disciplines, process the data of each discipline into a dictionary, save the dictionary in a list container named subjects, and finally use JsonResponse to serialize the list and return the data in JSON format to the browser. Because JsonResponse serializes a list rather than a dictionary, you need to specify the value of the safe parameter to False to complete the serialization of subjects, otherwise a TypeError exception will be generated.

You may have found that it is troublesome to write your own code to convert an object into a dictionary, and the situation will become even worse if the object has many properties and some properties are associated with a more complex object. To do this, we can use a tripartite library called bpmappers to simplify the operation of converting objects into dictionaries, which itself provides support for the Django framework.

Install the tripartite library bpmappers.

Pip install bpmappers

Write a mapper (implement object-to-dictionary conversion).

From bpmappers.djangomodel import ModelMapperfrom poll2.models import Subjectclass SubjectMapper (ModelMapper): class Meta: model = Subject

Modify the view function.

Def show_subjects (request): queryset = Subject.objects.all () subjects = [] for subject in queryset: subjects.append (SubjectMapper (subject). As_dict ()) return JsonResponse (subjects, safe=False)

Configure the URL mapping and then access the interface to get the data in JSON format as shown below.

Name: Python full Stack + artificial Intelligence, intro: Python is a computer programming language. It is an object-oriented dynamically typed language originally designed to write automated scripts (shell). With the continuous updating of versions and the addition of new features of the language, it is increasingly used for independent, large-scale project development. , "create_date": "2017-08-01", "is_hot": true}, / / the following is omitted here]

If you do not want to show the establishment time of the discipline in the JSON data, we can exclude the create_date attribute from the mapper; if you want to name the key corresponding to the hot discipline isHot (the default name is is_hot), you can also do so by modifying the mapper. The specific practices are as follows:

From bpmappers import RawFieldfrom bpmappers.djangomodel import ModelMapperfrom poll2.models import Subjectclass SubjectMapper (ModelMapper): isHot = RawField ('is_hot') class Meta: model = Subject exclude = (' create_date', 'is_hot')

Check the JSON data returned by the discipline interface again.

Name: Python full Stack + artificial Intelligence, intro: Python is a computer programming language. It is an object-oriented dynamically typed language originally designed to write automated scripts (shell). With the continuous updating of versions and the addition of new features of the language, it is increasingly used for independent, large-scale project development. , "isHot": true}, / / the following is omitted here]

For a detailed guide to using bpmappers, please refer to its official documentation, which is written in Japanese and can be translated into a language you are familiar with using the browser's translation function.

Render a page using Vue.js

The knowledge of Vue.js has been introduced in days 21 to 30, and we are not going to repeat it here. If you want a comprehensive understanding and study of Vue.js, it is recommended to read its official tutorial or search Vue.js 's Crash Course on YouTube to learn.

Rewrite the subjects.html page and use Vue.js to render the page.

All disciplines {{subject.name}}

{{subject.intro}}

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}`})

The development of front-end separation needs to deploy the front-end pages as static resources. When the project is actually online, we will separate the entire Web application, static resources will be deployed through Nginx or Apache servers, Python programs that generate dynamic content will be deployed on uWSGI or Gunicorn servers, and requests for dynamic content will be routed to uWSGI or Gunicorn servers by Nginx or Apache.

In the development phase, we usually use the test server that comes with Django. If you want to try to separate the front and back end, you can first put the static page in the directory where you created the static resources!

The above is a sample analysis of the introduction to front-end and back-end separate development in Python. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.