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. day04 运算符 流程控制 （if while/of）

    1. 运算符算数运算符 + - * / int / float :数字类型 # print(10 + 3.1)# print(10 / 3)# print(10 // 3)# print(10 % 3 ...

  2. linux文件权限目录配置笔记

    ###linux 文件权限目录配置笔记 ---------- 多人多任务环境 linux 一般将文件可存取的身份分为三个类别:owner group others Permission deny ls ...

  3. Vue+restfulframework示例

    一.简单回顾vue 前不久我们已经了解了vue前端框架,所以现在强调几点: 修改源: npm config set registry https://registry.npm.taobao.org 创 ...

  4. php 数组函数学习

    1.array_change_key_case array_change_key_case(array,case)函数将数组的所有的键都转换为大写字母或小写字母.array表示目标数组,case表示转 ...

  5. Appium 九宫格 手势解锁

    分析九宫格定位 整个九宫格是一个 view   self.driver.find_element_by_id("com.elc:id/gesturepwd_create_lockview&q ...

  6. 蓝桥杯  历届试题 剪格子  dfs

    历届试题 剪格子 时间限制:1.0s   内存限制:256.0MB 问题描述 如下图所示,3 x 3 的格子中填写了一些整数. +--*--+--+ |10* 1|52| +--****--+ |20 ...

  7. Git的常见基础操作命令

    Git的常见基础操作命令 1安装初始化 1.1安装git本地安装Windows版本 下载地址: https://git-scm.com/downloads/ 1.2初始化Git用户信息配置 配置git ...

  8. pycaffe训练的完整组件示例

    pycaffe训练的完整组件示例 为什么写这篇博客 1. 需要用到pycaffe 因为用到的开源代码基于Caffe:要维护的项目基于Caffe.基本上是用Caffe的Python接口. 2. 训练中想 ...

  9. Vuex详解笔记1

    vuex 是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 什么是状态?状态这里泛指 ...

  10. __attribute__ ((default)) 和 __attribute__ ((hidden))

    制作一个共享库 /* a.h */ int func(); /* a.c */ #include <stdio.h> #include "a.h" int func() ...