Django2.0引入css、js、img文件

一、文件结构

二、settings.py的配置

 # Static files (CSS, JavaScript, Images)

 # https://docs.djangoproject.com/en/2.1/howto/static-files/

 STATIC_URL = '/static/'

 STATICFILES_DIRS = (

     os.path.join(BASE_DIR, 'static'),  # 注意括号后面的还有个逗号

 )

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

三、查看settings.py下的必要配置

（

django.contrib.staticfiles

）

四、引用模板

分析：

引用静态文件必须要写上：{%load staticfiles%}

引入css文件：<link rel="stylesheet" href="{% static '/css/div.css' %}">  #如果引用css下面的div.css

引入js文件：<script src="{% static '/js/jquery-3.3.1.js' %}"></script>  #如果引用js下的jquery文件

 <head>

     <title>Event Delegation Tests</title>

     {%load staticfiles%}        <!--需要添加load staticfiles-->

     <link rel="stylesheet" href="{% static '/css/div.css' %}">    <!--引入使用的css文件-->

     {%block css%}

     {%endblock css%}       <!--在子模板添加css文件方式-->

 </head>

 <body>

    <script src="{% static '/js/jquery-3.3.1.js' %}"></script>     <!--引入jquery库。必须放在js文件最前面，避免子模板出现$is not defined问题-->

     {%block js%}

     {%endblock js%}     <!--在子模板添加js文件方式-->

 </body>

五、实际演示

下面演示：引入jquery文件

路由：

 urlpatterns = [

 path("ajax1.html/", ajax1),

 ]

HTML代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     {% load staticfiles %}

     <style>

         .btn{

         display:inline-block;

         padding:5px 15px;

         background:darkgoldenrod;

         color:white;

         cursor:pointer;

         }

     </style>

 </head>

 <body>

 <div>

     <!--window.location,reload-->

      <script src="{% static '/js/jquery-3.3.1.js' %}"></script>     <!--引入jquery库。必须放在js文件最前面，避免子模板出现$is not defined问题-->

     {%block js%}

     {%endblock js%}     <!--在子模板添加js文件方式-->

     <p>用户名：<input type="text" id="username"></p>

     <p>密码：<input type="password" id="password"></p>

     <div class="btn" onclick="submitForm();">

         提交

     </div>

     <script>

         function submitForm() {

         <!--获取值-->

             var u=$('#username').val();

             var p=$('#password').val();

             $.ajax({

                 url:'/ajax1.html',

                 type:'GET',

                 data:{username:u,password:p},

                 success:function(arg){

                     console.log(arg);

             }

             })

         }

     </script>

 </div>

 </body>

 </html>

视图函数

 from django.shortcuts import render,HttpResponse,redirect

 def ajax1(request):

       user=request.GET.get('username')

       passwd=request.GET.get('password')

       print(user,passwd)

       return render(request,"ajax.html")

Django2.0引入css、js、img文件的更多相关文章

  1. VueJS引入css或者less文件的一些坑

    我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即 requir ...

  2. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  3. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  4. 利用beautifulsoup下载网页html代码中的css, js, img文件并保存

    # -*- coding:utf-8 -*- from bs4 import BeautifulSoup as BS import urllib.request as rqst import os u ...

  5. TP5.1：将外部资源引入到框架中（css/js/font文件）

    为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...

  6. Angular4.0引入laydate.js日期插件方法

    Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...

  7. 关于idea easyui 引入css js

    1.引用官方网站 <link rel="stylesheet" type="text/css" href="http://www.w3cscho ...

  8. VueJS如何引入css或者less文件的一些坑

    我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即 requir ...

  9. Django之CSS,JS静态文件的配置

    一. 专门创建一个目录放静态文件,即CSS,JS等. 1)先把jquery.min拿过来. 2)新建一个CSS文件放入样式 3)在login.html中引入.css文件 在login.html中引入. ...

随机推荐

  1. Mycat实现mysql主从复制(读写分离)

    数据库性能瓶颈主要原因: 随着用户数的增多,带来的是数据库连接的大幅度增长 随着业务体量的增长,表数据量(空间存储的问题)的大幅增长,其中涉及到索引的优化,mysql默认的索引是硬盘级别的,BTREE ...

  2. bzoj 1495

    这是一道...卡了我一个月的树形dp... 我真是太弱了... 其实仔细想想,这题的核心思路并不是特别复杂,但是的确存在不小的难度 作为一个看过全网基本所有题解+标程才弄明白这题到底怎么回事的蒟蒻,我 ...

  3. JumpServer里的sftp功能报错说明

    JumpServer里sftp默认的家目录是/tmp下 修改默认家目录: vim /usr/local/coco/coco/sftp.py class SFTPServer(paramiko.SFTP ...

  4. 开启Java之旅

    学习应用系统的服务器开发,也许并不算什么“旅行”,也不会那么‘愉快’.但是,我希望这次能够同以往有所不同,更加努力地学习J2EE. 从2月份开始,从事web前端开发,并在公司的的项目中,独立完成了4个 ...

  5. 饮冰三年-人工智能-Python-16Python基础之迭代器、生成器、装饰器

    一:迭代器: 最大的特点:节省内存 1.1 迭代器协议 a:对象必须提供一个next方法, b:执行方法要么返回迭代中的下一项,要么抛弃一个Stopiteration异常, c:只能向后不能向前. 1 ...

  6. Just Oj 2017C语言程序设计竞赛高级组D: 字符串最大表示（next数组）

    D: 字符串最大表示 时间限制: 1 s      内存限制: 128 MB 题目描述 有如下定义,abcnabcn表示字符串abc重复n次,例如abc2abc2表示abcabc. 给定一个字符串,求 ...

  7. sqoop的基本语法详解及可能遇到的错误

    1 sqoop介绍 Apache Sqoop是专为Apache Hadoop和结构化数据存储如关系数据库之间的数据转换工具的有效工具.你可以使用Sqoop从外部结构化数据存储的数据导入到Hadoop分 ...

  8. 爬取文件时，对已经操作过的URL进行过滤

    爬取文件时,对已经操作过的URL进行过滤 1.创建过滤规则文件filter.py在spiders同级目录 class RepeatUrl: def __init__(self): self.visit ...

  9. 一脸懵逼学习Hive的安装（将sql语句翻译成MapReduce程序的一个工具）

    Hive只在一个节点上安装即可: 1.上传tar包:这个上传就不贴图了,贴一下上传后的,看一下虚拟机吧: 2.解压操作: [root@slaver3 hadoop]# tar -zxvf hive-0 ...

  10. debian 下deb包的制作

    http://page.renren.com/601230663/note/817856769?op=next&curTime=1333642042000