从小白到小黑 python学习之旅 日常总结 92（前台配置 跨域问题 xadmin）

uffy前台配置

axios前后台交互

安装：前端项目目录下的终端
1
 
>: cnpm install axios
配置：main.js
1
2
 
import axios from 'axios'
Vue.prototype.$axios = axios;

cookies操作

安装：前端项目目录下的终端
1
 
>: cnpm install vue-cookies
配置：main.js
1
2
 
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

element-ui页面组件框架

安装：前端项目目录下的终端
1
 
>: cnpm install element-ui
配置：main.js
1
2
3
 
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

bootstrap页面组件框架

安装：前端项目目录下的终端
1
2
 
>: cnpm install jquery
>: cnpm install bootstrap@3
配置jquery：vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};
配置bootstrap：main.js
1
2
 
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

 

 

自定义常量配置文件：settings / const.py

1
2
 
# 自定义的常量配置文件，在settings中 from 该文件 import *，将名字全部丢给settings
BANNER_COUNT = 4

加载自定义配置名称空间：settings / dev.py

1
2
 
# 加载自定义配置名称空间
from .const import *

在轮播图接口中应用：banner / views.py

1
2
3
 
class BannerViewSet(ModelViewSet, mixins.ListModelMixin):
    queryset = models.Banner.objects.filter(is_delete=False, is_show=True).order_by('-orders')[:settings.BANNER_COUNT]
    serializer_class = serializers.BannerSerializer

 

跨域请求

一 同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据

浏览器上就会报错，个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

1
 
已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:8001/SendAjax/ 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。

但是注意，项目2中的访问已经发生了，说明是浏览器对非同源请求返回的结果做了拦截

二 CORS（跨域资源共享）简介

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

三 CORS基本流程

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。
浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

四 CORS两种请求详解

只要同时满足以下两大条件，就属于简单请求。

1
2
3
4
5
6
7
8
9
10
 
（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。

浏览器对这两种请求的处理，是不一样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
 
* 简单请求和非简单请求的区别？

   简单请求：一次请求
   非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。
* 关于“预检”

- 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

支持跨域，简单请求

服务器设置响应头：Access-Control-Allow-Origin = ‘域名’ 或 ‘*’

支持跨域，复杂请求

由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

  • “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
  • “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

五 Django项目中支持CORS

在返回的结果中加入允许信息（简单请求）

1
2
3
4
5
6
 
def test(request):
    import json
    obj=HttpResponse(json.dumps({'name':'lqz'}))
    # obj['Access-Control-Allow-Origin']='*'
    obj['Access-Control-Allow-Origin']='http://127.0.0.1:8004'
    return obj

放到中间件处理复杂和简单请求：

1
2
3
4
5
6
7
8
 
from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
    def process_response(self,request,response):
        if request.method=="OPTIONS":
            #可以加*
            response["Access-Control-Allow-Headers"]="Content-Type"
        response["Access-Control-Allow-Origin"] = "http://localhost:8080"
        return response

六 django 使用django-cors-headers 解决跨域问题

1、使用pip安装

1
 
pip install django-cors-headers

2、添加到setting的app中

1
2
3
4
5
 
INSTALLED_APPS = (
	...
	'corsheaders',
	...
)

3、添加中间件

1
2
3
4
5
6
 
MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
	...
	'corsheaders.middleware.CorsMiddleware',
	'django.middleware.common.CommonMiddleware',
	...
]

4、setting下面添加下面的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
	'*'
)
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
)

 

分离的前后台交互

后台处理跨域

安装插件
1
2
3
 
>: pip install django-cors-headers

插件参考地址：https://github.com/ottoyiu/django-cors-headers/
项目配置：dev.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
# 注册app
INSTALLED_APPS = [
	...
	'corsheaders',
]

# 添加中间件
MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware',
]

# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True

# 允许的请求头
CORS_ALLOW_HEADERS = (
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",

    # 额外允许的请求头
    'token',
)

前台请求Banner数据

修订Banner.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<template>
    <div class="banner">
<!--        <el-carousel height="400px">-->
<!--            <el-carousel-item v-for="item in 4" :key="item">-->
<!--                <img src="../assets/img/banner1.png" alt="">-->
<!--            </el-carousel-item>-->
<!--        </el-carousel>-->
        <el-carousel height="400px">
            <el-carousel-item v-for="banner in banner_list" :key="banner.title">
                <router-link :to="banner.link">
                    <img :src="banner.image" alt="">
                </router-link>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        data() {
            return {
                banner_list: []
            }
        },

        // 在created钩子中
        created() {
            this.$axios({
                url: this.$settings.base_url + '/home/banners/',
                headers: {  // 测试前台给后台提交请求头
                    // authorization: 'jwt abc.def.xyz',
                    // token: 'jwt abc.def.xyz',
                }
            }).then(response => {
                console.log(response.data);
                this.banner_list = response.data;
            }).catch(error => {
                console.log(">>>", error);
            })
        }

    }
</script>

<style scoped>
    .el-carousel__item {
        height: 400px;
        min-width: 1200px;
    }
    .el-carousel__item img {
        height: 400px;
        margin-left: calc(50% - 1920px / 2);
    }
</style>

 

xadmin后台管理

安装：luffy虚拟环境下
1
 
>: pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2
注册app：dev.py
1
2
3
4
5
6
7
8
9
 
INSTALLED_APPS = [
    # ...
    # xadmin主体模块
    'xadmin',
    # 渲染表格模块
    'crispy_forms',
    # 为模型通过版本控制，可以回滚数据
    'reversion',
]
xadmin：需要自己的数据库模型类，完成数据库迁移
1
2
 
python manage.py makemigrations
python manage.py migrate
设置主路由替换掉admin：主urls.py
1
2
3
4
5
6
7
8
9
10
11
 
# xadmin的依赖
import xadmin
xadmin.autodiscover()
# xversion模块自动注册需要版本控制的 Model
from xadmin.plugins import xversion
xversion.register_models()

urlpatterns = [
    # ...
    path(r'xadmin/', xadmin.site.urls),
]
创建超级用户：大luffyapi路径终端
1
2
3
 
# 在项目根目录下的终端
python manage.py createsuperuser
# 账号密码设置：admin | Admin123
完成xadmin全局配置：新建home/adminx.py
1
2
3
4
5
6
7
8
9
10
11
12
 
# home/adminx.py
# xadmin全局配置
import xadmin
from xadmin import views

class GlobalSettings(object):
    """xadmin的全局配置"""
    site_title = "路飞学城"  # 设置站点标题
    site_footer = "路飞学城有限公司"  # 设置站点的页脚
    menu_style = "accordion"  # 设置菜单折叠

xadmin.site.register(views.CommAdminView, GlobalSettings)
在adminx.py中注册model：home/adminx.py
1
2
3
 
from . import models
# 注册
xadmin.site.register(models.Banner)
posted @ 2020-07-21 22:24  It's_cool  阅读(182)  评论(0)    收藏  举报