バンドアプリ内ではなく、staticという別のディレクトリに静的ファイルを含めようとしています。
このディレクトリにはbuildディレクトリが含まれ、CSSおよびJSディレクトリが含まれます。
CSSおよびJSディレクトリ内のファイルに加えて、bower_components内にあるjquery、react、browserなどの縮小ファイルも含めたいと思います。ディレクトリ。
以下の私のプロジェクト構造:
Music/
├── band/
│ ├── migrations/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── serializers.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── music/
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── views.py
│ └── wsgi.py
├── node_modules/
├── static/
├──── static/
│ ├── bower_components/
│ ├── build/
│ ├── css/
│ ├── images/
│ └── js/
├── templates/
├── band/
├── MasterPages/
├── index.html
music内のsettings.pyには、次のものが含まれています。
STATIC_URL = '/static/'
STATIC_ROOT = 'C:/Users/Broski/PycharmProjects/Music/static'
MEDIA_ROOT = 'C:/Users/Broski/PycharmProjects/Music/upload'
このMasterPage.htmlファイルは、MasterPagesディレクトリのテンプレートの下にあります。
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Music</title>
<link rel="stylesheet" href="{% static 'build/css/main.css' %}" type="text/css" />
</head>
<body>
{% block content %}
{% endblock %}
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bower_components/react/react.min.js' %}"></script>
<script src="{% static 'bower_components/babel/browser.min.js' %}"></script>
<script type="text/babel" src="{% static 'build/js/indexReact.js' %}"></script>
</body>
</html>
Webサイトをロードすると、テンプレートはレンダリングされますが、静的ファイルはレンダリングされません。 404エラーが発生します。
GET http://127.0.0.1:8000/static/css/main.css
127.0.0.1/:22 GET http://127.0.0.1:8000/static/bower_components/jquery/dist/jquery.min.js
127.0.0.1/:23 GET http://127.0.0.1:8000/static/bower_components/react/react.min.js
127.0.0.1/:26 GET http://127.0.0.1:8000/static/bower_components/babel/browser.min.js 404 (Not Found)
ご覧のとおり、このYouTubeチュートリアルを続行するには、React、Jquery、およびBrowserを正しくロードする必要があります。
DjangoおよびReact.jsビデオ1:プロジェクト構造の定義 を使用してWebサイトを構築する
ありがとうございました
修繕。
STATIC_ROOTとSTATICFILES_DIRSを混同しました
したがって、static_rootを削除し、次のように置き換えました。
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static/'),
)
ベースディレクトリがプロジェクトフォルダを指しているところ。