圖書管理系統(1)
阿新 • • 發佈：2020-11-25
圖書管理系統(1)
實現與資料庫互動 從資料庫中獲取資料展示,並新增資料到資料庫中
效果展示
點選新增書籍
look一下我們的目錄結構
接下來就是連線我們的資料庫,在 __init__ 中新增
import pymysql
pymysql.install_as_MySQLdb()
settings.py
1 DATABASES = { 2 'default': { 3 'ENGINE': 'django.db.backends.mysql', 4 'NAME': 'books', 5 'USER': 'root', 6 'PASSWORD': 'Abc1234!', 7 'HOST': '127.0.0.1', 8 'ROOT': 3306, 9 } 10 }
然後在models.py中建立我們的模型類
1 from django.db import models 2 from datetime import date 3 # Create your models here. 4 5 6 class Books(models.Model): 7 book_name = models.CharField(max_length=30)8 price = models.IntegerField() 9 publish_date = models.DateField(default=date.today) 10 publish = models.ForeignKey(to='Publish', on_delete=models.CASCADE) 11 12 13 class Publish(models.Model): 14 name = models.CharField(max_length=30)
1 urlpatterns = [ 2 url(r'^admin/', admin.site.urls),urls.py3 url(r'^books/$', views.books), 4 url(r'^books/add/$', views.books_add), 5 ]
初級版 views.py
1 from django.shortcuts import render 2 from home.models import Books, Publish 3 # Create your views here. 4 5 6 def books(request): 7 lst = [] 8 books = Books.objects.all() 9 10 for i in books: 11 lst.append(i) 12 13 return render(request, 'home/books.html', {'lst': lst}) 14 15 16 def books_add(request): 17 if request.method == 'POST': 18 date = request.POST 19 print(date) 20 book_name = request.POST.get('book_name') 21 book_price = request.POST.get('book_price') 22 book_date = request.POST.get('book_date') 23 book_publish = request.POST.get('book_publish') 24 print(book_publish) 25 publish_obj = Publish.objects.filter(name=book_publish).first() 26 27 #todo 跨表插入 publish 的必須是物件 28 29 books = Books.objects.create(book_name=book_name, price=book_price, publish_date=book_date, publish=publish_obj) 30 books.save() 31 return render(request, 'home/books_add.html')View Code
書籍主頁
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>圖書主頁</title> 8 <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"> 9 10 </head> 11 <body> 12 {% load static %} 13 <nav class="navbar navbar-inverse"> 14 <div class="container-fluid"> 15 <!-- Brand and toggle get grouped for better mobile display --> 16 <div class="navbar-header"> 17 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 18 data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 19 <span class="sr-only">Toggle navigation</span> 20 <span class="icon-bar"></span> 21 <span class="icon-bar"></span> 22 <span class="icon-bar"></span> 23 </button> 24 <a class="navbar-brand" href="#">Brand</a> 25 </div> 26 27 <!-- Collect the nav links, forms, and other content for toggling --> 28 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 29 <ul class="nav navbar-nav"> 30 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 31 <li><a href="#">Link</a></li> 32 <li class="dropdown"> 33 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" 34 aria-expanded="false">Dropdown <span class="caret"></span></a> 35 <ul class="dropdown-menu"> 36 <li><a href="#">Action</a></li> 37 <li><a href="#">Another action</a></li> 38 <li><a href="#">Something else here</a></li> 39 <li role="separator" class="divider"></li> 40 <li><a href="#">Separated link</a></li> 41 <li role="separator" class="divider"></li> 42 <li><a href="#">One more separated link</a></li> 43 </ul> 44 </li> 45 </ul> 46 <form class="navbar-form navbar-left"> 47 <div class="form-group"> 48 <input type="text" class="form-control" placeholder="Search"> 49 </div> 50 <button type="submit" class="btn btn-default">Submit</button> 51 </form> 52 <ul class="nav navbar-nav navbar-right"> 53 <li><a href="#">Link</a></li> 54 <li class="dropdown"> 55 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" 56 aria-expanded="false">Dropdown <span class="caret"></span></a> 57 <ul class="dropdown-menu"> 58 <li><a href="#">Action</a></li> 59 <li><a href="#">Another action</a></li> 60 <li><a href="#">Something else here</a></li> 61 <li role="separator" class="divider"></li> 62 <li><a href="#">Separated link</a></li> 63 </ul> 64 </li> 65 </ul> 66 </div><!-- /.navbar-collapse --> 67 </div><!-- /.container-fluid --> 68 </nav> 69 70 <div class="container"> 71 <a href="/books/add/"><button class="btn btn-success add">新增書籍</button></a> 72 <table class="table table-striped"> 73 <thead> 74 <tr> 75 <th>編號</th> 76 <th>書籍名稱</th> 77 <th>價格</th> 78 <th>出版日期</th> 79 <th>出版社</th> 80 <th>操作</th> 81 </tr> 82 </thead> 83 <tbody> 84 85 {% for foo in lst %} 86 87 <tr> 88 <th>{{ foo.pk }}</th> 89 <th>{{ foo.book_name }}</th> 90 <th>{{ foo.price }}</th> 91 <th>{{ foo.publish_date|date:'Y-m-d' }}</th> 92 <th>{{ foo.publish.name }}</th> 93 <th><button class="btn btn-warning">編輯</button> <button class="btn btn-danger">刪除</button></th> 94 </tr> 95 {% endfor %} 96 97 </tbody> 98 </table> 99 </div> 100 101 </body> 102 <script src="{% static 'plugins/jquery.js' %}"></script> 103 <script src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 104 <script> 105 $('.add').click = function (){ 106 $.ajax({ 107 url:'/book/add/', 108 type:'get', 109 }) 110 } 111 </script> 112 </html>books.html
新增頁面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>新增書籍</title> 8 <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"> 9 10 </head> 11 12 <body> 13 {% load static %} 14 <div class="container col-md-6 col-md-offset-3" style="margin-top: 50px"> 15 <form action="" method="post"> 16 <div class="form-group"> 17 <label for="book_name">書籍名稱</label> 18 <input type="text" class="form-control" id="book_name" name="book_name" placeholder="書籍名稱"> 19 </div> 20 <div class="form-group "> 21 <label for="book_price">價格</label> 22 <input type="text" class="form-control" id="book_price" name="book_price" placeholder="價格"> 23 </div> 24 <div class="form-group "> 25 <label for="book_date">出版日期</label> 26 <input type="date" class="form-control" id="book_date" name="book_date" placeholder="出版日期"> 27 </div> 28 <div class="form-group "> 29 <label for="book_publish">出版社</label> 30 <input type="text" class="form-control" id="book_publish" name="book_publish" placeholder="出版社"> 31 </div> 32 33 <a href="/books/"><button class="btn btn-success add pull-right ">提交</button></a> 34 </form> 35 </div> 36 37 38 </body> 39 <script src="{% static 'plugins/jquery.js' %}"></script> 40 <script src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 41 <script> 42 43 </script> 44 </html>books_add