Django中JavaScript引用路径设置

Question

Python Django框架Web开发HTML引用的外部js文件中引用其他js文件路径怎么设置？

首先settings中配置如下：

import os
from pathlib import Path
import mimetypes

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-2hd2%%1lqhpn!j7wpt+o28ft7r!!c=b83%)2vslk_+8)9f6us*'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

ALLOWED_HOSTS = ['*', ]

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'data'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

ROOT_URLCONF = 'webserver.urls'

TEMPLATES = [
    # {
    #     'BACKEND': 'django.template.backends.django.DjangoTemplates',
    #     'DIRS': [],
    #     'APP_DIRS': True,
    #     'OPTIONS': {
    #         'context_processors': [
    #             'django.template.context_processors.debug',
    #             'django.template.context_processors.request',
    #             'django.contrib.auth.context_processors.auth',
    #             'django.contrib.messages.context_processors.messages',
    #         ],
    #     },
    # },
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'), ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    }
]

WSGI_APPLICATION = 'webserver.wsgi.application'

# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    },

}

# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/

STATIC_URL = '/static/'
# STATIC_ROOT = os.path.join(BASE_DIR, '/static/')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "/static/"),
    # .replace("\\", "/"),
)
STATIC_ROOT = 'static'

# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

X_FRAME_OPTIONS = 'SAMEORIGIN'
# DENY ：表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许
# SAMEORIGIN ：表示该页面可以在相同域名页面的 frame 中展示
# ALLOW-FROM uri ：表示该页面可以在指定来源的 frame 中展示
SECURE_CONTENT_TYPE_NOSNIFF = False
mimetypes.add_type('text/css', '.css')
mimetypes.add_type('application/javascript', '.js')

然后是项目urls.py中的路由，不是app子目录的urls。

from django.contrib import admin
from django.urls import path, include
from django.views import static
from django.conf import settings
from django.urls import re_path as url

urlpatterns = [
    path('admin/', admin.site.urls),
    path('data/', include('data.urls')),
    url(r'^static/(?P<path>.*)$', static.serve, {'document_root': settings.STATIC_ROOT}, name='static'),
]

在views.py中

def record_list(request):
    if request.method == 'GET':
        client = pymongo.MongoClient(host="192.168.1.2", port=27017, username="admin", password="123456")
        table_record = client[constants.DB_NAME][constants.TB_RECORD]

        # 从第一页0开始，每页30条
        list = table_record.find().skip(0).limit(30)
        result = []
        for h in list:
            h['_id'] = str(h['_id'])
            result.append(h)
        data_dict = {
            'data': result, 'code': 200, 'msg': 'Sucess'
        }
        # return HttpResponse(json.dumps(data_dict), 'application/json')
        # 返回到前端的HTML页面，
        return render(request, 'index.html', data_dict)
    else:
        return HttpResponse('Hello world')

项目结构和index.html

然后在index.js中引用外部的 mqtt.js和百度的echart.js

//{% load static %}

// 加载外部js文件
function loadJS(url) {
    var domScript = document.createElement("script");
    domScript.type = "text/javascript";
    domScript.src = url;
    document.head.appendChild(domScript);
}

loadJS("js/mqtt.js");
loadJS("js/echarts.js");

//loadJS("{% static 'js/mqtt.js' %}")
//loadJS("{% static 'js/echarts.js' %}")

var topic = "iot/sertogw/result";
var mqttclient;
var connected = false;

var myCharts = [];
var myOptions = [];

运行结果：很明显是 mqtt和ecahrts两个脚本的引用路径不对，html中可以用 {% load static %} 和 src="{% static 'js/index.js' %}" 处理，但是在js中却没找到相应的办法。

GET http://127.0.0.1:8000/data/record/list/js/echarts.js net::ERR_ABORTED 404 (Not Found)
GET http://127.0.0.1:8000/data/record/list/js/mqtt.js net::ERR_ABORTED 404 (Not Found)

请问在django环境下 js中怎么引用外部js呢

Answer 1

【以下回答由 GPT 生成】

对于在Django中设置JavaScript引用路径的问题，您可以按照以下步骤进行操作：

1. 确保您已经在settings.py中设置了STATIC_URL和STATIC_ROOT。STATIC_URL用于在模板中引用静态文件的基本路径，STATIC_ROOT则是静态文件的根目录。

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

1. 在项目的根目录下创建一个名为static的文件夹，用于存放静态文件。

2. 将您的JavaScript文件放置在static文件夹中。假设您的JavaScript文件名为script.js，则将其放置在static文件夹的某个子文件夹中，例如static/js/script.js。

3. 在您的HTML模板中需要引用该JavaScript文件的位置，使用静态文件的URL进行引用。可以使用Django的{% static %} 模板标签来生成静态文件的URL。

<script src="{% static 'js/script.js' %}"></script>

这样可以根据STATIC_URL的设置生成静态文件的完整URL。

1. 在Django的URL配置文件中(urls.py)，确保已经包含了静态文件的URL配置。

from django.conf import settings
from django.conf.urls.static import static

# 其他URL配置代码

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

这样可以确保在开发服务器中正确地提供静态文件。

请注意，如果您使用的是Django的开发服务器进行开发，在DEBUG设置为True时，Django将自动提供静态文件。但是在生产环境中，您需要根据实际情况配置Web服务器来提供静态文件。

希望以上解决方案可以帮助您解决问题。如果您还有其他疑问，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^