Python实战-Django框架搭建美多商城后台管理环境搭建以及登录《一》
美多后台管理
Django框架已经提供了一个Admin管理后台，但是Admin的本身的页面可修改的页面布局效果比较少，无法满足公司定制页面需求，这时候就需要独立开发一套后台管理系统，满足公司对后台数据的管理。
项目架构
开发模式：前后端分离
前端框架：VUE
后端框架：Django REST framework
功能部分：管理员登录，数据统计，用户管理，商品管理，订单管理，权限管理
主要技术 ： JWT用户认证 ，CORS跨域
项目环境搭建
1、前端代码的运行
进入meiduo_mall_admin文件目录下，执行如下指令
npm run dev
出现如下图所示，表示运行成功：
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请求