Django 创建属于自己的登陆界面

Posted 大话软件测试

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Django 创建属于自己的登陆界面相关的知识，希望对你有一定的参考价值。

Django第一课 创建属于自己的登陆界面

1、前言

python有许多开源的Web框架，比如，web.py flask等， Django框架应该是一位具有代表性的Web框架。很多网站也是基于django框架开发的。那么做测试的人员，其实也应该对一些web框架了解和理解的，如果对于前后台交互，或者接口之间的数据流向多很清楚的话，那么我们再去做测试的话，会对我们理解帮助很大的。

2、开发环境

  1. python 3.5

  2. eclipse Oxygen Release Candidate 2 (4.7.0 RC2)

  3. pydev 5.9.2

  4. Django (1.10.3)

3、创建第一个django项目

1.安装django版本 
python3 -m pip install django==1.10.3
python3 -m pip list
查看是否安装成功，如果有django 1.10.3版本，说明安装成功
还有一种，假如说我们忘记安装那个版本了，那么我们只要
python3 -m pip install django==1.1.1.1（输入一个不存在的版本即可），如下图，
会提示现有所有django的版本，我们只要选择我们合适的版本就好了

2.创建django
django-admin startproject HardyTest
就会在当前目录下生成一个HardyTest文件夹
3.启动django项目
python3 manage.py runserver 0.0.0.0:8099

Django 创建属于自己的登陆界面

可以通过本地IP8099端口访问了~

Django 创建属于自己的登陆界面

到此，我们django项目已经成功运行起来了~

4、第一个粗糙的登陆界面

在项目中创建第一个APP，运行： python3 manage.py app （将会生成一个APP应用）
打开app应用下的views.py
1.编辑脚本
from django.http import HttpResponse
# Create your views here.
def login(request):
    return HttpResponse('login success')
2.配置URL
在刚才创建的项目HardyTest目录下，找到url.py配置文件加入如下
from app import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.login),

]
3.加入APP，在setting里面加入app应用
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app',
]
4.启动项目 
python3 manage.py runserver 0.0.0.0:8099
5.访问：http://127.0.0.1:8099/index

Django 创建属于自己的登陆界面 下面创建登录页，创建templates文件夹，并在下面创建login.html文件

`<html>

<head>
    <title>Index</title>
    <style>
        lable{
            width: 80px;
            text-align: right:80px;
            display:inline-block;
        }
    </style>
</head>
<body>
    <form method="post" action="/login/">
        <input id="" name="username" type="text">
        <br>
        <input name="password" type="password">
        <br>
        <button type="submit">登陆</button>
    </form>
</body>

</html>`
再去修改我们login函数

`from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.

def login(request):
    return render(request, "login.html")
#   return HttpResponse('login success')`  

启动项目，访问http://127.0.0.1:8099/index 可以看到简单的登陆界面

5、优化我们的登陆界面

这种界面看起来是不是太简单了，那么是不是可以优化下我们的登陆界面呢？ 其实我们只要安装Django-bootstrap3就可以了。非常好用的前端框架。

python3 -m pip install django-bootstrap3

同样的，在setting里面，INSTALLED_APPS加入'bootstrap3',

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',
    'bootstrap3',
]

重新修改login.html文件如下代码
<html>

<head>
    {% load bootstrap3 %} {% bootstrap_css %} {% bootstrap_javascript %}
    <title>Django Page</title>
</head>

<body style="
    margin-top: 100px;
    ">
<div class="container">

    <form class="form-signin" method="post" action="/login_action/" style="width:600px;"
>
        <h2 class="form-signin-heading" align="center" >登陆系统</h2> 
       <!--  <label for="inputEmail" class="sr-only">username</label> -->
        <input type="text" id="inputUsername" name="username" class="form-control" placeholder="username" required="" autofocus="" data-cip-id="inputEmail">
        <br>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required="" data-cip-id="inputPassword">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登陆
        </button>
    </form>

</div>
<!-- /container -->


<div class="cip-genpw-icon cip-icon-key-big" style="z-index: 2; top: 321px; left: 803px;"></div>
<div class="cip-ui-dialog cip-ui-widget cip-ui-widget-content cip-ui-corner-all cip-ui-front cip-ui-draggable" tabindex="-1" role="dialog" aria-describedby="cip-genpw-dialog" aria-labelledby="cip-ui-id-1" style="display: none;">
    <div class="cip-ui-dialog-titlebar cip-ui-widget-header cip-ui-corner-all cip-ui-helper-clearfix">
        <span id="cip-ui-id-1" class="cip-ui-dialog-title">Password
            Generator</span>
        <button class="cip-ui-button cip-ui-widget cip-ui-state-default cip-ui-corner-all cip-ui-button-icon-only cip-ui-dialog-titlebar-close" role="button" aria-disabled="false" title="×">
            <span class="cip-ui-button-icon-primary cip-ui-icon cip-ui-icon-closethick"></span><span class="cip-ui-button-text">×</span>
        </button>
    </div>
    <div id="cip-genpw-dialog" class="cip-ui-dialog-content cip-ui-widget-content" style="">
        <div class="cip-genpw-clearfix">
            <button id="cip-genpw-btn-generate" class="b2c-btn b2c-btn-primary b2c-btn-small" style="float: left;">Generate</button>
            <button id="cip-genpw-btn-clipboard" class="b2c-btn b2c-btn-small" style="float: right;">Copy to clipboard</button>
        </div>
        <div class="b2c-input-append cip-genpw-password-frame">
            <input id="cip-genpw-textfield-password" type="text" class="cip-genpw-textfield"><span class="b2c-add-on" id="cip-genpw-quality">123 Bits</span>
        </div>
        <label class="cip-genpw-label">
            <input id="cip-genpw-checkbox-next-field" type="checkbox" class="cip-genpw-checkbox"> also fill in the next password-field
        </label>
        <button id="cip-genpw-btn-fillin" class="b2c-btn b2c-btn-small">Fill in &amp; copy to clipboard</button>
    </div>
</div>
</body>

</html>

重新启动，访问页面，大家可以看到登陆界面是不是优化了很多。

6、小节

简单的django的登陆页面已经设计好了，通过最初的粗糙界面到现在优化界面，是不是感觉好多了。 那么，有兴趣的朋友，赶紧自己部署一套环境，自己去尝试一下，做出自己漂亮的登陆界面吧，欢迎各位有兴趣的同学，留言交流哦！


以上是关于Django 创建属于自己的登陆界面的主要内容，如果未能解决你的问题，请参考以下文章

JSP 设计教师与学生不同登陆界面(带验证码)

[Django]登陆界面以及用户登入登出权限

ubuntu中如何修改属于root的文件

如何写第一个属于自己的Web页面（Django）

VSCode插件开发全攻略代码片段设置自定义欢迎页

如何用delphi 做个一个用户登陆界面