python大佬養成計劃----Django圖書人物適配系統(前端)

時間 2019-12-05

標籤 python 大佬養成計劃 django 圖書人物適配系統前端欄目 Python 简体版

原文原文鏈接

Django添加路由

與flask同樣，django也須要使用路由將URL與服務端要執行的代碼關聯。html

二者相同的地方是均可以將一個普通函數變成視圖函數。不一樣的是，flask使用裝飾器@app.route()定義路由，而django使用正則表達式定義路由。

操做：在咱們創建的book項目中新建urls.py文件python

#FristDjango\book\urls.py
from django.conf.urls import url
from django.contrib import admin
from book.views import index,detail
urlpatterns = [
    url(r'^$',index),   #http://127.0.0.1:9099/
    url(r'book/(?P<id>\d+)/$',detail)   #http://127.0.0.1:9099/book/1/
]

修改主項目的setting.py文件正則表達式

from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'',include('book.urls'))    

]

視圖函數能夠隨意編寫，如今僅用來作測試數據庫

#FristDjango\book\views.py
from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
def index(request): #django不一樣於flask，flask默認請求方式是request,而django裏面的請求對象必須做爲參數接收
    return  HttpResponse('ok')

def detail(request,id):
    return HttpResponse('%s is ok' %(id))

^匹配URL路徑的開始， $匹配URL路徑的結束。中間什麼都沒有，表示這個正則匹配的是根目錄，‘/’。

簡易的網頁結構

已經測試過網頁是可用的，如今編寫本身的html文件來實現本身的項目
咱們的網頁模板文件放在主項目templates/目錄下的應用文件裏,可能會有多個應用，因此創建不一樣的目錄，用來區分。
須要實現與數據庫的結合，後臺管理的數據庫信息應該在前臺顯示，從新編寫視圖函數django

#FristDjango\book\views.py
from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
from book.models import BookInfo,HeroInfo


def index(request): #django不一樣於flask，flask默認請求方式是request,而django裏面的請求對象必須做爲參數接收
    # return  HttpResponse('ok')
    books = BookInfo.objects.all()
    return render(request,'book/index_old.html',context={
        'books':books,
    })
def detail(request,id):
    # return HttpResponse('%s is ok' %(id))
    book = BookInfo.objects.get(id=id)
    heros = book.heroinfo_set.all()
    return render(request,'book/detail_old.html',context={
        'book':book,
        'heros':heros
    })

主頁顯示的html頁面flask

# templates/book/index_old.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主頁</title>
</head>
<body>
<ul>
{% for book in books %}
    <li>
    <h1>{{ book.btitle }}</h1>
        <div>{{ book.bpub_time }}</div>
    <p>{{ book.bcontent }}</p>
    </li>
{% endfor %}
</ul>
</body>
</html>

書籍詳情頁顯示的html頁面app

# templates/book/detail_old.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ book.btitle}}詳情頁</title>
</head>
<body>
    <h1>{{ book.btitle }}</h1>
<ul>
    {% for hero in heros %}
    <h2>{{ hero.hname }}</h2>
        <p>{{ hero.hcontent }}</p>
    {% endfor %}

</ul>
</body>
</html>

如何讓頁面變好看

step1: 書籍信息太少，修改書籍數據庫表結構，添加圖書摘要、圖書圖片
step2:從網上找一些好看的頁面文件來作修改框架

注意：靜態文件(CSS,JS,IMG)單獨存放一個目錄static/
樣式文件的目錄須要修改，主項目settings.py文件修改Static files

step1操做：修改book/models.py文件中BookInfo表的結構，添加摘要，圖片。新建static/uploads/目錄用來存放上傳的圖片。xss

bcontent = models.TextField(default='摘要', verbose_name='書籍摘要')
    bimg = models.ImageField(default=None, upload_to='static/uploads/')

終端執行數據庫遷移命令函數

python manage.py makemigrations
python manage.py migrate

使用管理員登錄後臺，修改書籍內容

step2操做:新建static/目錄後，修改主項目settings.py文件

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.10/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

注意：主頁和詳情頁有大量重複代碼，咱們建立一個基模板，讓應用模板繼承於基類可減小代碼重複量。
最後修改的網頁顯示如圖：

項目框架圖：