Dajango访问静态文件(css,js,img)学习总结
在本地调试模式下，即DEBUG=True时
1. 默认的配置 STATIC_URL="/static/"
举例: 1. setting.py 文件
# 该变量的值可更改，只影响访问资源的url，如STATIC_URL
=”anyone“
# 这是默认的 也是必须的存在变量
STATIC_URL
= '/static/'
2. 目录结构: 只能在应用下创建static文件夹直接存放文件
3. 页面访资源:
# 这里的
static对应的配置STATIC_URL的值
地址访问图片：https
://127.0.0.1:8000/static/add1png
引入外部样式：
<link type
="text/css" rel
="stylesheet" href
="/static/login_frame.css" />
图片访问
: <img src
="/static/add2.png"/>
4.总结：
表示访问静态文件的url是: https://127.0.0.1/static/add.png (url中的static对应STATIC_URL的值)只能在应用(app)目录下创建名为static的文件夹，直接存放静态文件，才可正常访问到文件STATIC_URL的值可自定义，只会影响对应的url，但是实际存放静态文件的目录必须满满足 总结2STATIC_URL的值中的结尾的 / 不可省
2. 默认配置的基础上,配置STATICFILES_DIR,自定义静态资源文件夹
举例 1. 在项目根目录或者应用类创建自定义的文件夹存放静态文件
2. 在setting中设置STATICFILES_DIR的值
方式一，,列表值直接是 路径字符串
# BASE_DIR表示项目的根目录，setting文件中已初始化
# 变量值可自定义
STATIC_URL
= '/static/'
# 在列表元素 为 路径字符串
STATICFILES_DIRS
= [
os
.path
.join(BASE_DIR
, "static/css"),
os
.path
.join(BASE_DIR
, "static/js")),
os
.path
.join(BASE_DIR
, "static/img")
]
# 相当于将列表中所有路径下的文件，直接映射到
/static下
# 此时的访问路径是
/static/文件名，
# 如html访问图片
<img src
="/static/add1.png">
方式二，列表元素直元组(“二级路径”，”路径字符串“)
#
STATIC_URL = '/static/'
# 列表元素 为 （”二级urll“，”路劲字符“）构成列表或元组
STATICFILES_DIRS
= [
("css", os
.path
.join(BASE_DIR
, "static/css")),
("js", os
.path
.join(BASE_DIR
, "static/js")),
("img", os
.path
.join(BASE_DIR
, "static/img")),
]
# 相当于分别映射，
# 此时访问css
/static/css
/文件名
# 此时访问js
/static/css
/文件名
# 此时访问img
/static/css
/文件名
# 如引入外部style文件：
#
<link type
="text/css" rel
="stylesheet" href
="/static/css/login_frame.css" />
效果图 and 代码
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>学习笔记主页
</title
>
<script type
="text/javascript" src
="/static/js/jquery-3.5.1.min.js"></script
>
<link type
="text/css" rel
="stylesheet" href
="/static/css/login_frame.css" />
</head
>
<body style
="margin: 0;">
<div class
="login_div">
<div id
="operate_div">dasda
</div
>
<div class
="input_div">
<input type
="text" name
="username" id
="username" class
="username" placeholder
="账号" />
<label
for="username" id
="mess_username"></label
>
</div
>
<div class
="input_div">
<input type
="password" name
="password" id
="password" class
="password" placeholder
="密码"/>
<label
for="password" id
="mess_password"></label
>
</div
>
<div class
="button_div">
<input class
="button" type
="button" value
="登录" onclick
="login()"/>
</div
>
<div class
="fun_div">
<a href
="findpage">忘记密码
</a
>
<div class
="center_div">|</div
>
<a href
="registpage">用户注册
</a
>
</div
>
</div
>
</body
>
</html
>
<script
>
function
check_username(){
let username
= $
("#username").val()
let mess_user
= $
("#mess_username")
let state
= 0
if(!username
.match("^[1-9][0-9]{7}")){
mess_user
.text("账号是长度8的数字串")
}
else{
mess_user
.text("")
state
=1
}
return state
return state
}
function
check_password() {
let password
= $
("#password").val()
let mess_pass
= $
("#mess_password")
let state
= 0
if (!password
.match("^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{6,12}$")){
mess_pass
.text("密码是6-12位，包含大小写字母，数字的字符串")
}
else {
mess_pass
.text("")
state
= 1
}
return state
}
$
(function
() {
let input_user
= $
("#username")
let input_pass
= $
("#password")
input_user
.blur(function
(){check_username()})
input_pass
.blur(function
(){check_password()})
})
function
login() {
if (check_username() + check_password() == 2) {
$
.ajax()
}
}
</script
>
