博客頁面設計
博客頁面概要
-
博客主頁面
-
博客文章內容頁面
-
博客撰寫頁面
博客主頁面
主頁面內容
-
文章標題列表，超鏈接
-
發表博客按鈕（超鏈接）
列表編寫思路
-
取出數據庫中所有文章對象
-
將文章對象們打包成列表，傳遞到前端
-
前端頁面把文章以標題超鏈接的形式逐個列出
For循環模板
{% for xx in xxs %}
HTML語句
{% endfor %}
修改后的博客主頁views.py：
1 from django.shortcuts import render 2 from django.http import HttpResponse 3 from . import models 4 def index(request): 5 # 獲取所有的條數 6 articles = models.Article.objects.all() 7 return render(request,'blog/index.html',{'articles':articles})
修改后的博客主頁index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <h1><a href="">新文章</a></h1> 10 {% for article in articles %} 11 <a href="">{{ article.title }}</a> 12 <br/> 13 {% endfor %} 14 15 </body> 16 </html>
博客文章頁面
-
標題
-
文章內容
-
修改文章按鈕（超鏈接）
1.在blog中的views.py添加響應函數article_page()：
1 # blog/views.py 2 3 from django.shortcuts import render 4 from django.http import HttpResponse 5 from . import models 6 7 def article_page(request,article_id): 8 article = models.Article.objects.get(pk=article_id) 9 return render(request,'blog/article_page.html',{'article':article})
2.在模板templates中添加文章詳情頁面article_page.html：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Article Page</title> 6 </head> 7 <body> 8 <h1>{{ article.title }}</h1> 9 <br/> 10 <h3>{{ article.content }}</h3> 11 <br/> 12 <a href="">修改文章</a> 13 </body> 14 </html>
3.在blog/urls.py添加文章詳情路由:
1 # blog/urls.py 2 3 from django.conf.urls import url 4 from . import views 5 6 urlpatterns = [ 7 url('^index/$',views.index), 8 url('^article/(?P<article_id>[0-9]+)$',views.article_page) 9 ]
URL傳遞參數
-
參數寫在響應函數中request后，可以有默認值
-
URL正則表達式：r'^/article/(?P<article_id>[0-9]+)/$'
-
URL正則中的組名必須和參數名一致
Django中的超鏈接
超鏈接目標地址
-
href后面是目標地址
-
template中可以用"{% url 'app_name:url_name' param %}" （app_name:應用命名空間；url_name:鏈接名稱）其中app_name和url_name都在url中配置
url函數的名稱參數
-
根urls，寫在include()的第二個參數位置，namespace = 'blog'
-
應用下則寫在url()的第三個參數位置，name = 'article'
主要取決於是否使用include引用了另一個url配置文件
修改后的myblog/urls.py文件如下：
1 from django.contrib import admin 2 from django.urls import path,include 3 urlpatterns = [ 4 path('admin/', admin.site.urls), 5 path('blog/', include('blog.urls',namespace='blog')), 6 ]
修改后的blog/urls.py文件如下：
1 from django.conf.urls import url 2 from . import views 3 app_name = 'blog' 4 urlpatterns = [ 5 url('^index/$',views.index), 6 url('^article/(?P<article_id>[0-9]+)$',views.article_page,name='article_page') 7 ]
在這里請注意，一定要在應用下的urls.py文件中加上app_name = 'app_name'，不然會報錯不通過。
最后就應該修改主頁文章鏈接：
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 </head> 5 <body> 6 <h1><a href="">新文章</a></h1> 7 {% for article in articles %} 8 <a href="{% url 'blog:article_page' article.id %}">{{ article.title }}</a> 9 <br/> 10 {% endfor %} 11 12 </body> 13 </html>
博客編輯撰寫頁面
頁面內容
-
標題編輯欄
-
文章內容編輯區域
-
提交按鈕
第一步：在blog應用下的模板中建立edit_page.html文件，並編輯頁面得到如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Edit Page</title> 6 </head> 7 <body> 8 <form action="" method="post"> 9 <label> 10 文章標題 11 <input type="text" name="title"/> 12 </label> 13 <br> 14 <label> 15 文章內容 16 <input type="text" name="content"/> 17 </label> 18 <br> 19 <input type="submit" value="提交"> 20 </form> 21 </body> 22 </html>
第二步：在應用下的views.py文件中添加頁面渲染函數edit_page()后如下：
1 from django.shortcuts import render 2 from . import models 3 def index(request): 4 # 獲取所有的條數 5 articles = models.Article.objects.all() 6 return render(request,'blog/index.html',{'articles':articles}) 7 8 def article_page(request,article_id): 9 article = models.Article.objects.get(pk=article_id) 10 return render(request,'blog/article_page.html',{'article':article}) 11 12 def edit_page(request): 13 return render(request,'blog/edit_page.html')
第三步：在應用下的urls.py文件中配置編輯頁面的路由如下：
1 from django.conf.urls import url 2 from . import views 3 app_name = 'blog' 4 urlpatterns = [ 5 url('^index/$',views.index), 6 url('^article/(?P<article_id>[0-9]+)$',views.article_page,name='article_page'), 7 url('^edit/$',views.edit_page) 8 ]
這個時候可以直接在瀏覽器輸入url訪問edit_page.html頁面了
編輯響應函數
-
使用request.POST['參數名']獲取表單數據
-
models.Article.object.create(title,content)創建對象
兩個編輯頁面
思路
-
新文章為空，而修改得文章是有內容的
-
修改文章頁面有文章對象
-
文章的ID
為了去區分兩個編輯頁面，所以這里采用帶id的方式，新建編輯頁面的id=0，而修改編輯頁面的id還是原來的id，則：
修改后的views.py的edit_page()函數：
1 def edit_page(request,article_id): 2 if str(article_id)=='0': 3 return render(request,'blog/edit_page.html') 4 article = models.Article.objects.get(pk=article_id) 5 return render(request,'blog/edit_page.html',{'article':article})
同時給路由添加參數：
1 url('^edit/(?P<article_id>[0-9]+)$',views.edit_page,name='edit_page'),
將編輯頁面修改為：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Edit Page</title> 6 </head> 7 <body> 8 <form action="{% url 'blog:edit_action' %}" method="post"> 9 {% csrf_token %} 10 {% if article %} 11 <label> 12 文章標題 13 <input type="text" name="title" value="{{ article.title }}"/> 14 </label> 15 <br> 16 <label> 17 文章內容 18 <input type="text" name="content" value="{{ article.content }}"/> 19 </label> 20 <br> 21 {% else %} 22 <label> 23 文章標題 24 <input type="text" name="title"/> 25 </label> 26 <br> 27 <label> 28 文章內容 29 <input type="text" name="content"/> 30 </label> 31 <br> 32 {% endif %} 33 <input type="submit" value="提交"> 34 </form> 35 </body> 36 </html>
通過以上修改，就可以實現編輯頁面的頁面效果響應，但是最后的提交事件響應也得跟着改。
因此，可以再編輯頁面添加如下input標簽對后台傳值：
1 <input type="hidden" name="article_id" value="{{ article.id }}">
此時就應該修改views.py文件中的edit_action()函數：
1 def edit_action(request): 2 title = request.POST.get('title','TITLE') 3 content = request.POST.get('content','CONTENT') 4 article_id = request.POST.get('article_id','0') 5 6 if article_id == '0': 7 articles = models.Article.objects.all() 8 models.Article.objects.create(title = title,content = content) 9 return render(request, 'blog/index.html', {'articles': articles}) 10 11 article = models.Article.object.get(pk=article_id) 12 article.title = title 13 article.content = content 14 article.save() 15 return render(request, 'blog/article_page.html', {'article': article})
當前的工程目錄結構
myblog
|-----blog（應用目錄）
|-----migrations（數據移植模塊，內容自動生成）
|------__init__.py
|-----templates
|-----blog
|-----index.html（主頁面）
|-----article_page.html（文章詳情頁面）
|-----edit_page.html（編輯文章頁面）
|-----__init__.py
|-----admin.py（應用的后台管理系統配置）
|-----apps.py（應用的一些配置）
|-----models.py（數據模塊，類似於MVC結構中的Models（模型））
|-----tests.py（自動化測試模塊）
|-----views.py（執行響應的代碼所在模塊）
|-----urls.py(新增路由文件)
|-----myblog（項目目錄）
|-----__init__.py
|-----settings.py（項目中的總配置文件）
|-----urls.py（URL配置文件）
|-----wsgi.py（Python應用與Web服務器之間的接口）
|-----db.sqlite3（數據庫文件）
|-----manage.py（與項目進行交互的命令行工具集入口（項目管理器））
到這里博客的基本功能就已經完成了，接下來就需要根據自己的實際情況進行開發和優化了，有疑問和建議的可以底下留言哦！
我后面也會把開發完成的博客上線的，並且繼續分享開發過程中的一些重要知識點，到時候歡迎各位繼續訪問！