Django——簡單版登陸功能

時間  2020-09-29
標籤 django 簡單 登陸 功能 欄目 Python 简体版
原文   原文鏈接

前提須要：把框架那些配置啥的都寫好css

用bootstrap(別人寫好的樣式)把界面顯示的好看點html

 

 

1、app02/views.py

from django.shortcuts import render,redirect,HttpResponse

# Create your views here.


def login(request):
    if request.method=='GET':
        return render(request,'login.html')
    else:
        name=request.POST.get('name')
        password=request.POST.get('password')
        print(name)
        print(password)
        if name=='ayca' and password=='123':
            # return redirect('http://www.baidu.com')
            # 登陸成功重定向到index頁面
            return redirect('/index')
        else:
            return HttpResponse('用戶名密碼錯誤')


def index(request):
    return render(request,'index2.html')

2、settings.py

import os

# BASE_DIR：項目根路徑
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# SECRET_KEY：密鑰，項目中默認的一些加密用它（不須要關注，能夠改，可是不能刪）
SECRET_KEY = 'dk_'
# DEBUG：調試模式，開，開發階段是true，上線階段把它設成false
# 設置成開報錯信息更完善
DEBUG = True

# ALLOWED_HOSTS：上線階段使用，容許誰訪問
ALLOWED_HOSTS = ['*']


# INSTALLED_APPS   項目全部的app，新建的app要在裏面註冊
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 'app01.apps.App01Config',
    'app01',
    # 'app02.apps.App02Config', #
    'app100' #
]


# MIDDLEWARE  中間件
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]


# ROOT_URLCONF  根路由是哪一個文件，根路由的位置能夠變
ROOT_URLCONF = 'day60.urls'


# TEMPLATES  模板文件存放路徑(若是使用django-admin建立的項目，須要手動配，不然找不到)
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]


# WSGI_APPLICATION  wsgi服務器使用的是哪一個
WSGI_APPLICATION = 'day60.wsgi.application'


# DATABASES  數據庫連接配置
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

# 不用管（內置app相關）
AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# 國際化相關，語言，時區

LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True


# 靜態文件配置相關
STATIC_URL = '/static/'
# 再配一個STATICFILES_DIRS=列表（列表內寫路徑），單詞一個字母都不能錯
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static'),
]

3、day60/urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from app02 import views as views2


# urlpatterns列表，列表內放了url函數的執行結果
# 使用很簡單，複製一行，改一下第一個參數（正則表達式），第二個參數是視圖函數內存地址
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 在內部，請求來了，路徑匹配成功，內部自動調用index(request),把request傳入
    # url(r'^index', views.index),


    # 登陸小案例
    url(r'^login', views2.login),
    url(r'^index', views2.index),

]

4、static/bootstrap

把已下載好的bootstrap直接拉入，並導入index2裏jquery

5、直接導入已下載好的或引用jQurey地址

 

jQuery相關網站

官網 https://jquery.com/
文檔API： http://jquery.cuishifeng.cn/index.html
#直接打開復制粘貼到本身建立的.js / .min.js文件下
BootCDN jQuery各個版本地址： https://www.bootcdn.cn/jquery/

#方式一：本地引入
<script src="jquery-3.5.1.min.js"></script>
<script>
    //注意，必定在引入jQuery以後，再使用jQuery提供的各類操做
</script>

#方式二：直接使用CDN
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.js"></script>
<script>
    code...
</script>

 

 

 

6、templates\index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <script src="/static/js/jquery.min.js"></script>
    <title>首頁</title>
</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">導航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>標題1 本身寫</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>© 2016 Company, Inc.</p>
      </footer>
    </div> <!-- /container -->



</body>
</html>
index2

7、templates\login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <title>Title</title>
</head>
<body>

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h1 class="text-center">登陸功能</h1>
        <form action="" method="post">
            <div class="form-group">
                <label for="">用戶名：</label>
                <input type="text" name="name" class="form-control">
            </div>


            <div class="form-group">
                <label for="">密碼：</label>
                <input type="password" name="password" class="form-control">
            </div>

            <div class="text-center">

                <input type="submit" value="登陸" class="btn btn-success">
            </div>

        </form>
    </div>

</div>

</body>
</html>
login
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程