先秀一下我的登录页:
废话没有,直接上操作步骤。
1)建立工程
#django-admin.py startproject MyWeb
2)建立应用
#cd MyWeb/
#django-admin.py startapp app51cto
3)修改settings.py添加app
vim MyWeb/settings.py
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.staticfiles',
'app51cto',
)
4)创建访问的url
vim MyWeb/urls.py
urlpatterns = patterns('',
url(r'^login/$', 'app51cto.views.login'),
)
5)创建视图
vim app51cto/views.py
from django.shortcuts import render_to_response
def login(request):
return render_to_response("login.html",{})
6)此时前期准备工作基本完成了,接下来就是创建login.html页面,但苦于运维人员没有前端工程师那么牛叉,写不出漂亮的样式,所以借助bootstrap来为我们创建绚丽的页面。
到官网下载bootstrap包,http://www.bootcss.com/
到工程目录下创建static目录:# mkdir MyWeb/static
将bootstrap包解压移动到static目录下,这样以后同一个工程下其他的应用也能公用static目录下的样式。
如下: MyWeb/static/bootstrap
bootstrap下有丰富的css与js样式,这样省去了我们很多的工作。
使用模板创建我们的html页面,http://getbootstrap.com/2.3.2/examples/hero.html
7)#创建目录templates
mkdir MyWeb/app51cto/templates
接下来我们的html页面都将存放在这个目录下
打开http://getbootstrap.com/2.3.2/examples/hero.html,保存为login.html放到templates目录下。
编辑login.html页面,将其中static目录改为我们自己配置的路径 :1,$ s/\.\.\/assets/\/static\/bootstrap/
然后编辑MyWeb/settings.py
STATICFILES_DIRS = (
'/MyWeb/static/',
)
8)启动django开发服务器
/MyWeb/manager.py runserver 0.0.0.0:8000
然后在浏览器输入web服务器地址:http://10.0.0.149:8000/login
9)对login.html进行简单的修改,修改后的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=" utf-8"> < title >OPS登录页面</ title > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta name = "description" content = "" > < meta name = "author" content = "" > <!-- Le styles --> < link href = "/static/bootstrap/css/bootstrap.css" rel = "stylesheet" > < link href = "/static/bootstrap/css/bootstrap-cerulean.css" rel = "stylesheet" > < link href = "/static/bootstrap/css/bootstrap-responsive.css" rel = "stylesheet" > <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </ head > < body > < div class = "navbar navbar-fixed-top" > < div class = "navbar-inner" > < div class = "container" > < a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" > < span class = "icon-bar" ></ span > < span class = "icon-bar" ></ span > < span class = "icon-bar" ></ span > </ a > < a class = "brand" href = "/" style = "margin-top:20px;font-size:25px" >< img src = "/static/bootstrap/img/logo.png" > < b >运维管理平台</ b ></ a > < div class = "nav-collapse" style = "margin-top:20px" > < ul class = "nav" > <!-- <li class="active"><a href="/main/">首页</a></li> --> </ ul > </ div > <!--/.nav-collapse --> </ div > </ div > </ div > < div class = "container" > <!-- Main hero unit for a primary marketing message or call to action --> < div id = "page-content" style = "margin-top:130px" class = "hero-unit2" > < img src = "/static/bootstrap/img/loginleftimg.jpg" style = "margin:0 150px;" ></ img > <!-- ### login --> < div class = "pull-right" style = "margin:0 120px;" > < form class = "well" action = "/login/" method = "POST" > < label >用户名</ label > < input type = "text" class = "span3" name = "username" placeholder = "请输入用户名" > < label >密码</ label > < input type = "password" class = "span3" name = "password" placeholder = "请输入密码" > < label >` login_err `</ lable > < label class = "checkbox" > < input type = "checkbox" >记住我 </ label > < button type = "submit" class = "btn btn-primary" >< b >登 录</ b ></ button > </ form > </ div > <!-- /end-login --> </ div > < hr > < footer > < p style = "text-align:center" >版权所有 2010 畅捷通软件有限公司</ p > </ footer > </ div > <!-- /container --> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> < script src = "http://code.jquery.com/jquery.min.js" ></ script > < script src = "/static/bootstrap/js/bootstrap.js" ></ script > </ body > </ html > |
保存后浏览:
如有疑问请@畅捷通赵海华