关于django上传显示图片,以及css,js等样式的显示问题的解决

      最近在重写自己的博客,之前的就是只能看文字,没有涉及太多的前端问题,这次在重写的过程发现了很多的问题,关于如何加载css,js,以及图片的路径问题.

     首先是css, js加载显示的问题,

      主要参考了这篇博客    django记载css文件和图片  讲的非常详细

       这里主要是记录一下.

       首先看一下整体的结构.

        

myBlog/
├── article
│   ├─.....
│   ├── templates
│   │   └── article
│   │       ├── about.html
│   │       ├── addblog.html
│   │       ├── blog.html
│   │       ├── index.html
│   │       └── static
│   │           ├── css
│   │           │   ├
│   │           ├── fonts
│   │           │   ├
│   │           ├── images
│   │           │   ├
│   │           ├── js
│   │           │   ├

── myBlog
    ├
    ├── settings.py
    ├── settings.pyc
    ├── urls.py
    ├── urls.pyc
    ├── wsgi.py
    └── wsgi.pyc

        主要主要更改的就是红色部分, 在settings.py里设置static(加载css等), media(加载上传的图片)静态url, 然后在添加到urls.py里面.(这个只是我的设置), 我的html页面里有一些不需要更改的图片,就是在static/images, 而一些需要上传的就放在media下面.

         首先设置settings的template

          

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'article/templates').replace('\\', '/')],

        然后在settings的后面把STATIC_URL, STATIC_ROOT设置,STATIC_ROOT就是我的css,js等文件存储的位置.

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'article/templates/article/static').replace('\\', '/')
STATICFILES_DIRS = (
    ('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),
    ('images', os.path.join(STATIC_ROOT, 'images').replace('\\', '/')),
    ('fonts', os.path.join(STATIC_ROOT, 'font').replace('\\', '/')),
    ('js', os.path.join(STATIC_ROOT, 'js').replace('\\', '/')),
    ('sass', os.path.join(STATIC_ROOT, 'sass').replace('\\', '/')),
)

        最后在urls.py里添加一个

        在urls里添加  from django.contrib.staticfiles.urls import staticfiles_urlpatterns,最后在末尾添加下面的代码

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'article/', include('article.urls'))
]
urlpatterns += staticfiles_urlpatterns()

          这样你的css, imgae, js等文件就可以被拉起来了.

          接下来设置media,开始也是只是添加了MEDIA_URL,MEDIA_ROOT, 但是没有把静态的url添加到url里,导致上上传的图片一直无法正常显示.

          首先也是先设置MEDIA_URL, MEDIA_ROOT,

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\','/')

          在把media的静态url添加到urls里面,就可以拉起你上传的图片了

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

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'article/', include('article.urls'))
]
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

          

        这个就是上传后的效果, 继续加油.