django 靜態頁面的呼叫方法 與 部門新增資訊 , 部門修改資訊 , 部門刪除資訊 部門列表資訊
阿新 • • 發佈:2022-04-02
1. srtting.py 檔案去掉程式碼
'DIRS': []
2. bootstrap 的引入路徑
{% load static %} 絕對路徑
#樣式路徑
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
3. views.py 檔案設計程式碼
from django.shortcuts import render, HttpResponse, redirect from app import models '''部門列表''' def bumen_list(request): # 資料庫查詢資料 bumen_list = models.BuMen.objects.all() return render(request,'bumen_list.html',{'bumen_list': bumen_list})
'''新增部門''' def bumen_add(request):if request.method == 'GET': return render(request, 'bumen.add.html') # 獲取post 傳遞過來的資料 title = request.POST.get('title') #儲存資料 models.BuMen.objects.create(title=title) return redirect('/bumen/list')
'''刪除部門 - 不需要html頁面''' def bumen_delete(request): # get 方式獲取id nid = request.GET.get('nid') # 刪除傳過來的id models.BuMen.objects.filter(id=nid).delete() return redirect('/bumen/list')
'''修改部門- 另一種傳參 ''' def bumen_edit(request, nid): if request.method == 'GET': bumenjieguo = models.BuMen.objects.filter(id=nid).first()
# bumenjieguo返回靜態頁面 value 值 return render(request, 'bumen_edit.html', {'bumenjieguo':bumenjieguo}) title = request.POST.get('title') models.BuMen.objects.filter(id=nid).update(title=title) return redirect('/bumen/list')
靜態頁面程式碼 :
bumen_list.html 部門列表頁面
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 部門列表 </title> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> </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="#">CMS</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 class="active"><a href="/bumen/list/">部門 <span class="sr-only">(current)</span></a></li> <li><a href="/userinfo/list/">員工</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">admin</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 class="container"> <div style="margin-bottom: 10px;"> <a href="/bumen/add/" class="btn btn-success"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新建部門 </a> </div> <div class="panel panel-default"> <div class="panel-heading"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 部門列表</div> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>部門名稱</th> <th>操作</th> </tr> </thead> <tbody> {% for item in bumen_list %} <tr> <th scope="row">{{ item.id }}</th> <td>{{ item.title }}</td> <td> <a href="/bumen/{{ item.id }}/edit" class="btn btn-primary btn-xs">編輯</a> <a href="/bumen/delete/?nid={{ item.id }}" class="btn btn-danger btn-xs">刪除</a> </td> </tr> {% endfor %} </tbody> </table> </div> </div> <script src="{% static 'js/jquery.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> </body> </html>
部門增加頁面 bumen.add.html
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 新增部門 </title> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> </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="#">CMS</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 class="active"><a href="/bumen/list/">部門 <span class="sr-only">(current)</span></a></li> <li><a href="/userinfo/list/">員工</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">admin</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><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 新建部門</div> </div> <form method="post"> {% csrf_token %} <div class="form-group"> <label for="exampleInputEmail1">部門名稱</label> <input type="text" class="form-control" placeholder="部門名稱" name="title"> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> <script src="{% static 'js/jquery.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> </body> </html>
部門修改頁面 bumen_edit.html
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 修改部門 </title> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> </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="#">CMS</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 class="active"><a href="/bumen/list/">部門 <span class="sr-only">(current)</span></a></li> <li><a href="/userinfo/list/">員工</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">admin</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><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 修改部門</div> </div> <form method="post"> {% csrf_token %} <div class="form-group"> <label for="exampleInputEmail1">部門名稱</label> <input type="text" class="form-control" placeholder="部門名稱" name="title" value="{{ bumenjieguo.title }}"> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> <script src="{% static 'js/jquery.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> </body> </html>