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. IOS 命令行工具开发

    例子  我们需要查看手机APP里面的某个应用的架构 新建一个Single View App 的ios项目 ToolCL 然后在 main函数中加入以下代码 // // main.m // ToolCL ...

  2. 【sqli-labs】Less18~Less22

    Less18: User-Agent注入,有错误回显 感叹一句,越来越难了.现在只能先看代码再分析怎么注入了..... 通过代码,发现username和password均做了校验.但是会有一个插入us ...

  3. Java中Super和final关键字以及异常类

    1.final类不能有子类,也就谈不上继承的说法,如果用final修饰成员变量或者局部变量,那成了常量需要制定常量的值. 2.对象的上转型对象,上转型对象不能操作子类新增的成员变量,不能调用子类新增的 ...

  4. Android Studio 创建不恰当的虚拟设备导致程序不正常运行

    操作系统:Windows 10 x64 IDE:Android Studio 3.2.1 使用Android Studio新建第一个Android程序,一开始在虚拟设备上面调试,不管程序怎么修改,运行 ...

  5. C++ 关闭显示器

    好困,想躺一下,关灯.上床,笔记本的屏幕还亮着,好刺眼,睡不着! 脑子里出现一个疑问,怎么用C++写一个关闭屏幕的小程序呢? 参考了网上已有的例子,最简化: #include <windows. ...

  6. java读取.txt文件工具类FileUtiles

    public class FileUtils { private static final String ENCODING = "UTF-8";//编码方式 /** * 获取文件的 ...

  7. 51 Nod 1256 乘法逆元(数论：拓展欧几里得）

    1256 乘法逆元  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < K ...

  8. rpm 命令使用 和 lsof -p 1406 使用

    #安装RPM -v 显示详细信息 -h 显示进度 -i 安装 -U 升级 -q 查询 -ql 查看rpm 包装的文件 - qf 查看命令属于哪个RPM 包 -qi 查看RPM包的详细信息 [root@ ...

  9. （转）HTTPS到底是个啥玩意儿？

    详细见:https://blog.csdn.net/zgwangbo/article/details/50889623 ,建立交互的过程见下图:

  10. CMD批处理——forfiles命令使用，自动删除过期备份文件

    公司服务器用来备份数据的硬盘过段时间就会被备份文件占满,弄得我老是要登录到服务器去手工删除那些老的文件,有时忘记了就会导致硬盘空间不足而无法备份.因为只要保留最近几天的备份,如果可以做一个批处理让系统 ...