django【第三篇】登陆界面与功能

最新推荐文章于 2024-03-05 15:45:18 发布

dfu65065

最新推荐文章于 2024-03-05 15:45:18 发布

阅读量193

点赞数

文章标签： python javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/hyit/articles/10496163.html

版权

下载bootstrap

bootstrap是一个前端框架，有很多已经做好的比较好看的css js效果，如果你前端想快点写好（或者你前端写的不是很漂亮），可以借助这个框架

bootstrap (http://www.bootcss.com/）下载bootstrap源码，放到djagno的static目录

引入bootstrap css

然后在你需要使用bootstrap精美效果的html文件中去使用这些样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
    <title>Title</title>
    <style>
        body {
            background-color: #eee;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4" style="margin-top: 100px">
            <h1 class="text-center">请登录</h1>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label"></label>
                    <div class="input-group col-sm-8">
                         <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                        <input type="" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label"></label>
                    <div class="input-group col-sm-8">
                        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-sm-offset-2 col-sm-8">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 记住我
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-sm-offset-2 col-sm-8">
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

你会发现，很多class for 属性使用的不是你自己写的css样式，对，它们是bootstrap样式，如果你想深入学习bootstrap常用效果，可以去官网学习这些样式如何使用

配置django url/view

效果图

启动django，页面返回成功了

但是，这只是一个页面，你还不能登陆

用户登陆

准备好三个页面

有三个页面：首页 index.html、登陆页login.html、登陆成功后的页面 vippage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/commons.css" />
</head>
<body>
    <h2><a href="/login/">登陆</a></h2>
    <h1>Hello Django</h1>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
    <title>mysite-登录页面</title>
    <style>
        body {
            background-color: #eee;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4" style="margin-top: 100px">
            <h1 class="text-center">请登录</h1>
            <form class="form-horizontal" action="/login/" method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label"></label>
                    <div class="input-group col-sm-8">
                         <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                        <input type="" name="username" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label"></label>
                    <div class="input-group col-sm-8">
                        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                        <input type="password" name="pwd" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-sm-offset-2 col-sm-8">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 记住我
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-sm-offset-2 col-sm-8">
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </div>
                </div>
                <p class="text-danger text-center">{{ error }}</p>

            </form>

        </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2><a href="/">首页</a></h2>
    <h1>VIP界面...</h1>

</body>
</html>

vippage.html

补充

action 表单提交给哪个url

methon 提交方式

csrf_token csrf 表单安全机制

name 提交的字段

用户操作

request.POST输出信息为

<QueryDict:
{'csrfmiddlewaretoken': ['9avjvBpq4kChezl1DTjR0cCq467DccMfaguQrQB23rDTL51xH5gUElX0Bi8bqxrq'],
'username': ['admin'], 'pwd': ['admin123']}
>

QueryDict是django自定义类型（说白了就是定义了一个类...）
django源码

因此，当你发现一些你不知道的数据类型，那就是django定义的类

用户账号判断

这里的"admin" "admin123" 应该从数据库中取出来，由于还没有设计数据库，因此用模拟数据

 render    用于返回html，第三个参数可以是一个字典，用于html接收
 redirect   用于重定向到某个url　
 HttpResponse  用于返回一个字符串（说白了功能比render少呗）

提交方式

1.浏览器默认的提交方式是GET　

2.GET 得到，表达的是获取数据，POST 提交，表达的是输入数据，不过这只是一种规范。

你也可以通过GET提交，POST获取，但是要注意的是，GET方式提交的数据大小有限制，且安全性不高（数据会出现在地址栏）

最后，其实提交方式有这些： GET、POST、PUT、PATCH（修改）、DELETE（删除）、OPTIONS、HEAD、TRACE，

一般只用get post就够了，查用get,剩下的操作可以交给post

转载于:https://www.cnblogs.com/hyit/articles/10496163.html

dfu65065

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
django【第三篇】登陆界面与功能

下载bootstrapbootstrap是一个前端框架，有很多已经做好的比较好看的css js效果，如果你前端想快点写好（或者你前端写的不是很漂亮），可以借助这个框架bootstrap (http://www.bootcss.com/）下载bootstrap源码，放到djagno的static目录引入bootstrap css然后在你需要使用bootstrap精美...
复制链接

扫一扫