練習:Django實現簡單的圖書管理系統


基於Django實現的一個簡單的圖書管理系統

一、分析項目的需求

  1. 實現以下的兩個頁面
    展示所有圖書的頁面:

    添加、編輯圖書的頁面:

  2. 實現的功能:

    • 訪問主頁面時,需要從數據庫把所有數據讀出來,展示在頁面上
    • 點擊主頁面的“添加”按鈕時,跳轉到添加書籍的頁面,用戶添加好數據點擊提交,數據提交到數據庫保存,並跳轉到主頁面,展示添加完成后所有的圖書
    • 點擊主頁面的“編輯”按鈕時,跳轉到類似添加書籍的頁面,input框內顯示此行所有的數據,點擊提交后,更新數據庫此行的數據,並跳轉到主頁面,展示修改完成后所有的圖書
    • 點擊主頁面的“刪除”按鈕時,刪除此行數據,同步刪除數據庫中此行的內容

二、建立Django項目,完成需求

(一)、建立Django項目,連接mysql數據庫

  1. 先建立一個庫,比如library

  2. 配置settings,連接到mysql
    DATABASES = {
    'default': {
    'ENGINE': 'django.db.backends.mysql',
    'NAME': 'library',
    'HOST':'127.0.0.1',
    'PORT':3306,
    'USER':'root',
    'PASSWORD':'123'
    }
    }

  3. 在app01應用中的models.py文件中,建立表結構
    id、書名、價格、出版日期、出版社
    from django.db import models

    class MyLibrary(models.Model):
        id = models.AutoField(primary_key=True)
        book_name = models.CharField(max_length=20)
        price = models.FloatField()
        pub_date = models.DateField()
        publish = models.CharField(max_length=30)
    
  4. 在項目文件下的init.py文件中加入這兩句話
    import pymysql
    pymysql.install_as_MySQLdb()

  5. 最后執行數據庫同步指令
    python manage.py makemigrations
    python manage.py migrate

(二)、先向mysql數據庫中添加幾條數據

注:在存時間的時候,可能會發成跨時區的問題,發現時間晚了8小時,也就是自己存的時間的時候被修改成了UTC時間,就會出現這種情況,這個時候只需要修改一下settings中的配置就行了

# USE_TZ = True  默認的配置是True,改成False 

USE_TZ = False  

往數據庫中添加數據時,有以下三種方式:

  • 先在urls中配置好一個路徑,然后在views中建立一個對應的函數,寫插入數據的邏輯;(但是這種方法需要先訪問頁面,才能插入數據,比較麻煩)

  • 找到下方Django Console,直接寫邏輯,不用訪問頁面,就直接往數據庫插入數據了(這樣需要敲一句執行一句,也很麻煩)

  • 通過外部文件使用models
    任意路徑下創建一個py文件,比如ins_book.py
    # 外部文件使用Django的models需要配置Django環境
    import os

    if __name__ == '__main__':
        os.environ.setdefault("DJANGO_SETTINGS_MODULE", "library_pro.settings")  # manage.py中有,表示加載Django環境
        import django
        django.setup()  # 啟動django環境
    
        from app01 import models
        models.MyLibrary.objects.create(book_name='九陰真經', price='99.00', pub_date='2012-11-11', publish='華山')
        models.MyLibrary.objects.create(book_name='太極拳', price='188.00', pub_date='2018-04-25', publish='武當')
        models.MyLibrary.objects.create(book_name='打狗棍法', price='888.00', pub_date='2019-12-12', publish='丐幫')
        models.MyLibrary.objects.create(book_name='七傷拳', price='55.00', pub_date='1999-05-14', publish='崆峒')
        models.MyLibrary.objects.create(book_name='龍爪手', price='777.00', pub_date='1988-07-17', publish='少林')
        models.MyLibrary.objects.create(book_name='乾坤大挪移', price='55.00', pub_date='1777-11-14', publish='明教')
    

    這樣直接執行這個py文件,就可以把數據直接插入mysql數據庫當中了,不需要打開網頁訪問

(三)、制作查看所有書籍頁面

  1. 引入bookstrap靜態文件
    # 在settings中:
    STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'statics')
    ]

  2. 配置路徑
    # urls中:
    url(r'^mylibrary/', views.mylibrary,name='allbooks') # name起別名

  3. 創建一個all_book.html,目的是展示所有的書籍
    {% load static %}






    圖書管理系統

    </head>
    <body>
    
    
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">查看書籍</div>
            <div class="panel-body">
                <form class="form-inline" method="post">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="exampleInputAmount" placeholder="搜索">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">搜索</button>
                    <p class="text-right pull-right" >
                        <a href="{% url 'addbooks' %}" class="btn btn-primary">添加</a>
                    </p>
    
                    <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>編號</th>
                        <th>書籍名稱</th>
                        <th>價格</th>
                        <th>出版日期</th>
                        <th>出版社</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for book in book_list %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ book.book_name }}</td>
                            <td>{{ book.price }}</td>
                            <td>{{ book.pub_date|date:'Y-m-d' }}</td>
                            <td>{{ book.publish }}</td>
    
                            <td>
                                <p class="text-center">
                                    <a href="{% url 'alter
                                    books' book.id %}" class="btn btn-warning btn-sm glyphicon glyphicon-pencil">編輯</a>
                                    <a href="{% url 'delbooks' book.id %}" class="btn btn-danger btn-sm glyphicon glyphicon-remove">刪除</a>
                                </p>
                            </td>
                        </tr>
                    {% endfor %}
    
                    </tbody>
    
                </table>
                </form>
                <div class="pull-right">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
    
    
            </div>
        </div>
    </div>
    
    </body>
    </html>
    
  4. 寫views對應的函數,寫入相關邏輯
    def mylibrary(request):

        # 查所有的數據
        all_obj = models.MyLibrary.objects.all()
        return render(request,'all_book.html',{'book_list':all_obj})
    

(四)、制作添加書籍頁面

  1. 制作添加頁面的html文件,比如叫 addbook.html文件
    {% load static %}

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>Library</title>
        <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dit/css/bootstrap.css' %}">
    
    </head>
    <body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">           
                    添加書籍
            </div>
            <div class="panel-body">
                <div class="row">
                    <form class="col-md-8 col-sm-offset-2" method="post" action="">
                        {% csrf_token %} 
                        <div class="form-group">
                            <label for="exampleInputbook-name">書籍名稱</label>
                                <input type="text" class="form-control" id="exampleInputbook-name" placeholder="book-name" name="book_name">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputbook-price">價格</label>
                                <input type="number" class="form-control" id="exampleInputbook-price" placeholder="book-price" name="price">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputpub-date">出版日期</label>
                                <input type="date" class="form-control" id="exampleInputpub-date" placeholder="pub-date" name="pub_date">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputpublish">出版社</label>
                                <input type="text" class="form-control" id="exampleInputpublish" placeholder="publish" name="publish">
                        </div>
    
                        <button type="submit" id="b1" class="btn btn-success pull-right">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    
    </body>
    </html>
    
  2. 配置urls、views
    url(r'^addbook/', views.addbook,name='addbooks'),

    from django.urls import reverse
    
    def addbook(request):
        if request.method == 'GET':
            return render(request, 'addbook.html')
        else:
            book_name = request.POST.get('book_name')
            price = request.POST.get('price')
            pub_date = request.POST.get('pub_date')
            publish = request.POST.get('publish')
            models.MyLibrary.objects.create(book_name=book_name ,price=price ,pub_date=pub_date ,publish=publish )
        # return redirect('/mylibrary/')
        return redirect(reverse('allbooks'))  # 別名反向解析reverse('別名')
    
  3. 關聯好all_book.html中添加的那個按鈕:
    添加

  4. 此時,在我們測試提交日期的時候,又會出現問題:

    因為我們設置的價格input框的text屬性是number,而這個提示是瀏覽器對數據的限制,此時我們可以去掉這個限制
    在form表單中,這個form添加 novalidate 這個屬性:

(五)、制作刪除書籍頁面

  1. 配置urls、views
    url(r'^delbook/', views.delbook , name='delbooks'),

    def delbook(request,book_id):
        models.MyLibrary.objects.get(id=book_id).delete()
        return redirect(reverse('allbooks'))
    
  2. 關聯好all_book.html中刪除的那個按鈕:
    刪除

  3. 測試刪除的功能,理論上應該已經實現了

(五)、制作編輯書籍頁面

  1. 配置urls、views
    url(r'^alterbook/(\d+)/', views.alterbook , name='alterbooks'),

    def alterbook(request,book_id):
        if request.method == 'GET':
            try:
                book_msg = models.MyLibrary.objects.get(id=book_id)
            except Exception:
                return HttpResponse('別瞎雞兒改!!!')
            return render(request,'alterbook.html',{'book_msg':book_msg})
        else:
            book_name = request.POST.get('book_name')
            price = request.POST.get('price')
            pub_date = request.POST.get('pub_date')
            publish = request.POST.get('publish')
            models.MyLibrary.objects.filter(id=book_id).update(book_name=book_name ,price=price ,pub_date=pub_date,publish=publish )
            return redirect(reverse('allbooks'))
    
  2. 關聯好all_book.html中編輯的那個按鈕:
    編輯

  3. 制作編輯的html頁面,比如 alterbook.html文件
    {% load static %}

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>Library</title>
        <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dit/css/bootstrap.css' %}">
        <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dit/fonts' %}">
    
    </head>
    <body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                {% block title %}
                    修改書籍
                {% endblock title %}
            </div>
            <div class="panel-body">
                <div class="row">
                    <form class="col-md-8 col-sm-offset-2" method="post" action="" novalidate>
                    	{% csrf_token %} 
                        <div class="form-group">
                            <label for="exampleInputbook-name">書籍名稱</label>
                                <input type="text" class="form-control" id="exampleInputbook-name" value="{{ book_msg.book_name }}" name="book_name">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputbook-price">價格</label>
                                <input type="number" class="form-control" id="exampleInputbook-price" value="{{ book_msg.price }}" name="price">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputpub-date">出版日期</label>
                                <input type="date" class="form-control" id="exampleInputpub-date" value="{{ book_msg.pub_date|date:'Y-m-d'}}" name="pub_date">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputpublish">出版社</label>
                                <input type="text" class="form-control" id="exampleInputpublish" value="{{ book_msg.publish }}" name="publish">
                        </div>
    
                        <button type="submit" id="b1" class="btn btn-success pull-right">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    
    <script src="{% static 'jQuery.js' %}"></script>
    <script src="{% static 'bootstrap-3.3.7-dit/js/bootstrap.min.js' %}"></script>
    
    </body>
    </html>
    
  4. 測試功能


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM