您的位置：首页 > 编程语言 > Go语言

Django（二）静态文件引入框架

2017-12-14 11:47 363 查看

前言

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

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，内容为：

<!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>
<button class="am-btn am-btn-secondary"  type="submit"><a href="login.html">跳转到登录界面</a></button>
</form>
</div>
</body>
</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 url
from login import views

urlpatterns = [
url(r'^$', views.home),
url(r'^login.html$', views.login),
]

前面文章已经指出，网页href那里href=”login.html”，要和urls.py 里url(r’^login.html′,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
b1fd
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/ 链接如下图:

点击跳转后如下图（注意上面的链接变为了 http://127.0.0.1:8000/login.html）：

转到下一章

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： django

相关文章推荐

新的分享

章节导航