Django笔记5--隐藏真实的静态文件路径&后台上传图片到服务器&富文本编辑器_{% load static from staticfiles %}-CSDN博客

本文链接：https://blog.csdn.net/Nty268/article/details/121990706

1、隐藏真实的静态文件路径

{% load static from staticfiles %}

通常情况下，当在.html文件中访问服务器下的静态文件时，如：img标签通过src属性获取服务器内的图片，link获取写好的css文件，script获取js文件等等，通常会在src属性里写入静态文件真实的文件路径，此时在浏览器中查看网页源代码，也可以通过src看到这些文件真实的文件路径。
为保护服务器文件的安全，我们可以对真实的静态文件路径进行隐(wei)藏(zhuang)。

静态文件路径隐藏–使用 STATICFILES_DIRS

1、修改settings.py文件中的static路径

将settings.py文件中的 STATIC_URL 对应的路径修改成任意想要显示的虚假路径:

STATIC_URL = ‘/static/’ ==> STATIC_URL = ‘/hello/’

然后需要当访问静态文件时，先访问假的hello文件路径，然后再提供真正的路径：

STATICFILES_DIRS = [os.path.join(BASE_DIR,“static”)]

完整代码如下：

STATIC_URL = '/hello/'  # fake show static path
STATICFILES_DIRS = [os.path.join(BASE_DIR,"static")]  # real static path

2、修改html访问静态文件的代码

此时，如果要访问统一静态文件夹static下的静态文件，伪装前的url写成：

< img src="/static/imgs/2.jpg" alt="">

而现在可以写成：

{% load static from staticfiles %}
< img src="{% static '/imgs/2.jpg' %}" alt="">

↑↑↑注意更新↓：
在Django3.0版本之后，这些使用方式

{% load staticfiles %}
{% load static from staticfiles %}
{% load adminstatic %}

都已经不再使用，而是统一都使用一行：

{% load static %}

来代替这些语句，所以如果你使用的Django版本在2甚至3以上，推荐写成：

{% load static %}
< img src="{% static '/imgs/2.jpg' %}" alt="">

伪装后访问网页，并查看源代码：
在这里插入图片描述
可以看到真实的

/static/imgs/

路径就会被替换成伪装后的虚假路径：

/hello/imgs/

其中网页源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Static</title>
    {% load static from staticfiles %}

</head>
<body>
<!--<img src="/static/imgs/2.jpg" alt="">-->
<img src="{% static '/imgs/2.jpg' %}" alt="">
</body>
</html>

项目路径展示：
在这里插入图片描述

这里返回网页的视图函数，及调用函数的路由配置相关代码不多赘述。

2、上传图片

I、后台上传图片

①、指定上传的访问路径MEDIA_URL、存储路径MEDIA_ROOT

在settings.py文件中，添加指定上传的访问路径MEDIA_URL、存储路径MEDIA_ROOT：

# 对于用户上传的资源
# 访问上传资源的路径
MEDIA_URL = "/media/"  # 该文件夹名media即存放路径的static/media，文件夹名字任意定义
MEDIA_ROOT = os.path.join(BASE_DIR,"static/media")

注意：
1、提前在static文件夹中创建好指定的media（名字自定义）文件夹，用于服务器存放后台上传的文件
2、MEDIA_URL中的访问路径，前后有 /

②、配置主路由

在settings.py文件同级目录里的urls.py中配置：

1、引入settings

from django.conf import settings

2、将MEDIA_URL 指向 MEDIA_ROOT

urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

③、创建模型

myapp文件夹下的models.py文件中添加模型PostImg：

class PostImg(models.Model):
    picture = models.ImageField(upload_to='avatar', verbose_name='图片')

    class Meta:
        verbose_name_plural = '上传图片'

upload_to即保存到某个文件中，文件夹若不存在则自动创建。

⑤、注册模型(用于后台显示)

myapp文件夹下的admin.py文件中注册模型PostImg：

admin.site.register(PostImg)

⑥、生成迁移文件与迁移（使创建好的模型转换成数据表）

在terminal窗口下执行生成迁移文件命令：

python manage.py makemigrations

执行成功后，继续执行迁移命令：

python manage.py migrate

⑦、启动django服务，登录后台

在terminal窗口下执行启动django服务命令：

python manage.py runserver

执行成功后，浏览器访问http://127.0.0.1:8000/admin/
在这里插入图片描述
登录成功后可以看到MYAPP下，创建并注册好的上传图片模型PostImg：

点击 +增加，选择文件并保存：

保存成功：

在MySQL数据库中查看上传的a.jpg，a.jpg保存到了upload_to指定的avatar文件夹中:

PyCharm中查看后台上传的a.jpg：
在这里插入图片描述

II、客户端页面form表单上传图片

1、在html页面创建form表单

设置表单属性

action="/myapp/upload"   # 表单提交的路由
method="post"   # 请求方式设置为post请求
enctype="multipart/form-data"  # 使form表单能够上传文件

<form action="/myapp/upload" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    选择文件:<input type="file" name="avatar"><br>
    <input type="submit" value="上传">

</form>

2、编写视图函数，返回html页面

路由调用视图函数时，判断请求类型，若为第一次请求–GET请求，返回form表单页面
若为form表单提交的POST请求，则获取上传的图片内容，保存到服务器中。
视图函数代码myapp/views.py：

def uploadimg(request):
    if request.method == 'GET':
        return render(request,'myapp/uploadimg.html')  #返回编写好的form表单页
    elif request.method == 'POST':
        img_obj = request.FILES.get('avatar')  # 通过input的name属性获取对应的图片对象
        from django.conf import settings
        fpath = os.path.join(settings.MEDIA_ROOT,img_obj.name)  # img_obj.name获取图片原始名字
        with open(fpath,'wb') as f:
            data = img_obj.file.read()  # 读取图片
            f.write(data)
        return HttpResponse("上传成功!")

3、配置访问路由（myapp/urls.py）

url(r'^upload', uploadimg)

4、客户端访问路由 http://127.0.0.1:8000/myapp/upload

在这里插入图片描述
上传b.jpg图片

form表单向http://127.0.0.1:8000/myapp/upload提交图片成功，并接收到HttpResponse(“上传成功!”)：

查看项目文件夹中存放路径：

b.jpg在服务器项目文件中保存成功。

3、富文本编辑器

编辑文本时，单纯的写入文字可能并不能满足使用要求，或者我们需要使文本文字拥有更多样式时，我们可以选择使用富文本编辑器来实现编辑文本时的各种需求。

①、安装django-tinymce库

Terminal运行：X:\xx\xxx> pip install django-tinymce

或
在这里插入图片描述

②、settings.py文件添加tinymce应用

在INSTALLED_APPS这添加注册应用：

'tinymce',

并修改tinymce的默认配置（按需修改）：

TINYMCE_DEFAULT_CONFIG = {
    'theme':'silver',  # 此主题可让富文本显示更多菜单选项
    'language':'zh_CN',  # 中文语言显示
    'menubar':'edit format',  # 显示菜单栏
    # 菜单插件（显示出来的功能）
    'plugins': 'lists,advlist bold underline alignleft aligncenter alignright fontselect fontsizeselect code image link table',
    # 工具栏
    'toolbar': 'bullist numlist bold underline alignleft aligncenter alignright fontselect fontsizeselect code image link table',
    # 富文本添加图片时，访问的路径
    'images_upload_url': '/uploadImg/',
    'width':800,
    'height':400
}

③、在models.py文件里的模型中引用富文本编辑器

先从tinymce.models中导入HTMLField：

from tinymce.models import HTMLField

使用：

content = HTMLField(verbose_name='内容')

④、配置主路由urls.py

先从django.conf.urls中导入include

from django.conf.urls import url, include

然后在主路由中添加：

url(r'^tinymce',include("tinymce.urls")),

此时启动django服务，并访问服务器
在添加模型数据时就可以看到使用的富文本编辑器：
在这里插入图片描述

可能报错？：

from django.urls import path
ImportError: cannot import name ‘path’ from ‘django.urls’

出现这个错误是因为django-tinymce和当前使用的django版本差异导致的，
tinymce使用path为2版本，而当前项目使用的django可能是使用url的1版本

解决：

根据报错提示的X:\xxx\xxx\site-packages\tinymce\urls.py，找到该urls.py文件
将原来的：

from django.urls import path

修改为：

from django.conf.urls import url

并将该文件中所有使用的path该为url（一般就四个）

4、富文本编辑器中添加图片

有时编辑文本时，除了丰富的文本样式，我们可能还需要编写图文文本；而正好django-tinymce库中的富文本编辑器也提供了文本中插入图片的功能：
在这里插入图片描述
如果是普通方式则无需配置服务器
若选择本地上传至富文本编辑器，则需要服务器对该功能进行对应配置，以使该图文文本保存时，服务器能够保存上传的对应图片。

本地上传图片至富文本编辑器

①、settings.py文件同级目录中新建一个py文件

如名为utils.py,该文件主要在客户端确认上传图片时，主路由能够调用该文件中的对应处理函数。
utils.py代码配置如下：

import os
from datetime import datetime
from django.conf import settings
from django.http import JsonResponse


def uploadImg(request):
    imgObj = request.FILES.get('file')

    imgName = str(int(datetime.today().timestamp())) + imgObj.name

    imgPath = os.path.join(settings.MEDIA_ROOT, imgName)

    with open(imgPath, 'wb') as f:
        data = imgObj.file.read()
        f.write(data)

    return JsonResponse({
        'location': '/media/' + imgName
    })

其中static路径设置见上文 1、

②、配置主路由urls.py

先从新建的utils.py文件中导入编写好的uploadImg函数：

from .utils import uploadImg

编写路由，urlpatterns列表中添加：

url(r'^uploadImg', uploadImg),

③、CSRF报错？：

上传图片默认为POST请求，需进行CSRF认证，
但是可以让上传的图片函数跳过csrf检查：
在主路由中导入：

from django.views.decorators.csrf import csrf_exempt

路由修改为：

url(r'^uploadImg',csrf_exempt(uploadImg)),

④、图片显示：

以上操作只能在富文本框中显示一个图片图标，并不能完整显示出图片内容，如果要完整显示，可以对富文本框进行设置：
在settings.py文件的tinymce的默认配置中添加(见3、②)：

'relative_urls': False,  # 只显示绝对路径链接（关闭相对路径）
'remove_script_host': True,  # 图片显示设置

此时在富文本框中添加一张图片：
在这里插入图片描述
能够正常显示。