Python实战-Django框架搭建美多商城后台管理环境搭建以及登录《一》

美多后台管理

Django框架已经提供了一个Admin管理后台,但是Admin的本身的页面可修改的页面布局效果比较少,无法满足公司定制页面需求,这时候就需要独立开发一套后台管理系统,满足公司对后台数据的管理。

项目架构

开发模式:前后端分离

前端框架:VUE

后端框架:Django REST framework

功能部分:管理员登录,数据统计,用户管理,商品管理,订单管理,权限管理

主要技术 : JWT用户认证 ,CORS跨域

项目环境搭建

1、前端代码的运行

进入meiduo_mall_admin文件目录下,执行如下指令

npm run dev

出现如下图所示,表示运行成功:

Python实战-Django框架搭建美多商城后台管理环境搭建以及登录《一》_第1张图片

2、后端代码的运行

1、导入虚拟环境文件

pip install -r requeriments.txt

2、进入数据库创建meiduo数据库

mysql -uroot -p 

create database meiduo charset=utf8;

3、导入数据

 mysql -uroot -p meiduo < dump.sql

4、运行

python manage.py runserver

登录

后台管理中我们首先需要完成登录功能,我们可以通过改写美多表单登录来完成相应的功能。

在后台登录中,由于我们前端服务和后端服务的域名不一样,所以我们首先解决跨域问题。

登后的状态保持我们采用jwt

 

浏览器的同源策略

1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。

同源策略是浏览器的一个安全功能,不同源的客户端脚本(js文件)在没有明确授权的情况下,不能读写对方资源。只有同一个源的脚本赋予dom、读写cookie、session、ajax等操作的权限。

url由协议、域名、端口和路径组成,如果两个url的协议、域名和端口相同,则这两个url是同源的。

举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下。

url 是否同源 原因
http://www.example.com/dir2/other.html 协议、端口、主机相同
https://example.com/dir/other.html 不同的协议(https)
http://www.example.com:81 端口不同(81)
http://news.example.com/ 域名不同

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?

很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。

由此可见,"同源政策"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

跨域CORS

我们的前端和后端分别是两个不同的端口

位置 域名
前端服务 127.0.0.1:8080
后端服务 127.0.0.1:8000

现在,前端与后端分别是不同的端口,这就涉及到跨域访问数据的问题,因为浏览器的同源策略,默认是不支持两个不同域名间相互访问数据,而我们需要在两个域名间相互传递数据,这时我们就要为后端添加跨域访问的支持。

我们使用django-cors-headers来解决后端对跨域访问的支持。

使用django-cors-headers扩展

参考文档https://github.com/ottoyiu/django-cors-headers/

安装

pip install django-cors-headers

添加应用

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

中间层设置

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

添加白名单

# CORS
CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8080',
    'localhost:8080',
    'www.meiduo.site:8080',
    'api.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie
  • 凡是出现在白名单中的域名,都可以访问后端接口
  • CORS_ALLOW_CREDENTIALS 指明在跨域访问中,后端是否支持对cookie的操作。

跨域实现流程为

1、浏览器会第一次先发送options请求询问后端是否允许跨域,后端查询白名单中是否有这两个域名

2、如过域名在白名单中则在响应结果中告知浏览器允许跨域

3、浏览器第二次发送post请求,携带用户登录数据到后端,完成登录验证操作

options请求

post请求

 

你可能感兴趣的:(编程,python,web,数据库,前端)