一、静态文件依赖

学习django的时候发现静态文件(css,js等)不能只在html中引入,还要在项目的settings中设置,否则会报以下错误

[11/Sep/2018 03:18:15] "GET /static/js/index.js HTTP/1.1" 404 1646
[11/Sep/2018 03:18:15] "GET /static/js/lib/vue/dist/vue.js HTTP/1.1" 404 1679
[11/Sep/2018 03:18:15] "GET /static/js/lib/jquery/dist/jquery.js HTTP/1.1" 404 1697
[11/Sep/2018 03:18:15] "GET /static/css/bootstrap/dist/js/bootstrap.js HTTP/1.1" 404 1715
[11/Sep/2018 03:18:15] "GET /static/css/bootstrap/dist/js/bootstrap.js HTTP/1.1" 404 1715
[11/Sep/2018 03:18:15] "GET /static/js/lib/vue/dist/vue.js HTTP/1.1" 404 1679
[11/Sep/2018 03:18:15] "GET /static/js/index.js HTTP/1.1" 404 1646

具体引入方法如下(静态文件均存放在static下):

1.INSTALLED_APPS

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

2.STATIC_URL

STATIC_URL = '/static/'

3.STATICFILES_DIRS

STATICFILES_DIRS = [(os.path.join(BASE_DIR,'static'))] #这里必须是list或者tuple格式

引入后重新加载:

[11/Sep/2018 03:22:11] "GET / HTTP/1.1" 200 522
[11/Sep/2018 03:22:11] "GET /static/js/lib/jquery/dist/jquery.js HTTP/1.1" 200 271751
[11/Sep/2018 03:22:11] "GET /static/js/index.js HTTP/1.1" 200 1966
[11/Sep/2018 03:22:11] "GET /static/css/bootstrap/dist/js/bootstrap.js HTTP/1.1" 200 123765
[11/Sep/2018 03:22:11] "GET /static/js/lib/vue/dist/vue.js HTTP/1.1" 200 289303

二、前端引入方式有二:

1.{%static%}方式   

在页面的较上处写:
{% load staticfiles %}

在 link script 等src 写 :
{%static 'xxx.css'%} 
{%static 'xxx.js'%}

2./static/..方式

在 link script 等src 写 :
/static/xxx.cs

两者可混用,但不推荐

DONE。

[Django基础] django解决静态文件依赖问题以及前端引入方式的更多相关文章

  1. Django 2.0 学习(13):Django模板继承和静态文件

    Django模板继承和静态文件 模板继承(extend) Django模板引擎中最强大也是最复杂的部分就是模板继承了,模板继承可以让我们创建一个基本的"骨架"模板,它可以包含网页中 ...

  2. Django整理(三) - 配置文件&静态文件

    项目常用配置 在项目的 setting.py 配置文件中,进行项目相关配置的修改. 1. BASE_DIR 当前项目的根目录,Django会依此来定位工程内的相关文件,我们也可以使用该参数来构造文件路 ...

  3. 擦他丫的,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了!

    擦 ,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了! 问题在于我使用的谷歌浏览器,默认使用了缓存,导致每次访问同一个url时,都返回的是缓存里面的东西.通过谷歌 ...

  4. django模板层之静态文件引入优化

    1.新手使用 我们一般在初学django的情况下,引入django的静态文件一般有如下两种方式: 通过路径引用: <script type="text/javascript" ...

  5. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  6. django中url,静态文件,POST请求的配置 分类: Python 2015-06-01 17:00 789人阅读 评论(0) 收藏

    平时使用的是pycharm,所以这篇文章主要也是使用pycharm默认创建的django项目为基础进行讲解.项目目录如下图: 1.URL的配置 当创建好项目后,运行项目就可以看到django默认的页面 ...

  7. django源码分析——静态文件staticfiles中间件

    本文环境python3.5.2,django1.10.x系列 1.在上一篇文章中已经分析过handler的处理过程,其中load_middleware就是将配置的中间件进行初始化,然后调用相应的设置方 ...

  8. Django基础,Day9 - 静态文件目录与路径设置说明(eg. images, JavaScript, CSS)

    静态文件路径设置官方说明 1. Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS. 2. In ...

  9. Python19/1/11--标签与过滤器/Django模块导入继承/静态文件配置

      1 模板语言之变量: -{{ }} 相当于执行了print -深度查询 . 如果是方法,不能加括号,不能传参数2 过滤器 {{ 变量|过滤器的名字:'参数' }} -add -default -s ...

随机推荐

  1. 使用dd命令快速生成大文件或者小文件的方法

    使用dd命令快速生成大文件或者小文件的方法     转载请说明出处:http://blog.csdn.net/cywosp/article/details/9674757     在程序的测试中有些场 ...

  2. [UOJ#274][清华集训2016]温暖会指引我们前行

    [UOJ#274][清华集训2016]温暖会指引我们前行 试题描述 寒冬又一次肆虐了北国大地 无情的北风穿透了人们御寒的衣物 可怜虫们在冬夜中发出无助的哀嚎 “冻死宝宝了!” 这时 远处的天边出现了一 ...

  3. [luoguP2618] 数字工程(DP)

    传送门 离线处理... 先线性筛一遍. 直接预处理出所有答案. 注意要用push,用乘法,常数小. #include <cstdio> #include <cstring> # ...

  4. hdu4352 XHXJ's LIS(数位DP + LIS + 状态压缩)

    #define xhxj (Xin Hang senior sister(学姐)) If you do not know xhxj, then carefully reading the entire ...

  5. 2016 年末 QBXT 入学测试

    P4744 A’s problem(a) 时间: 1000ms / 空间: 655360KiB / Java类名: Main 背景 冬令营入学测试题,每三天结算一次成绩.参与享优惠 描述 这是一道有背 ...

  6. BZOJ1700: [Usaco2007 Jan]Problem Solving 解题

    每月m<=1000块钱,有n<=300道题,要按顺序做,每月做题要花钱,花钱要第一个月预付下个月立即再付一次,给出预付和再付求最少几个月做完题,第一个月不做. 神奇的DP..竟没想出来.. ...

  7. msp430项目编程02

    msp430中项目---液晶1602显示 1.液晶1602工作原理 2.电路原理说明 3.代码(静态显示) 4.代码(动态显示) 5.项目总结 msp430项目编程 msp430入门学习

  8. Linux中的进程与线程

    介绍了Linux下fork()创建进程以及使用pthread_create()创建线程的方法 1. 基于进程的斐波那契数列 在下面的代码中,由子进程进行斐波那契数列的输出,父进程要等待子进程输出完毕, ...

  9. Codeforces 618C(计算几何)

    C. Constellation time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  10. ubuntu12.04安装搜狗输入法记录

    http://blog.sina.com.cn/s/blog_66fa66650101akip.html 看了http://www.cnblogs.com/A-Song/archive/2013/04 ...