Django静态文件引入JavaScript失效问题求助

已解决 - 问题出在Django和JS文件中。修复Django配置后，我未检查浏览器控制台的JS报错。感谢大家的帮助。 #

更新 - 修改配置后需刷新文件内容 #

我在Django项目中引入了JavaScript文件，但遇到问题：CSS样式可正常加载，JS却无法在页面生效，箭头等元素点击无响应。参考教程后问题依旧。

settings.py #

import os
from pathlib import Path

import dotenv

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

dotenv.load_dotenv()

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

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = os.getenv("SECRET_KEY")

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = os.getenv("DEBUG") == "True"

ALLOWED_HOSTS = ['*']


# Application definition

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

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

ROOT_URLCONF = 'Turbine_power_Web.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',
            ],
        },
    },
]
'''
TEMPLATES = [
    {
        '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',
            ],
            'libraries': {
                'staticfiles': 'django.templatetags.static',
            }
        },
    },
]

WSGI_APPLICATION = 'Turbine_power_Web.wsgi.application'


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

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


# Password validation
# https://docs.djangoproject.com/en/4.0/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/4.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


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

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, '../turbineweb/static')]

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

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

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

AUTH_USER_MODEL = 'accounts.User'

LOGIN_REDIRECT_URL = 'home_page'

LOGOUT_REDIRECT_URL = 'home_page'

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

项目urls.py #

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('accounts.urls')),
    path('', include('turbineweb.urls')),
]

应用urls.py #

from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

from . import views


urlpatterns = [
    path('home/', views.home_page, name='home_page'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

模板文件 #

<! DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> Turbine Power Web </title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="TurbinePowerWeb let u choose turbine model adding by turbine manufacturer
        and check their energy production in a given period of time"/>
        <link href="/static/css/style.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </head>
    
    <body>
        <section>
                        <!-- Navbar -->
            <nav class="navbar navbar-expand-lg bg-dark navbar-dark ">
              <!-- Container wrapper -->
              <div class="container-fluid justify-content-center">
                <!-- Navbar brand -->
                <a class="navbar-brand" href="/home/"> Turbine Power Web</a>

                  <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto">
                        
                            <li class="nav-item"><a class="nav-link" href="/logout/">Logout</a></li>
                            <li class="nav-item"><a class="nav-link" href="/password-change/">Change Password</a></li>
                        
                            <li class="nav-item"><a class="nav-link" href="">Turbine Models</a></li>
                            <li class="nav-item"><a class="nav-link" href="">Author</a></li>
                        
                            <li class="nav-item"> Hello, Tester </li>
                    </ul>
                </div>
              </div>
            </nav>
        </section>
    
        <div class="bg">
        
    <main>
        <div id="slider">
            <div id="top-row">
                <img class="arrow left-class" id="arrow-left" src="/static/image/arrow-left.png" />
                <div id="slides-container">
                    <img class="slide active" src="/static/image/about-us.png">
                    <img class="slide" src="/static/image/turbine-models.png">
                    <img class="slide" src="/static/image/calculate-power.png">
                </div>
                <img class="arrow right-class" id="arrow-right" src="/static/image/arrow-right.png" />
            </div>
            <div id="bottom-row">
                <div id="dots">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
        <script src="/static/js/home_page.js"></script>
    </main>

    </body>
</html>

JS文件 #

let activeSlideNumber = 1;
let arrowLeft = document.getElementById('arrow-left')
let arrowRight = document.getElementById('arrow-right')

let hideActiveSlide = () => {
    let activeElement = document.querySelector('.active');
    activeElement.classList.remove('active')
}

let showSlide = (slideNumber) => {
    hideActiveSlide();
    document.querySelector('#slide'+slideNumber).classList.add('active')
}

let showNextSlide = () => {
    if(activeSlideNumber === 3) {
        activeSlideNumber = 1;
    } else {
        activeSlideNumber = activeSlideNumber + 1;
    }
    showSlide(activeSlideNumber);
};

let showPreviousSlide = () => {
    if(activeSlideNumber === 1) {
        activeSlideNumber = 3;
    } else {
        activeSlideNumber = activeSlideNumber - 1;
    }
    showSlide(activeSlideNumber);
};

for(let i = 1; i <= 3; i++) {
    let showSlideI = () => {
        activeSlideNumber = 1;
        showSlide(i)
    };
    document.querySelector('#dol'+i).addEventListener('click', showSlideI);
}

arrowLeft.addEventListener('click', showNextSlide);
arrowRight.addEventListener('click', showPreviousSlide);

项目目录结构 #

• Turbine_power_Web（项目根目录）
  • settings.py
  • urls.py
• accounts（应用）
• turbineweb（应用）
  • static
    • css
      • style.css
    • image
      • images.png
    • js
      • home_page.js
  • templates
    • turbineweb
      • home_page.html
  • init.py
  • admin.py
  • models.py
  • urls.py
• manage.py

终端警告信息 #

WARNINGS:
?: (staticfiles.W004) The directory 'C:\Users\Dom\Desktop\Python_Project\django_proejct_magisterka\Turbine_power_Web\../turbineweb/static' in the STATICFILES_DIRS setting does not exist.

内容的提问来源于stack exchange，提问作者Robson