前提需要：把框架那些配置啥的都寫好
用bootstrap(別人寫好的樣式)把界面顯示的好看點
一、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')
二、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'), ]
三、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), ]
四、static/bootstrap
把已下載好的bootstrap直接拉入，并匯入index2里
五、直接匯入已下載好的或參考jQurey地址
jQuery相關網站 官網 https://jquery.com/ 檔案API： http://jquery.cuishifeng.cn/index.html #直接打開復制粘貼到自己創建的.js / .min.js檔案下 BootCDN jQuery各個版本地址： https://www.bootcdn.cn/jquery/ #方式一：本地引入 <script src=https://www.cnblogs.com/guojieying/p/"jquery-3.5.1.min.js"></script> <script> //注意，一定在引入jQuery之后，再使用jQuery提供的各種操作 </script> #方式二：直接使用CDN <script src=https://www.cnblogs.com/guojieying/p/"https://cdn.bootcss.com/jquery/3.5.1/jquery.js"></script> <script> code... </script>
六、templates\index2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href=https://www.cnblogs.com/guojieying/p/"/static/bootstrap/css/bootstrap.css"> <script src=https://www.cnblogs.com/guojieying/p/"/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=https://www.cnblogs.com/guojieying/p/"#">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=https://www.cnblogs.com/guojieying/p/"#" 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=https://www.cnblogs.com/guojieying/p/"#" 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=https://www.cnblogs.com/guojieying/p/"#" 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=https://www.cnblogs.com/guojieying/p/"#" role="button">View details ?</a></p> </div> </div> <hr> <footer> <p>? 2016 Company, Inc.</p> </footer> </div> <!-- /container --> </body> </html>index2
七、templates\login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href=https://www.cnblogs.com/guojieying/p/"/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=https://www.cnblogs.com/guojieying/p/"登錄" class="btn btn-success"> </div> </form> </div> </div> </body> </html>login
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/134973.html
標籤：架構設計