前言
各环境等的使用版本如下:
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
修改第二层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/ 链接如下图:
点击跳转后如下图(注意上面的链接变为了 http://127.0.0.1:8000/login.html):