8 静态文件配置
我们将html文件默认都放在templates文件夹下
我们将网站所使用的静态文件默认都放在static文件夹下
静态文件配置
# 什么是静态文件 不会频繁更改的文件 css文件、js文件、第三方框架文件、图片 # django存储静态文件 static文件夹,
django默认是不会自动帮你创建static文件夹 需要手动创建
该文件内部还可以依据不同的功能划分不同的区域
css文件夹
js文件夹
img文件夹
others文件夹
利用django编写用户登录功能
urls
from django.conf.urls import url from django.contrib import admin from app02 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r"^index/",views.index), url(r"^login/",views.login),
views
from django.shortcuts import render,HttpResponse,redirect # Create your views here. def index(request): return HttpResponse("from index") def login(request): return render(request,"login.html")
login.html(注意引入外部css,js)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css"> <script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <h1 class="text-center">登录界面</h1> <div class="col-md-8 col-md-offset-2"> <form action=""> <p>username: <input type="text" class="form-control"> </p> <p>password: <input type="text" class="form-control"> </p> <input type="submit" class="'btn btn-success btn-block" value="登录"> </form> </div> </div> </div> </body> </html>
'''为什么前端请求不到后端的框架资源:我们没有开设对应的资源接口'''
'''为什么前端请求不到后端的框架资源:我们没有开设对应的资源接口''' 针对静态资源的路径开设无需在urls.py中指定 只需要在配置文件指定即可 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static') ]
/static/bootstrap-3.4.1-dist/js/bootstrap.min.js ##..相对路径
静态文件进阶配置
STATIC_URL = '/static/' # 类似于访问静态文件的令牌
"""如果你想要访问静态文件 你就必须以static开头"""
STATIC_URL = '/static/' # 接口前缀(要想访问静态资源 那么路径的前缀就必须是这里指定的) # 将static文件夹所有的资源开设给外界 STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static'), # 文件夹名称 os.path.join(BASE_DIR,'static1'), # 文件夹名称 os.path.join(BASE_DIR,'static2') # 文件夹名称 ] """ 接口前缀正确之后 拿着后面的路径去列表中 从上往下依查找对应的资源 找到了就不再继续往下找 """
接口前缀动态匹配
当改变接口前缀时,导入的文件的前缀也得修改,那如果有1000个需要修改,你会一个一个改么?不需要,只要将html修改如下:
STATIC_URL变了之后,前端也可以解析到
login.html:
{% load static %} <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}"> <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>