Gestión de antecedentes Mido
El marco de Django ya proporciona un backend de administración de administración, pero el efecto de diseño de página de las propias páginas del administrador que se pueden modificar es relativamente pequeño, lo que no puede cumplir con los requisitos de página personalizados de la empresa. En este momento, es necesario desarrollar de forma independiente un backend. sistema de gestión final para cumplir con la gestión de datos back-end de la empresa.
Estructura del proyecto
Modo de desarrollo: separación de los extremos frontal y posterior
Marco de interfaz de usuario: VUE
Marco de back-end: marco Django REST
Parte funcional: inicio de sesión de administrador, estadísticas de datos, gestión de usuarios, gestión de productos básicos, gestión de pedidos, gestión de autoridad
Tecnología principal: autenticación de usuario JWT, dominio cruzado CORS
Construcción del entorno del proyecto
1. Ejecutando el código de front-end
Ingrese al directorio de archivos meiduo_mall_admin y ejecute los siguientes comandos
npm run dev
Como se muestra en la siguiente figura, significa que la operación se realizó correctamente:
2. Ejecutando el código de back-end
1. Importar archivos de entorno virtual
pip install -r requeriments.txt
2. Ingrese a la base de datos para crear una base de datos meiduo
mysql -uroot -p
create database meiduo charset=utf8;
3. Importar datos
mysql -uroot -p meiduo < dump.sql
4. Ejecutar
python manage.py runserveriniciar sesión
En la gestión en segundo plano, primero debemos completar la función de inicio de sesión, y podemos completar la función correspondiente reescribiendo el inicio de sesión del formulario Meiduo.
En segundo plano, debido a que los nombres de dominio de nuestros servicios front-end y back-end son diferentes, primero resolvemos el problema entre dominios.
Después de iniciar sesión, seguimos usando jwt
Política del mismo origen del navegador
En 1995, Netscape introdujo la política del mismo origen en los navegadores. Actualmente, todos los navegadores implementan esta política.
La política del mismo origen es una característica de seguridad del navegador. Los scripts del lado del cliente (archivos js) de diferentes fuentes no pueden leer y escribir recursos de la otra parte sin una autorización explícita. Solo los scripts de la misma fuente tienen permisos para operaciones como dom, cookies de lectura y escritura, sesión y ajax.
La URL se compone de protocolo, nombre de dominio, puerto y ruta. Si el protocolo, el nombre de dominio y el puerto de dos URL son iguales, las dos URL tienen el mismo origen.
Por ejemplo, para http://www.example.com/dir/page.htmlesta URL, el protocolo es http://, el nombre de dominio es www.example.comy el puerto es 80(el puerto predeterminado se puede omitir). Su homología es la siguiente.
| url | Si el mismo | la razón |
|---|---|---|
| http://www.example.com/dir2/other.html | si | Mismo protocolo, puerto y host |
| https://example.com/dir/other.html | No | Protocolo diferente (https) |
| http://www.example.com:81 | No | Diferentes puertos (81) |
| http://news.example.com/ | No | Diferentes nombres de dominio |
El propósito de la política del mismo origen es garantizar la seguridad de la información del usuario y evitar que sitios web maliciosos roben datos.
Imagine una situación así: un sitio web es un banco, después de que el usuario inicia sesión, va a otros sitios web. ¿Qué sucede si otros sitios web pueden leer las cookies del sitio web A?
Obviamente, si las cookies contienen privacidad (como depósitos totales), esta información se filtrará. Lo que es más aterrador es que las cookies se utilizan a menudo para guardar el estado de inicio de sesión del usuario. Si el usuario no cierra la sesión, otros sitios web pueden hacerse pasar por el usuario y hacer lo que quieran. Porque el navegador también estipula que el envío de formularios no está restringido por la política del mismo origen.
Se puede ver que la "política del mismo origen" es necesaria, de lo contrario, las cookies se pueden compartir e Internet será inseguro.
CORS entre dominios
Nuestro front-end y back-end son dos puertos diferentes
| posición | nombre de dominio |
|---|---|
| Servicio front-end | 127.0.0.1:8080 |
| Servicio de backend | 127.0.0.1:8000 |
Ahora, el front-end y el back-end son puertos diferentes, lo que implica el acceso entre dominios a los datos, porque la política del mismo origen del navegador no admite el acceso mutuo a los datos entre dos nombres de dominio diferentes de forma predeterminada, y debemos Para transferir datos entre nombres de dominio, necesitamos agregar soporte para el acceso entre dominios al backend.
Usamos django-cors-headers para resolver el soporte de back-end para el acceso entre dominios.
Utilice la extensión django-cors-headers
Documento de referencia https://github.com/ottoyiu/django-cors-headers/
instalación
pip install django-cors-headers
Agregar aplicación
INSTALLED_APPS = (
...
'corsheaders',
...
)
Configuración de la capa media
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
Agregar lista blanca
# CORS
CORS_ORIGIN_WHITELIST = (
'127.0.0.1:8080',
'localhost:8080',
'www.meiduo.site:8080',
'api.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
- Cualquier nombre de dominio en la lista blanca puede acceder a la interfaz de backend
- CORS_ALLOW_CREDENTIALS indica si el backend admite operaciones en cookies en el acceso entre dominios.
El proceso de implementación entre dominios es
1. Por primera vez, el navegador enviará una solicitud de opciones para preguntarle al backend si se permiten dominios cruzados y el backend consultará si estos dos nombres de dominio están en la lista blanca.
2. Si el nombre de dominio está en la lista blanca, informe al navegador en el resultado de la respuesta para permitir el dominio cruzado.
3. El navegador envía una solicitud de publicación por segunda vez, lleva los datos de inicio de sesión del usuario al backend y completa la operación de verificación de inicio de sesión.
solicitud de opciones
post solicitud
