Django开发实际上线的一些优化

之前一直使用gulp同步刷新浏览器中的css、js、html代码，但是在django实际操作中，发现这个并不实用，原因是将html改造成DTL时太过费时间，我指的是频繁修改的时候，因为要修改静态资源（如css、图片）的路径，同时又要去更改网页中的变量；当网站已经上线再拉取下来使用gulp进行修改时，又要再进行一遍修改，因此在此备注。
1.想使用scss书写样式表，实时同步html的css文件时（并非保存代码就同步，而是需要再次刷新浏览器），使用sass_tags，具体操作如下：

#安装库
pip install libsass django-compressor django-sass-processor

在settings.py文件中，增加如下代码，其中STATICFILES_DIRS指代的是我目前所有静态资源存放处，也就是前端html页面中，使用static 标签例如static 'imgs/icon.png'可以获取到的内容（前提是debug=true时），而下面的SASS_PROCESSOR_ROOT配置的是存放css文件的路径，后续上线时可以将所有STATICFILES_DIRS文件中除了scss文件夹都复制一份到SASS_PROCESSOR_ROOT中，这样，在配置web服务器nginx时，即可正常访问到资源：

INSTALLED_APPS = [
    ...
    # 增加scss编译
    'sass_processor',
]
# 新建通用静态文件存放文件夹，将其中所有资源都复制一份到丢到SASS_PROCESSOR_ROOT中，
# 这样上线时nginx好配置一些
STATICFILES_DIRS = [BASE_DIR / 'Front']

# Django Sass 编译后css 的存放位置，不用创建，自动生成
SASS_PROCESSOR_ROOT = BASE_DIR / 'StaticFile'

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder',
]
#Debug为false的时候才会压缩
SASS_OUTPUT_STYLE = 'compressed'

nginx配置文件：

location /static {
     # 静态文件地址
     alias /srv/ComData/StaticFile;
}

前端页面应用，上线前将其注释掉，更换成css路径即可：

（备注：后续发现不注释，只使用sass_src也可以正确的指向css文件）

{% load sass_tags %}
....
<link rel="stylesheet" href="{% sass_src 'css/search.scss' %} ">
{% comment %} <link rel="stylesheet" href="{% static 'css/search.css' %} "> {% endcomment %}

2.数据量偏大的时候，queryset记得使用切片操作

results = super().get_queryset().filter(other_name__startswith=keyRes)[:20]

3.网页所有绝对宽度统一删除，换成相对宽度，1em=16px，尽量采用flow布局，img设置max-width，在scss文件中，通过屏幕大小修改样式的自适应代码如下：

.search_group{
    @media screen and (min-width:500px){
        margin-left: 25%;
    }
    @media screen and (max-width:500px){
        margin-left: 10%;
    }
}

YOLO813

Django开发实际上线的一些优化