Python actual combat-Django framework to build the background management environment of the Mido Mall and log in "1"

Mido background management

The Django framework already provides an Admin management backend, but the page layout effect of the Admin's own pages that can be modified is relatively small, which cannot meet the company's customized page requirements. At this time, it is necessary to independently develop a back-end management system to meet the company's back-end data management.

Project structure

Development mode: separation of front and back ends

Front-end framework: VUE

Back-end framework: Django REST framework

Function part: Administrator login, data statistics, user management, commodity management, order management, authority management

Main technology: JWT user authentication, CORS cross-domain

Project environment construction

1. Running the front-end code

Enter the meiduo_mall_admin file directory and execute the following commands

npm run dev

As shown in the following figure, it means the operation is successful:

2. Running the back-end code

1. Import virtual environment files

pip install -r requeriments.txt

2. Enter the database to create a meiduo database

mysql -uroot -p 

create database meiduo charset=utf8;

3. Import data

 mysql -uroot -p meiduo < dump.sql

4. Run

python manage.py runserver

log in

In the background management, we first need to complete the login function, and we can complete the corresponding function by rewriting the Meiduo form login.

In the background login, because the domain names of our front-end services and back-end services are different, we first solve the cross-domain problem.

After logging in, we keep using jwt

 

Browser's Same Origin Policy

In 1995, the same-origin policy was introduced into browsers by Netscape. Currently, all browsers implement this policy.

The same-origin policy is a security feature of the browser. Client-side scripts (js files) from different sources cannot read and write resources of the other party without explicit authorization. Only scripts from the same source are given permissions for operations such as dom, read and write cookies, session, and ajax.

URL is composed of protocol, domain name, port and path. If the protocol, domain name, and port of two URLs are the same, the two URLs are of the same origin.

For example, for http://www.example.com/dir/page.htmlthis URL, the protocol is http://, the domain name is www.example.com, and the port is 80(the default port can be omitted). Its homology is as follows.

url	Whether the same	the reason
http://www.example.com/dir2/other.html	Yes	Same protocol, port and host
https://example.com/dir/other.html	no	Different protocol (https)
http://www.example.com:81	no	Different ports (81)
http://news.example.com/	no	Different domain names

The purpose of the same-origin policy is to ensure the safety of user information and prevent malicious websites from stealing data.

Imagine such a situation: A website is a bank, after the user logs in, he goes to other websites. What happens if other websites can read the cookies of website A?

Obviously, if cookies contain privacy (such as total deposits), this information will be leaked. What's more frightening is that cookies are often used to save the user's login status. If the user does not log out, other websites can impersonate the user and do whatever they want. Because the browser also stipulates that submitting forms is not restricted by the same-origin policy.

It can be seen that the "same-origin policy" is necessary, otherwise cookies can be shared and the Internet will be insecure.

Cross-domain CORS

Our front end and back end are two different ports

position	domain name
Front-end service	127.0.0.1:8080
Backend service	127.0.0.1:8000

Now, the front-end and back-end are different ports, which involves cross-domain access to data, because the browser’s same-origin policy does not support mutual access to data between two different domain names by default, and we need to To transfer data between domain names, we need to add support for cross-domain access to the backend.

We use django-cors-headers to solve the back-end support for cross-domain access.

Use django-cors-headers extension

Reference document https://github.com/ottoyiu/django-cors-headers/

installation

pip install django-cors-headers

Add app

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

Middle layer settings

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

Add whitelist

# CORS
CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8080',
    'localhost:8080',
    'www.meiduo.site:8080',
    'api.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

• Any domain name in the whitelist can access the backend interface
• CORS_ALLOW_CREDENTIALS indicates whether the backend supports operations on cookies in cross-domain access.

The cross-domain implementation process is

1. For the first time, the browser will send an options request to ask the backend whether cross-domain is allowed, and the backend queries whether these two domain names are in the whitelist

2. If the domain name is in the whitelist, inform the browser in the response result to allow cross-domain

3. The browser sends a post request for the second time, carrying user login data to the backend, and completing the login verification operation

options request

post request