Django: 静态文件引入框架

xinyuerr

墨衍会员 · AI 创作全网分发码龄3年

关注

原创最新推荐文章于 2024-06-18 00:12:10 发布 894 阅读 AI 写同款· GEO 优化 ›

转自：微点阅读 https://www.weidianyuedu.com

前言

各环境等的使用版本如下：

Linux Mint 18.2 （Ubuntu 16.04）；

python版本2.7.12和3.5.2；

Django版本为1.9。

在前一篇文章中我们已经把一个登录的页面显示在网页上了，而且跳转只跳到了原来的页面，这些只是前期简单的建立项目，相当于学一门语言的开篇课，建立helloworld项目。

我们可以看到上一篇的登录页面非常简单（丑），我们想要使用一些开源的框架来美化界面怎么办呢，比如我想使用amazeUI、bootsrap、echarts等等。这就是本文的目的了，创建静态文件，我们可以把一些静态的图片、字体、js、css等文件放进去使用。其次还要实现页面的跳转。

项目目录结构如下（生成的.pyc文件就没有列出）：

demo demo __init__.py settings.py urls.py wsgi.py login migrations __init__.py admin.py apps.py __init__.py models.py tests.py views.py static css amazeui.css other.min.css fonts img log02_03.png js plug templates home.html login.html db.sqlite3 manage.py 配置静态文件

配置

在上一次的demo项目里新建一个static文件，然后在static文件夹里面新建img、js、css、plug、fonts文件（你用到多少自己建立）

然后修改第二层demo目录下的setting.py文件：

# Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/1.9/howto/static-files/STATIC_URL = "/static/"# 添加 img 、 css 和 js 等静态文件目录STATIC_ROOT = os.path.join(BASE_DIR, "static/")STATICFILES_DIRS = ( ("css", os.path.join(STATIC_ROOT, "css")), ("img", os.path.join(STATIC_ROOT, "img")), ("js", os.path.join(STATIC_ROOT, "js")), ("fonts", os.path.join(STATIC_ROOT, "fonts")), ("plug", os.path.join(STATIC_ROOT, "plug")),)

以上你有多少静态文件夹要使用就添加多少。

注意:上面注释有汉字，所有的.py文件只要内部包含汉字都需要在文件开始处添加一行，不然报字符集错误，添加内容如下：

# _*_ coding:utf-8 _*_引用静态文件

下载amazeUI，然后将other.min.css（自己写的）和amazeui.css放在css文件里，需要的源码联系我，我就不上传了。

静态文件目录已经配置好，那么使用就简单了，比如我们想要取到静态文件css里的amazeui.css，只需要通过“/static/css/amazeui.css”，其实和其它开发方式是一样的，只不过static下的所有用到的文件必须在setting.py中配置（默认static目录已经配置了）才能使用。static前面必须加/。

将以前的login.html文件修改为如下（可以看到.css和.png文件的引用）：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="/static/css/amazeui.css" /> <link rel="stylesheet" href="/static/css/other.min.css" /></head><body class="login-container"> <div class="login-box"> <div class="logo-img"> <img src="/static/img/logo2_03.png" alt="" /> </div> <form action="" class="am-form" data-am-validator> <div class="am-form-group"> <label for="doc-vld-name-2"><i class="am-icon-user"></i></label> <input type="text" id="doc-vld-name-2" minlength="3" placeholder="输入用户名（至少 3 个字符）" required/> </div> <div class="am-form-group"> <label for="doc-vld-email-2"><i class="am-icon-key"></i></label> <input type="email" id="doc-vld-email-2" placeholder="输入邮箱" required/> </div> <button class="am-btn am-btn-secondary" type="submit">登录</button> </form> </div></body></html>href跳转

在templates文件下新建一个home.html，内容为：

在上面的按钮中给出了跳转的页面，如果我们把login.html放在静态文件夹里，那么这里我只要写“/static/html/login.html”就可以了（html文件还得去setting.py里设置），这样就不会去服务器请求这个页面了由于是静态文件。如果我想就把这个login.html文件放在templates目录（home.html也在这里面）里该怎么设置呢？首先将home.html里的跳转href请求页面设置为“login.html”，修改第二层demo目录下的urls.py文件：

from django.conf.urls import urlfrom login import viewsurlpatterns = [ url(r"^$", views.home), url(r"^login.html$", views.login),]

前面文章已经指出，网页href那里href=”login.html”，要和urls.py 里url(r’^login.html′,views.login)，注意后者一定要加′,views.login)，注意后者一定要加符号，保持一致！！！要是login.html就全是login.html，要是login/就全是login/，否则跳转会找不到文件（咱大致可以这样理解，在网页上无论是以表单的action还是链接的形式来请求页面，比如这里请求的就是url为login.html，既然前端要访问这个url，那么我就在django中注册这个url，通过url(r’^login.html$’, views.login)就将127.0.0.1:8000/login.html请求映射到views.login函数，url(r’^$’, views.home)就将127.0.0.1:8000映射到views.home函数）。：

修改第二层demo目录下的views.py文件：

from django.shortcuts import render# Create your views here.def home(request): context = {} return render(request, "home.html", context)def login(request): context = {} return render(request, "login.html", context)

启动项目

在项目的第一层demo目录（由于你要运行manage.py，所以找到它所在目录就行了）下执行下述命令（后面就不再赘述这条命令了）：

python manage.py runserver 127.0.0.1:8000

打开http://127.0.0.1:8000/

收录于