1. 程式人生 > >the flask mega tutorial自學記錄 之 第六章 Profile Page(編輯頁)

the flask mega tutorial自學記錄 之 第六章 Profile Page(編輯頁)

  1. 在導航欄增加扉頁選項
    <div>
      Microblog:
      <a href="{{ url_for('index') }}">Home</a>
      {% if current_user.is_anonymous %}
      <a href="{{ url_for('login') }}">Login</a>
      {% else %}
      <a href="{{ url_for('user', username=current_user.username) }}">Profile<
/a> <a href="{{ url_for('logout') }}">Logout</a> {% endif %} </div>

2、user表增加2個欄位 app/models.py

from hashlib import md5
# ...

class User(UserMixin, db.Model):
    # ...
    def avatar(self, size):
        digest = md5(self.email.lower().encode('utf-8')).hexdigest()
return 'https://www.gravatar.com/avatar/{}?d=identicon&s={}'.format( digest, size)

3、遷移資料庫

flask db migrate -m "new fields in user model"
flask db upgrade

4、設定扉頁html格式

{% extends "base.html" %}

{% block content %}
    <table>
        <tr valign="top">
            <
td><img src="{{ user.avatar(128) }}"></td> <td> <h1>User: {{ user.username }}</h1> {% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %} {% if user.last_seen %}<p>Last seen on: {{ user.last_seen }}</p>{% endif %} </td> </tr> </table> <hr> {% for post in posts %} {% include '_post.html' %} #Jinja2's include語法 {% endfor %} {% endblock %}

5、設定上次訪問時間, 為了實時更新訪問時間,當客戶發起訪問請求時,就先把時間寫入user表。 app/routes.py:

from datetime import datetime

@app.before_request
def before_request():
    if current_user.is_authenticated:
        current_user.last_seen = datetime.utcnow()
        db.session.commit()

6、扉頁編輯 6.1 設定EditProfileForm欄位結構(ORM) app/forms.py:

from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired, Length

# ...

class EditProfileForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    about_me = TextAreaField('About me', validators=[Length(min=0, max=140)])  #設定文字長度
    submit = SubmitField('Submit')

6.2 設計扉頁編輯頁面html app/templates/edit_profile.html:

{% extends "base.html" %}

{% block content %}
    <h1>Edit Profile</h1>
    <form action="" method="post">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.about_me.label }}<br>
            {{ form.about_me(cols=50, rows=4) }}<br>
            {% for error in form.about_me.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
{% endblock %}

6.3 設定扉頁編輯檢視函式 app/routes.py

from app.forms import EditProfileForm

@app.route('/edit_profile', methods=['GET', 'POST'])
@login_required
def edit_profile():
    form = EditProfileForm()
    if form.validate_on_submit():
        current_user.username = form.username.data
        current_user.about_me = form.about_me.data
        db.session.commit()         #把新值傳入資料庫
        flash('Your changes have been saved.')
        return redirect(url_for('edit_profile'))
    elif request.method == 'GET':
        form.username.data = current_user.username
        form.about_me.data = current_user.about_me
    return render_template('edit_profile.html', title='Edit Profile',
                           form=form)

6.4 在使用者扉頁最底下增加一個“”編輯頁連結” app/templates/user.html:

  {% if user == current_user %}
                <p><a href="{{ url_for('edit_profile') }}">Edit your profile</a></p>
                {% endif %}