vue+drf项目-后台主页设计

发表于 更新于 分类于 ， 本文字数： 9.3k 阅读时长 ≈ 8 分钟

9.后台主页模块设计

home模块

创建home模块

1
2
3
4
5
6
7
前提：在 luffy 虚拟环境下

1.终端从项目根目录进入apps目录
>: cd luffyapi & cd apps

2.创建app
>: python ../../manage.py startapp home

路由分发

主路由：luffyapi/urls.py
1
2
3
4
5
6
from django.urls import path, re_path, include
urlpatterns = [
	# ...
    path('home/', include('home.urls')),
    # ...
]
子路由：home/urls.py
1
2
3
4
from django.urls import path, re_path
urlpatterns = [

]

Banner数据表model设计

utils/model.py
1
2
3
4
5
6
7
8
9
10
11
from django.db import models

class BaseModel(models.Model):
    created_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
    updated_time = models.DateTimeField(auto_now=True, verbose_name='最后更新时间')
    is_delete = models.BooleanField(default=False, verbose_name='是否删除')
    is_show = models.BooleanField(default=True, verbose_name='是否上架')
    orders = models.IntegerField(verbose_name='优先级')

    class Meta:
        abstract = True
home/models.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from django.db import models
from utils.model import BaseModel

class Banner(BaseModel):
    title = models.CharField(max_length=16, unique=True, verbose_name='名称')
    image = models.ImageField(upload_to='banner', verbose_name='图片')
    link = models.CharField(max_length=64, verbose_name='跳转链接')
    info = models.TextField(verbose_name='详情')  # 也可以用详情表，宽高出处

    class Meta:
        db_table = 'luffy_banner'
        verbose_name_plural = '轮播图表'

    def __str__(self):
        return self.title
数据迁移：在大luffyapi路径下的终端
1
2
>: python manage.py makemigrations
>: python manage.py migrate

注册home模块：dev.py

1
2
3
4
5
INSTALLED_APPS = [
    # ...
    'rest_framework',
    'home',
]

设计Banner数据接口

home/serializers.py
1
2
3
4
5
6
from rest_framework import serializers
from . import models
class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Banner
        fields = ['title', 'image', 'link']
home/views.py
1
2
3
4
5
6
7
from rest_framework.viewsets import ModelViewSet
from rest_framework import mixins
from . import models, serializers

class BannerViewSet(ModelViewSet, mixins.ListModelMixin):
    queryset = models.Banner.objects.filter(is_delete=False, is_show=True).all()
    serializer_class = serializers.BannerSerializer
home/urls.py
1
2
3
4
5
6
7
8
9
from django.urls import path, include
from utils.router import router
from . import views
# 注册ViewSet的路由
router.register('banners', views.BannerViewSet, 'banner')

urlpatterns = [
    path('', include(router.urls)),
]
接口
1
http://localhost:8000/home/banners/

10.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)

11.分离的前后台交互

后台处理跨域

安装插件

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>

12.自定义配置

自定义常量配置文件：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

13.浏览器屏幕缩放bug修复

问题：浏览器缩放时，轮播图显示不全，滚动水平滚动条，发现图片缺失

解决：隐藏水平滚动条，页面都只提供垂直滚动条的需求

global.css

1
2
3
4
/* 水平超出部分默认隐藏 */
#app {
    overflow: hidden;
}

14.跨域请求详解

一 同源策略

同源策略（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',
)