Django小專案_使用者管理系統【第二篇】：基礎頁面
阿新 • • 發佈：2022-04-12
基礎頁面
-
配置URL
# mysite/urls.py from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ # path('admin/', admin.site.urls), path('', views.index), ]從app01匯入views檢視，配置path路徑，預設進入index檢視
-
編寫index檢視
# views.py from django.shortcuts import render def index(request): return render(request, "index.html")當訪問專案預設網址時，查詢path，預設進入index檢視，index檢視函式渲染index.html頁面並返回給瀏覽器
-
編寫index頁面
-
首先設計一個管理系統網站的基本框架，再讓首頁index.html繼承
-
在templates資料夾下新建layout.html 設計基本框架
-
BootStrap https://v3.bootcss.com/components/#navbar-default 在元件中找到導航條->預設樣式的導航條
-
複製程式碼到layout.html中，刪除、修改對應的樣式
【點選開啟：layout.html】
{% load static %} <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Page Title</title> <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}"> <style> .navbar{ border-radius: 0; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">聯通使用者管理系統</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="/depart/list">部門管理</a></li> <li><a href="/user/list">使用者管理</a></li> <li><a href="/pretty/list">靚號管理</a></li> <li><a href="#">Link</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登入</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">張三 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">個人資料</a></li> <li><a href="#">我的資訊</a></li> <li role="separator" class="divider"></li> <li><a href="#">登出</a></li> </ul> </li> </ul> </div> </div> </nav> <div> {% block content %} {% endblock %} </div> <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script> <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script> </body> </html>index.html繼承layout.html，在block中編寫自己的內容
<!-- index.html --> {% extends 'layout.html' %} {% block content %} <h2>歡迎來到首頁</h1> {% endblock %}呈現效果：
目前檔案列表：
-