Flask實戰第62天：帖子詳情頁布局

阿新 • • 發佈：2018-10-07

add article ron boa 首頁視圖 ref head ()

在templates/front/下創建詳情頁面front_pdetail.html

編輯front.views.py創建詳情頁的視圖函數

from flask import abort
...

@bp.route(‘/p/<post_id>/‘)
def post_detail(post_id):
    post = PostModel.query.get(post_id)
    if not post:
        abort(404)
    return render_template(‘front/front_pdetail.html‘, post=post)

上面寫了，如果帖子不存在，則返回404，我們先創建個404頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BBS論壇404頁面</title>
</head>
<body>
    您要找的頁面已經到火星去了~~
    <div>
        <a href="/">回到首頁</a>
    </div>
</ 
body>
</html>

front_404.html

然後我們寫個鉤子函數，返回404的頁面，編輯front.hooks.py

@bp.errorhandler
def page_not_found():
    return render_template(‘front/front_404.html‘),404

帖子詳情頁面布局

編輯front_pdetail.html

{% extends ‘front/front_base.html‘ %}

{% block title %}
    {{ post.title }}
{% endblock %}


{ 
% block head %}
    <link rel="stylesheet" href="{{ url_for(‘static‘, filename=‘front/css/front_pdetail.css‘) }}">
{% endblock %}

{% block body %}
    <div class="lg-container">
        <div class="post-container">
            <h2>{{ post.title }}</h2>
            <p class="post-info-group">
                <span>發表時間：{{ post.create_time }}</span>
                <span>作者：{{ post.author.username }}</span>
                <span>所屬板塊：{{ post.board.name }}</span>
                <span>閱讀數：{{ post.read_count }}</span>
                <span>評論數：0</span>
            </p>
            <article class="post-content" id="post-content" data-id="{{ post.id }}">
                {{ post.content|safe }}
            </article>
        </div>

    </div>
    <div class="sm-container"></div>
{% endblock %}

front_pdetail.html 技術分享圖片

.post-container{
    border: 1px solid #e6e6e6;
    padding: 10px;
}

.post-info-group{
    font-size: 12px;
    color: #8c8c8c;
    border-bottom: 1px solid #e6e6e6;
    margin-top: 20px;
    padding-bottom: 10px;
}

.post-info-group span{
    margin-right: 20px;
}

.post-content{
    margin-top: 20px;
}

.post-content img{
    max-width: 100%;
}

front_pdetail.css

在首頁配置帖子的鏈接

技術分享圖片

Flask實戰第62天：帖子詳情頁布局

add article ron boa 首頁視圖 ref head () 在templates/front/下創建詳情頁面front_pdetail.html 編輯front.views.py創建詳情頁的視圖函數 from flask import abort

Flask實戰第60天：帖子分頁技術實現

分頁技術 pip for 實現 index pytho itl 測試 manager 編輯manage.py，添加測試帖子 @manager.command def create_test_post(): for x in range(1, 100):

12、Flask實戰第12天：子域名

cms div flask urn str page conf ive 配置什麽是子域名，我們的後臺管理系統，比如cms.heboan.com。配置子域名需要用到藍圖技術：我現在buleprints下面創建一個cms.py 藍圖 from flask impo

11、Flask實戰第11天：視圖使用裝飾器

... 訪問表示 lena 實戰之前定義 app style 藍圖的基本使用之前我們寫的代碼都是集中在一個主程序文件裏面。這樣不利於分層解耦和維護。藍圖的作用就是讓我們的flask項目更加模塊化結構更加清晰，可以將相同模塊的視圖函數放在同一個藍圖下，同一個文件中，

29、Flask實戰第29天：cms用戶名渲染和註銷功能實現

() __init__ 獲取用戶信息 mode use imp 是把 user 找到這節來完成用戶名渲染和註銷的功能，目前用戶名在前端頁面是寫死的，我們需要動態的展示出來用戶名渲染實現用戶名動態展示，其中一種方法就是在視圖函數，根據session信息，獲取到u

32、Flask實戰第32天：優化json數據的返回

新建地方必須密碼錯誤 login form image 返回定義接著上節，我們通過jsonify返回json數據非常方便 ... return jsonify({"code": 400, "message": message}) 返回什麽數據則是公

33、Flask實戰第33天：sweetalert提示框

分享圖片 ucc tco 輸入框要素 err tom lap ESS 這節我們繼續優化，接收到返回值，我們在前端做一些處理，如:密碼修改成功，彈出一個成功的提示框。這個提示框我們采用sweetalert 其中xtalert.js是對上面兩個文件的一個封裝，使得我們用

36、Flask實戰第36天：客戶端權限驗證

man 前臺 role .html last endif 開發運營賬號編輯cms_base.html <li><a href="#">{{ g.cms_user.username }}<span>[超級管理員]</

Flask實戰第37天：服務器權限驗證

ont 評論服務器權限 page 服務器 hid spa div 圖片完成服務器權限驗證之前，我們先如下頁面先補上帖子管理 {% extends ‘cms/cms_base.html‘ %} {% block title %} 帖子管理

Flask實戰第40天：圖片驗證碼生成技術

all see pillow 字體大小 src print new line 訪問安裝pillow pip install pillow 在utils下新建python package命名為captcha 把需要需要用到的字體放在captcha下編輯

Flask實戰第45天：完成前臺登錄界面

ext tel 分享 title ron extends end 登錄頁面 captcha 我們的註冊頁面和登錄頁面有很多相似之處，因此，也可以基於一個模板來實現。首先創建一個模板html,命名為front_signbase.html，然後修改註冊頁面front

Flask實戰第53天：cms編輯輪播圖功能完成

當我 edi comm 前端 ces 直接 ide func 需要後端邏輯表單驗證，這裏編輯就是和添加的內容一樣，所以可以直接繼承添加輪播圖的表單驗證，然後多加一個輪播圖的id即可編輯cmd.forms.py class UpdateBannerForm(

Flask實戰第56天：板塊管理

更新 ble form error mage mcal == delete 樣式 cms布局編輯 cms_boards.html {% block main_content %} <div class="top-box">

第6天：DIV+CSS頁面布局實戰

pan n) bsp css 運行是個例子使用記得今天我從早上9:00寫代碼一直寫到下午18:00，寫的我差點抑郁了，還好最後終於寫出了一個完整頁面，沒有做動畫效果，就是練習了一下DIV+CSS布局，做的是福務達(www.zzfwd.cn)的主頁，真是不容易。然後

24、Django實戰第24天：講師列表頁

try object imp 圖片 light except div 分頁 integer 1、復制teracher-list.html到templates目錄下 2、編輯teacher-list.html，繼承base模板 3、編輯organization.vie

2、Django實戰第2天：app設計

搜索路徑 enc 註冊 image nbsp courses http pps 令行 app設計：五大模塊 users 用戶管理 courses 課程管理 organization 機構和教師管理 operation 用戶

4、Django實戰第4天：xadmin快速搭建後臺管理系統

blog true highlight 我們訪問 min 自動 att 後臺 Django默認為我們提供了後臺管理系統admin, urls.py中配置的第一條就是訪問後臺管理系統admin的 urlpatterns = [ url(r‘^admin/‘,

6、Django實戰第6天：用戶登錄

pla 後臺 127.0.0.1 rtc user bubuko htm div eth 今天開始，我們需要來寫後臺邏輯了.... 後臺邏輯代碼都是編寫在views.py文件裏面，今天要完成的登錄功能，因此來編輯users.views.py 這裏我們根據請求方法來

8、Django實戰第8天：session和cookie自動登錄機制

src exp 密碼登錄 spa 一個實現服務器技術狀態因為http是無狀態協議，因此，並不會記錄用戶的登錄狀態。在早期，是直接把用戶名和密碼等信息存儲在瀏覽器的cookie來實現記錄用戶密碼登錄。但是這樣存在安全隱患，只要別人登錄你的電腦cookie信息，就

15、Django實戰第15天：我要學習咨詢

一個 ras info djang div 提交 bubuko 分享 Go 今天完成的是課程機構列表頁面的最後一個模塊：我要學習我們在models中創建對應的表時UserAsk。之前我們講過：在做表單的時候，我們可以通過forms先對提交的數據做一次15、Djang

Flask實戰第62天：帖子詳情頁布局

帖子詳情頁面布局

相關推薦