使用django建站系列之登录页面(一)

news/2024/5/13 17:33:27/文章来源:https://blog.csdn.net/weixin_34208185/article/details/90066504

先秀一下我的登录页:

144729246.jpg


废话没有,直接上操作步骤。

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

154843315.jpg

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>

保存后浏览:

164452984.jpg

如有疑问请@畅捷通赵海华





本文转自 baiying 51CTO博客,原文链接:http://blog.51cto.com/baiying/1313944,如需转载请自行联系原作者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_766075.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WordPress网站制作静态化插件:Cos-Html-Cache介绍

现在很多做网站的新手朋友、甚至网站建设公司都会采用现成的网站管理系统来建站&#xff0c;国内的PageAdmin、Discuz、Ecshop等网站管理系统都已经很成熟&#xff0c;大量的被用于网站建设中&#xff0c;之前小熊优化的小编分别介绍了这些网站管理系统&#xff0c;并且几乎都默…

网站经验谈:网站被降权怎么办 如何恢复权重

虽然百度一再强调百度本身并没有权重一说&#xff0c;但是对于各位站长朋友来说&#xff0c;权重还是衡量一个网站的重要指标之一。一个网站的权重高&#xff0c;代表流量高&#xff0c;收录好&#xff0c;关键词排名也相对较好。那么&#xff0c;这么重要的指标&#xff0c;一…

如何判断一个网站是否被墙

http://www.cnblogs.com/wangkangluo1/archive/2012/04/15/2447921.html 大家都知道GFW 平日作恶多端&#xff0c;一旦有网站不能访问&#xff0c;很多人都把矛头直指它了…. 虽然一般都是它干的&#xff0c;但实际上也不排除一些人别有用心…. 那么下面就来简单判断一下吧… 方…

学用MVC4做网站五:5.2我的文章

文章管理这一块&#xff0c;按照左侧导航这一块向下写 到了“我的文章”这一块。 先还是打开【ArticleController】&#xff0c;添加public ActionResult UserOwn(int id 0, int page 1) 这里的id是指栏目id&#xff0c;可以显示自己发布的指定栏目的文章&#xff0c;默认为0…

企业网站优化切忌心浮气躁

为什么80%的码农都做不了架构师&#xff1f;>>> 互联网时代&#xff0c;大部分的企业都有自己的网站&#xff0c;随着网站管理员的更新换代&#xff0c;企业网站的优化成了遗留问题。很多企业网站域名年龄都有几年以上了&#xff0c;但是从seo的角度来说还是那么烂…

网站用户分析知识总结

本文是《数据蛙三个月强化课》的第七篇总结教程&#xff0c;如果想要了解数据蛙社群&#xff0c;可以阅读给DataFrog社群同学的学习建议。温馨提示&#xff1a;如果您已经熟悉网站用户分析知识,大可不必再看这篇文章&#xff0c;或是只挑选部分文章 一&#xff1a;用户分析概…

浙大海洋法律与治理研究中心网站

近日&#xff0c;为浙江大学海洋法律与治理研究中心开发官方网站正式上线。2012年8月21日&#xff0c;浙江大学海洋法律与治理研究中心成立。中心将汇聚浙江大学跨学科优势资源&#xff0c;适应国家战略需求和促进海洋法制保障&#xff0c;致力打造一支国内顶尖、结构合理的海洋…

curl网站开发指南

转载 http://www.ruanyifeng.com/blog/2011/09/curl.html 我一向以为&#xff0c;curl只是一个编程用的函数库。最近才发现&#xff0c;这个命令本身&#xff0c;就是一个无比有用的网站开发工具&#xff0c;请看我整理的它的用法。curl网站开发指南阮一峰 整理curl是一种命令行…

ASP.NET MVC5 网站开发实践(二) Member区域 - 修改及删除文章

上次做了显示文章列表&#xff0c;再实现修改和删除文章这部分内容就结束了&#xff0c;这次内容比较简单&#xff0c;由于做过了添加文章&#xff0c;修改文章非常类似&#xff0c;就是多了一个TryUpdateModel部分更新模型数据。 目录&#xff1a; ASP.NET MVC5 网站开发实践 …

ASP.NET MVC5 网站开发实践(二) Member区域–管理列表、回复及删除

本来想接着上次把这篇写完的&#xff0c;没想到后来工作的一些事落下了&#xff0c;放假了赶紧补上。 目录&#xff1a; ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一) - 项目框架 ASP.NET MVC5 网站开发实践(一) - 框架&#xff08;续&#xff09; 模型、数…

网站创建自定义百度地图

第一步&#xff1a;百度搜索“创建地图-百度地图生成器”或者直接点击链接&#xff1a;http://api.map.baidu.com/lbsapi/creatmap/&#xff0c;打开页面 如下图所示&#xff1a; 第二步&#xff1a;输入你要查找的地址名称&#xff0c;点击查找&#xff0c;如下图所示&#xf…

【网站国际化必备】Asp.Net MVC 集成Paypal(贝宝)快速结账 支付接口 ,附源码demo...

【网站国际化必备】Asp.Net MVC 集成Paypal&#xff08;贝宝&#xff09;快速结账 支付接口 &#xff0c;附源码demo 原文:【网站国际化必备】Asp.Net MVC 集成Paypal&#xff08;贝宝&#xff09;快速结账 支付接口 &#xff0c;附源码demo开篇先给大家讲段历史故事&#xff0…

记录支付宝SDK网站支付的对接

说明&#xff1a;此方法仅用SDK的对接 没有使用官方提供的demo 官方SDK的下载地址&#xff1a;https://github.com/alipay/alipay-sdk-php-all 使用框架&#xff1a;thinkphp5.0.24 将支付宝sdk放入框架extend(第三方扩展库)\alipay文件中&#xff1b; 对接SDK的三步曲&#xf…

今天我发现了一个网站有很多的html5手机wap网站模板,在这里分享一下

手机wap静态网页模版仿中国新闻网微官网山东红十字会医院3g手机版网站模版html制作***3G静态wap网站模版html仿南通和美家***网站静态模版参考3g手机网站模版仿广州曙光***3g手机网页模版仿北京航空466医院手机WAP站点3G wap妇科医院网站模板仿北京艾丽斯妇科医院3G手机静态模版…

songtaste网站歌曲真实URL获取

个人挺喜欢songtaste网站的歌曲的&#xff0c;下载方法也层出不穷&#xff0c;可是作为程序员如果不知其中原理的方法真是羞愧。首先简单点的方法当然有google插件这样的嗅探器了&#xff0c;不过这种工具的原理还不是很了解。今天先总结一下songtaste网站部分歌曲的真实下载链…

单页面应用SEO 和 pushstate

2019独角兽企业重金招聘Python工程师标准>>> ----------------引子----------------- 单页应用的优点 跨平台开发&#xff0c;更好的用户体验&#xff0c;让用户在web感受natvie的速度和流畅&#xff1b;经典MVC开发模式&#xff0c;前后端各负其责。一套Server API…

117work 网站开发 21 简洁版侧边栏开发设置 ,附录代码

相对简单了&#xff01;就要快速的捋一遍基本概念&#xff0c;然后就可以正式进入开发行业的了&#xff01;实现梦想的行业&#xff01; 进军大公司的机会&#xff01; 快速提高开发技术&#xff01;&#xff01;&#xff01; 代码效果图 <!DOCTYPE html> <html lan…

浮动-网站开发 基础知识点

编程月度总结&#xff0c;周更新 还是基础太弱&#xff0c;基础弱是开发的弱点&#xff01;项目也更是很少&#xff01;只能一方面不断的复习基础&#xff0c;一方面写项目&#xff0c;增加项目才行&#xff01; <!DOCTYPE html> <html lang"en"> &l…

网站中最简单的盒子,写法

最简单的盒子&#xff0c;写法 效果图 &#xff0c;这是2个盒子的建立。 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> &l…

网站应用微信登录功能接口开发指南

2019独角兽企业重金招聘Python工程师标准>>> 准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前&#xff0c;在微信开放平台注册开发者帐号&#xff0c;并拥有一个已审核通过的…