Flask自己寫日記藍圖


8月份,我正式開始學習。第一遍看的時候,壓根看不懂。只能通過checkout它版本庫里的每個版本來聯系書中內容進行學習。這樣我就花了一個月時間簡單過了一遍。

9月份,我雖然過了一遍,可是感覺書中知識沒有變成我自己的。我還沒有真正學會。我不知道該怎么做,就把書中的內容手打了一遍。做了一個微博出來,并且部署上線了


QQ截圖20161008233441.png

即使這樣我還是有一種不安的感覺在心中。我覺得,我還是沒有真正學會flask這個框架。期間為了緩解疲勞,我有一個禮拜放下了flask的學習,跑去學寫爬蟲去了。還寫了些卵東西...


IMG_2823.PNG

在我去泰國度假以前,我本來設定的下一步學習方案是學會如何使用模板,把我的網站弄漂亮。還有利用爬蟲把爬回來的東西放到網站上去。
現在回來以后,怎么說呢。我有種感覺,始終得先回歸書中知識,把一些章節搞清楚心里才踏實,然后才去做剛才我寫的那些。

<strong>10.9號更新</strong>
今天9點我就起來了比平時起早了一個小時。睡醒以后馬上就知道自己要學什么做什么了。所以人啊,千萬不要熬夜。一覺睡醒,思路就通了。今天先定個小目標:自己做個博客的頁面,然后利用flask的藍圖加入到我原來的微博中。好了,首先第一件事就是要做個博客的頁面。我查了查bootstrap的各種用法,找到了個可是編輯器以后,一切都變得簡單起來了。

火狐截圖_2016-10-09T09-50-28.820Z.png

這是我的博客頁面,帶有縮略圖,標題,摘要。點擊detail可以打開博文頁面
上一下代碼讓大家看看思路

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row">
                {% for post in posts %}
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="300x200" src={{ post.src }} />
                        <div class="caption">
                            <h3>
                                {{ post.title }}
                            </h3>
                            <p>
                                {{ post.body [:20]}}
                            <p>
                                 <a class="btn btn-info" href="{{ url_for('.post', id=post.id) }}">Detail</a> 
                            </p>
                        </div>
                    </div>
                </div>
                {%endfor%}
            </div>
        </div>
    </div>
</div>
火狐截圖_2016-10-09T09-52-03.340Z.png

基本的功能都實現了,by the way 下面的輸入框肯定要加入權限的,只有管理員可見。然后剩下的就是藍圖了。今天很幸運,沒遇到什么坑,沒怎么卡住。明天再弄藍圖把。

<strong>10.10</strong>
我的靈魂遭受了會心一擊。。。我今天好努力的把藍圖寫好插入結果它給我提示這個吊玩意


QQ截圖20161010172816.png

特么的數據庫又怎么了!!!我把新寫的藍圖刪了還是不行!我把版本切回到之前還是不行!!最后我把所有代碼怒刪了!!
現在是晚上8點50分,我剛健身回來,感覺心力交瘁。直到現在,我還是沒辦法重新開始寫代碼。
好了,寫了一個多小時代碼,運行報錯!

![I}D~I9BWEZ}0V)318%$]MP6.png](http://upload-images.jianshu.io/upload_images/2577034-22f936dfb52d07e3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

QQ圖片20161010222242.png

找到問題了

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "_macros.html" as macros %}
{% block title %}Leon blog{% endblock %}
{% block content %}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row">
                {% for diary in diarys %}
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="300x200" src={{ diary.src }} />
                        <div class="caption">
                            <h3>
                                {{ diary.title }}
                            </h3>
                            <p>
                                {{ diary.body [:20]}}
                            <p>
                                 <a class="btn btn-info" href=#>Detail</a>
                            </p>
                        </div>
                    </div>
                </div>
                {%endfor%}
            </div>
        </div>
    </div>
</div>




<div class="pagination">
    {{ macros.pagination_widget(pagination, '.index') }}
</div>
<div class="pagination">
    {{ macros.pagination_widget(pagination, '.index') }}
</div>

是這部分的錯!

火狐截圖_2016-10-10T14-48-14.232Z.png

我以為我成功了,可我還是太天真了。。。


提交新博客的時候它返回錯誤。。。。

<strong>10.11</strong>
一大早醒來,我思考了下。

from flask import request,render_template, redirect,url_for
from . import diary
from .. import db
from ..models import Diary
from .forms import DiaryForm
from config import config

@diary.route('/diary', methods=['GET', 'POST'])
def blog():
    form = DiaryForm()
    if form.validate_on_submit():

        diary = Diary(title=form.title.data,body=form.body.data,src=form.src.data)
        db.session.add(diary)
        return redirect(url_for('diary'))
    page = request.args.get('page',1, type=int)
    pagination = Diary.query.order_by(Diary.timestamp.desc()).paginate(
        page,per_page=20,
        error_out=False)
    diarys = pagination.items
    return render_template('diary.html', form = form,diarys=diarys,pagination=pagination)

我把

return redirect(url_for('diary'))

刪掉了
然后再提交

火狐截圖_2016-10-11T03-26-15.585Z.png

沒有報錯了!!!
。。。可是,它不會自己刷新

我需要再改一下代碼,我把views的

return redirect(url_for('diary'))
放回去,并且改成return redirect('diary')
然后就成功了!!這次真的成功了!!
好了上代碼把

QQ截圖20161012001852.png

這是我的藍圖結構

diary的init.py

from flask import Blueprint

diary = Blueprint('diary', name)

from . import views
` ```

diary的forms.py

from flask_wtf import Form
from wtforms import StringField, SubmitField,TextAreaField
from wtforms import ValidationError
from wtforms.validators import Required

class DiaryForm(Form):
    title = StringField('title')
    body = TextAreaField("What's on your mind?", validators=[Required()])
    src = StringField("pics link?", validators=[Required()])
    submit = SubmitField('Submit')

diary的views.py

from flask import request,render_template, redirect,url_for
from . import diary
from .. import db
from ..models import Diary
from .forms import DiaryForm
from config import config

@diary.route('/diary', methods=['GET', 'POST'])
def blog():
    form = DiaryForm()
    if form.validate_on_submit():

        diary = Diary(title=form.title.data,body=form.body.data,src=form.src.data)
        db.session.add(diary)
        return redirect('diary')
    page = request.args.get('page',1, type=int)
    pagination = Diary.query.order_by(Diary.timestamp.desc()).paginate(
        page,per_page=20,
        error_out=False)
    diarys = pagination.items
    return render_template('diary.html', form = form,diarys=diarys,pagination=pagination)

diary.html

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "_macros.html" as macros %}
{% block title %}Leon blog{% endblock %}
{% block content %}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row">
                {% for diary in diarys %}
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="300x200" src={{ diary.src }} />
                        <div class="caption">
                            <h3>
                                {{ diary.title }}
                            </h3>
                            <p>
                                {{ diary.body [:20]}}
                            <p>
                                 <a class="btn btn-info" href=#>Detail</a>
                            </p>
                        </div>
                    </div>
                </div>
                {%endfor%}
            </div>
        </div>
    </div>
</div>



{% if current_user.can(Permission.MODERATE_COMMENTS) %}#這里我偷懶,直接把語句復制過來的。可以修改評論的權限等同于管理員權限了
    {{ wtf.quick_form(form) }}
{%endif%}
{% endblock %}

暫時就這樣先吧,明天再做修改

<strong>10.12</strong>
今天做最后的diary單獨網頁,上代碼
views

@diary.route('/diary/<int:id>', methods=['GET', 'POST'])
def diary(id):
    diary = Diary.query.get_or_404(id)
    return render_template('diarys.html', diarys=[diary])
                           

新建一個diarys.html

{% extends "base.html" %}


{% block title %}Flasky - Diary{% endblock %}
{% block content %}
{% for diary in diarys %}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h3>
                {{ diary.title }}.
            </h3>
            <p>
                 {{ diary.body }}
                
            </p><img alt="140x140" src={{ diary.src }} />
             {<p>{{ moment(diary.timestamp).fromNow() }}</p>
            
        </div>
    </div>
</div>
{%endfor%}
{% endblock %}

點擊detail

火狐截圖_2016-10-12T07-57-18.969Z.png

成功了 呀!!!!

火狐截圖_2016-10-12T07-55-48.770Z.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 22年12月更新:個人網站關停,如果仍舊對舊教程有興趣參考 Github 的markdown內容[https://...
    tangyefei閱讀 35,235評論 22 257
  • 什么是藍圖? 一個藍圖定義了視圖,模板,靜態文件以及可以用于應用程序的其它元素的集合。例如,讓我們假設下我們有一個...
    邪惡的Sheldon閱讀 1,273評論 0 1
  • 本文首發于Gevin的博客 原文鏈接:Flask 入門指南 未經 Gevin 授權,禁止轉載 1. 初識Flask...
    Gevin閱讀 16,917評論 10 237
  • 第七章 大型程序架構 雖然在一個腳本里完成一個web應用很便利,但是這也意味著它很難擴展。當程序不斷增長,越來越復...
    易木成華閱讀 939評論 0 1
  • 作者:杜志鵬鏈接:https://www.zhihu.com/question/31748237/answer/5...
    cexpert閱讀 3,703評論 1 5