Python+Flask+MysqL設計網頁

Python+Flask+MysqL設計網頁

本人這學期在學習Python Web框架Flask下網站開發，這篇文章主要介紹在Web框架Flask下的網站開發入門實例，本文主要設計網友交流互動平臺，已經實現了註冊、登陸、首頁、發佈、詳情、我的中心功能

1、Flask簡介

Flask 是一個 Python 實現的 Web 開發微框架。官網：http://flask.pocoo.org/

Flask主要有靜態文件(staitc)、網頁文件(templstes)、主py文(newproject)件以及配置文件(config)這四大部分。

static主要存放提供給網頁css樣式、js樣式、以及圖片。

網頁文件是將效果展現給用戶的。

主py文件的做用是實現用戶與數據庫的交互，實現網頁上的功能，下圖1.1爲本實例的結構：

 

 

 

2、各模塊效果圖及重要代碼

2.1父模板及首頁

父模板是極其重要的，它是每一個頁面裏相同的部分。在父模板中，我主要設計了頁面背景，頂部導航欄，底部導航欄。首頁裏主要包含了三個模塊，問題列表、內容推薦、以及底部圖片導航。如圖2.1.1所示：

代碼：

# 將數據庫查詢結果傳遞到前端頁面 Question.query.all(),問答排序
@app.route('/')
def index():
    context = {
        'questions': Question.query.order_by('-time').all()
    }
    return render_template('index.html', **context)

 

 

                                                       圖2.1.1首頁

 

2.2登陸及註冊

登陸與註冊頁面的效果類似，在用戶註冊時須要判斷密碼是否一制，因此我加了一個js文件用以判斷註冊密碼是否一致。登陸頁面須要判斷用戶名及密碼是否與數據庫中的數據匹配，因此在主py文件中，我分別用了兩個函數來設置登陸與註冊，效果如圖2.2.一、圖2.2.2所示：

代碼：

# 登陸頁面，用戶將登陸帳號密碼提交到數據庫，若是數據庫中存在該用戶的用戶名及id，返回首頁

@app.route('/login', methods=['GET', 'POST'])

def login():

    if request.method == 'GET':

        return render_template('login.html')

    else:

        usern = request.form.get('username')

        passw = request.form.get('password')

        user = User.query.filter(User.username == usern).first()

        if user:

            if user.check_password(passw):

                session['user'] = usern

                session['id'] = user.id

                session.permanent = True

                return redirect(url_for('index'))  # 重定向到首頁

            else:

                return u'password error'

        else:

            return u'username is not existed'

註冊頁面

@app.route('/register', methods=['GET', 'POST'])

def register():

    if request.method == 'GET':

        return render_template('register.html')

    else:

        username = request.form.get('username')

        password = request.form.get('password')

        user = User.query.filter(User.username == username).first()

        if user:

            return 'username existed'

        else:

            user = User(username=username, password=password)

            db.session.add(user)  # 數據庫操做

            db.session.commit()

            return redirect(url_for('login'))  # 重定向到登陸頁

 

 

 

                                                    圖2.2.1註冊頁面

 

 

 

                                                         圖2.2.2.登陸頁面

 

2.3站友互動頁面

站友互動頁面能夠發佈問題，提交到數據庫內。如圖2.3.1所示：

代碼：

# 問答頁面
@app.route('/question', methods=['GET', 'POST'])
@loginFrist
def question():
    if request.method == 'GET':
        return render_template('question.html')
    else:
        title = request.form.get('title')
        detail = request.form.get('detail')
        classify = request.form.get('classify')
        author_id = User.query.filter(User.username == session.get('user')).first().id
        question = Question(title=title, detail=detail,classify=classify, author_id=author_id)
        db.session.add(question)
        db.session.commit()
    return redirect(url_for('index'))  # 重定向到登陸頁

                                                                                                                    圖2.3.1站友發佈頁面

2.4內容詳細頁面

內容詳細頁面能夠顯示每一個用戶發佈的內容，實現代碼以下：

@app.route('/detail/<question_id>')
def detail(question_id):
    quest = Question.query.filter(Question.id == question_id).first()
    comments = Comment.query.filter(Comment.question_id == question_id).all()
    return render_template('detail.html', ques=quest, comments=comments)

2.5我的中心頁面

我的中心能夠顯示用戶的全部問題，全部評論以及我的信息，點擊用戶名能夠跳轉至我的中心頁面

# 我的中心
@app.route('/usercenter/<user_id>/<tag>')
@loginFrist
def usercenter(user_id, tag):
    user = User.query.filter(User.id == user_id).first()
    context = {
        'user': user
    }
    if tag == '1':
        return render_template('usercenter1.html', **context)
    elif tag == '2':
        return render_template('usercenter2.html', **context)
    else:
        return render_template('usercenter3.html', **context)

3.主py文件代碼：

from flask import Flask
from flask import render_template, redirect, url_for, request, session
import config
from functools import wraps
from datetime import datetime
from sqlalchemy import or_, and_
from werkzeug.security import generate_password_hash, check_password_hash  # 密碼保護，使用hash方法

from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config.from_object(config)
db = SQLAlchemy(app)


#
class User(db.Model):
    __tablename__ = 'user'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    username = db.Column(db.String(20), nullable=False)
    _password = db.Column(db.String(200), nullable=False)  # 內部使用

    @property
    def password(self):  # 定義一個外部使用的密碼
        return self._password

    @password.setter  # 設置密碼加密
    def password(self, row_password):
        self._password = generate_password_hash(row_password)

    def check_password(self, row_password):  # 定義一個反向解密的函數
        result = check_password_hash(self._password, row_password)
        return result


#
class Question(db.Model):
    __tablename__ = 'question'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    author_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    title = db.Column(db.String(225), nullable=False)
    detail = db.Column(db.Text, nullable=False)
    classify = db.Column(db.Text, nullable=False)
    time = db.Column(db.DateTime, default=datetime.now())
    author = db.relationship('User', backref=db.backref('questions'))


class Comment(db.Model):
    __tablename__ = 'comment'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    author_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    question_id = db.Column(db.Integer, db.ForeignKey('question.id'))
    time = db.Column(db.DateTime, default=datetime.now())
    detail = db.Column(db.Text, nullable=False)
    question = db.relationship('Question', backref=db.backref('comments', order_by=time.desc))
    author = db.relationship('User', backref=db.backref('comments'))


# 增長數據
# user = User(username='vae', password='5201314')
# db.session.add(user)
# db.session.commit()
# #
# # 查詢數據
# user = User.query.filter(User.username == 'vae').first()
# print(user.username,user.password)
#
# #修改數據
# user.password = '250250'
# db.session.commit()

# db.create_all()




# 將數據庫查詢結果傳遞到前端頁面 Question.query.all(),問答排序
@app.route('/')
def index():
    context = {
        'questions': Question.query.order_by('-time').all()
    }
    return render_template('index.html', **context)


# 登陸頁面，用戶將登陸帳號密碼提交到數據庫，若是數據庫中存在該用戶的用戶名及id，返回首頁
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    else:
        usern = request.form.get('username')
        passw = request.form.get('password')
        user = User.query.filter(User.username == usern).first()
        if user:
            if user.check_password(passw):
                session['user'] = usern
                session['id'] = user.id
                session.permanent = True
                return redirect(url_for('index'))  # 重定向到首頁
            else:
                return u'password error'
        else:
            return u'username is not existed'


# 定義上下文處理器
@app.context_processor
def mycontext():
    usern = session.get('user')
    if usern:
        return {'username': usern}
    else:
        return {}


# 定義發佈前登錄裝飾器
def loginFrist(func):
    @wraps(func)
    def wrappers(*args, **kwargs):
        if session.get('user'):
            return func(*args, **kwargs)
        else:
            return redirect(url_for('login'))

    return wrappers


@app.route('/logout')
def logout():
    session.clear()
    return redirect(url_for('index'))


@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        return render_template('register.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        user = User.query.filter(User.username == username).first()
        if user:
            return 'username existed'
        else:
            user = User(username=username, password=password)
            db.session.add(user)  # 數據庫操做
            db.session.commit()
            return redirect(url_for('login'))  # 重定向到登陸頁


# 問答頁面
@app.route('/question', methods=['GET', 'POST'])
@loginFrist
def question():
    if request.method == 'GET':
        return render_template('question.html')
    else:
        title = request.form.get('title')
        detail = request.form.get('detail')
        classify = request.form.get('classify')
        author_id = User.query.filter(User.username == session.get('user')).first().id
        question = Question(title=title, detail=detail,classify=classify, author_id=author_id)
        db.session.add(question)
        db.session.commit()
    return redirect(url_for('index'))  # 重定向到登陸頁


@app.route('/detail/<question_id>')
def detail(question_id):
    quest = Question.query.filter(Question.id == question_id).first()
    comments = Comment.query.filter(Comment.question_id == question_id).all()
    return render_template('detail.html', ques=quest, comments=comments)


# 讀取前端頁面數據，保存到數據庫中
@app.route('/comment/', methods=['POST'])
@loginFrist
def comment():
    comment = request.form.get('new_comment')
    ques_id = request.form.get('question_id')
    auth_id = User.query.filter(User.username == session.get('user')).first().id
    comm = Comment(author_id=auth_id, question_id=ques_id, detail=comment)
    db.session.add(comm)
    db.session.commit()
    return redirect(url_for('detail', question_id=ques_id))


# 我的中心
@app.route('/usercenter/<user_id>/<tag>')
@loginFrist
def usercenter(user_id, tag):
    user = User.query.filter(User.id == user_id).first()
    context = {
        'user': user
    }
    if tag == '1':
        return render_template('usercenter1.html', **context)
    elif tag == '2':
        return render_template('usercenter2.html', **context)
    else:
        return render_template('usercenter3.html', **context)


# 搜索框帶參數搜素顯示在首頁
@app.route('/search/')
def search():
    qu = request.args.get('q')
    qus = request.args.get('p')
    ques = Question.query.filter(
        or_(
            Question.title.contains(qu),
            Question.detail.contains(qu),
            Question.classify.contains(qus)
            )


    ).order_by('-time')
    return render_template('index.html', questions=ques)


# 修改密碼
@app.route('/edit_password/', methods=['GET', 'POST'])
def edit_password():
    if request.method == 'GET':
        return render_template("edit_password.html")
    else:
        newpassword = request.form.get('password')
        user = User.query.filter(User.id == session.get('id')).first()
        user.password = newpassword
        db.session.commit()
        return redirect(url_for('index'))


# 等待
@app.route('/wait')
def wait():
    if request.method == 'GET':
        return render_template("wait.html")


if __name__ == '__main__':
    app.run(debug=True)

4.全部頁面代碼：

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>{% block title %}
    {% endblock %}
    </title>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/base.css') }}">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="{{ url_for('static',filename='js/base.js') }}"></script>
    {% block head %}
    {% endblock %}
</head>
<div>
    <div class="navbar">
        <nav class="navbar-top">
            <li id="logo"><img id="logo" src="{{ url_for( 'static',filename='img/logo副本.png') }}"
                               style="margin-top: 5px"
                               width="35px" alt="logo"></li>
            <li class="active"><a href="{{ url_for('index') }}">首頁</a></li>
            <li><a href="#">動畫</a></li>
            <li><a href="#">番劇</a></li>
            <li><a href="#">鬼畜</a></li>
            <form action="{{ url_for('search') }}" method="get">
                <li>
                    <select class="form-control" id="p" name="p" style="margin-top: 5px" >
                        <option value="動畫">動畫</option>
                        <option value="鬼畜">鬼畜</option>
                        <option value="番劇">番劇</option>
                        <option value="娛樂">娛樂</option>
                    </select>
                </li>
                <li><input type="text" class="form-control" id="q" name="q" placeholder="輸入..."></li>
                <li>
                    <button type="submit" class="btn btn-default" style="margin-top: 5px"><span
                            class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                </li>
            </form>

            <li id="myBody" style="float: right"><img id="myOnOff" onclick="mySwitch()"
                                                      src="{{ url_for( 'static',filename='img/on.jpg') }}" width="40px">
            </li>
            {% if username %}
                <li style="float:right"><a href="{{ url_for('logout') }}">註銷</a></li>
                <li style="float:right"><a
                        href="{{ url_for('usercenter',user_id=session.get('id'),tag=1) }}">{{ username }}</a></li>
            {% else %}
                <li style="float:right"><a href="{{ url_for('register') }}">註冊</a></li>
                <li style="float:right"><a href="{{ url_for('login') }}">登陸</a></li>
            {% endif %}

            <li style="float:right"><a href="{{ url_for('question') }}">站友互動</a></li>


        </nav>

    </div>
</div>
{% block main %}
{% endblock %}
<body id="myBody"
      style="background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514262796588&di=5e3f8a1d6575940b6f0b04820c595f82&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57a1488df006f.jpg')">

<div class="footer">
    <footer>
        <div class="col-xs-12 col-sm-8">
            <i>@版權全部：vvae 地址：XXXXXXXX 聯繫咱們：020-0000000 <br></i>
            <a href="{{ url_for('index') }}" title="index" target="_blank">index</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"
                                                                                                               arget="_blank">關於咱們</a>
        </div>
    </footer>
</div>
</body>
</html>

index.html

{% extends 'base.html' %}
{% block title %}
    嗶哩嗶哩
{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/index.css') }}">

{% endblock %}

{% block main %}
    <div class="col-sm-8" style="margin-left: 250px;margin-right: 250px;">
        <div class="index-normalNews-header-focus">
            <h4 class="normalNewstitle">
                <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
                <a href="{{ url_for('question') }}">站友互動</a>
            </h4>
        </div>
        <div class="form-group">
            <ul class="note-list" style="padding-left: 0px;">
                {% for foo in questions %}
                    <li class="list-group-item">
                        <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                        <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a>
                        <p><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>{{ foo.detail }}</p>
                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                        <a href="{{ url_for('usercenter',user_id=foo.author.id,tag=1) }}">{{ foo.author.username }}</a>
                        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                        <a href="{{ url_for('detail',question_id=foo.id) }}">評論:({{ foo.comments|length }})</a>
                        <span class="badge">{{ foo.time }}</span>

                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <br>


    {#動漫推薦#}
    <div class="col-sm-8" id="recommand" style=" margin-left: 250px;margin-right: 250px;clear: both">
        <div class="index-normalNews-header-focus">
            <h4 class="normalNewstitle">
                <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
                動漫推薦
            </h4>
        </div>

        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/hy.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">火影忍者</a></div>
        </div>
        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/qs.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">秦時明月</a></div>
        </div>
        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/ww.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">網球王子</a></div>
        </div>
        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/yh.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">銀魂</a></div>
        </div>
        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/ss.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">死神</a></div>
        </div>
    </div>

    {#    底部圖片導航#}
    <div class="col-sm-8" id="recommand" style="margin-top: 80px; margin-left: 250px;margin-right: 250px;clear: both">
        <div class="index-normalNews-header-focus">
            <h4 class="normalNewstitle">
                <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
                用戶導航
            </h4>
        </div>

        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/test1.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">動畫</a></div>
        </div>
        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/test2.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">番劇</a></div>
        </div>
        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/test3.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">鬼畜</a></div>
        </div>
        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/test4.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">娛樂</a></div>
        </div>
        <div class="img">
            <a href="{{ url_for('wait') }}"><img src="{{ url_for('static',filename='img/test5.jpg') }}"></a>
            <div class="dese"><a href="{{ url_for('wait') }}">關於咱們</a></div>
        </div>
    </div>



    <br>
{% endblock %}

login.html

{% extends 'base.html' %}
{% block title %}
    登陸
{% endblock  %}

{% block head %}

    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/10.31.css') }}">
    <script src="{{ url_for('static',filename='js/10.31.js') }}"></script>

{% endblock  %}

{% block main %}
<div class="box">
    <div id="title">bilibili</div>
    <h3>登陸</h3>
    <form action="{{ url_for('login') }}" method="post">
    <div class="input-box">
        帳號：<input id="uname" type="text" name="username" placeholder="請輸入用戶名">
    </div>
    <div class="input-box">
        密碼：<input id="upass" type="password" name="password" placeholder="請輸入密碼">
    </div>
    <div id="error-box"><br></div>
    <div class="input-box">
        <button type="submit" onclick="fnLogin()">登陸</button>
        <a href="{{ url_for('register') }}">註冊/Register</a>
    </div>
        </form>
</div>

{% endblock  %}

register.html

{% extends 'base.html' %}
{% block title %}
    Register
{% endblock  %}
{% block head %}

    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/10.31.css') }}">
    <script src="{{ url_for('static',filename='js/register.js') }}"></script>

{% endblock  %}

{% block main %}
<div class="box">
    <div id="title">bilibili</div>
    <h3>註冊</h3>
    <form action="{{ url_for('register') }}" method="post">
    <div class="input-box">
        帳號：<input id="uname" type="text"placeholder="請輸入用戶名" name="username" >
    </div>
    <div class="input-box">
        密碼：<input id="upass" type="password"   placeholder="請輸入密碼"name="password">
    </div>
    <div class="input-box">
        驗證：<input id="upass1" type="password" placeholder="請確認密碼" name="password1">
    </div>
    <div id="error-box"><br></div>
    <div class="input-box">
        <button onclick="fnRegister()">註冊/Register</button>
        <a href="{{ url_for('login') }}">已註冊/Login</a>
    </div>
    </form>
</div>

{% endblock  %}

question.html

{% extends 'base.html' %}
{% block title %}
   站友互動
{% endblock  %}
{% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/question.css') }}">
{% endblock  %}
{% block main %}
<div class="question-feedback">
<h2>
    <span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span>
    站友互動</h2>
<form action="{{ url_for('question') }}" method="post">
   <div class="question-control">
       <div class="form-group">
    <label for="name">分類列表</label>
    <select class="form-control" id="classify" name="classify">
      <option>動畫</option>
      <option>鬼畜</option>
      <option>番劇</option>
      <option>娛樂</option>
    </select>
       <div>
            <label for="question">標題</label>
            <br>
            <textarea class="form-control" id="question" placeholder="請輸入標題" name="title"></textarea>
        </div>
       <div>
            <label for="questionDetail">詳情</label>
            <br>
            <textarea class="form-control" id="questionDetail" placeholder="請輸入詳情" name="detail"></textarea>
       </div>
   </div>
    <div class="submit-button">
       <br>
       <button type="submit" class="btn btn-default" style="float:right" id="submit-button">發送</button>
    </div>
    </form>
</div>
{% endblock  %}

detail.html

{% extends 'base.html' %}
{% block title %}
    詳情
{% endblock  %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/detail.css') }}">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
{% endblock  %}

{% block main %}
    <div style="padding-left: 300px;padding-right: 300px">
<div class="page-header">

    <h3>{{ ques.title }}</h3>
    <small>{{ ques.author.username }} <span class="badge">{{ ques.time }}</span></small>
    </div>
    <p class="lead">{{ ques.detail }}</p>
    <hr>

<form action="{{ url_for('comment') }}" method="post" class="demo-form">
    <div class="form-group">
        <textarea name="new_comment" rows="3" class="form-control" id="new_comment" placeholder="請輸入"></textarea>
        <input name="question_id" type="hidden" value="{{ ques.id }}">
    </div>
<button type="submit"class="btn btn-default">發送</button>
 </form>
    <h4>評論:({{ ques.comments|length }})</h4>
        <hr>
    <ul class="note-list" style="padding-left: 0px;">
        {% for foo in comments %}
        <li class="list-group-item">
           <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
            <a href="{{  url_for('usercenter',user_id=foo.author.id,tag=1) }} ">{{ foo.author.username }}</a>
            <span class="badge" >{{ foo.time }}</span>
            <br>
            <p>{{ foo.detail }}</p>

        </li>
        {% endfor %}
    </ul>

</div>


{% endblock %}

user.html

{% extends 'base.html' %}
{% block title %}
    我的中心
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% endblock %}

{% block main %}
    <div style="padding-left: 300px;padding-right: 300px">
        <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user.username }} <br>
        </h3>
        <ul class="nav nav-tabs">
            <li class="active"><a href="{{ url_for('usercenter',user_id=user.id,tag=1) }}">所有問答</a></li>
            <li><a href="{{ url_for('usercenter',user_id=user.id,tag=2) }}">所有評論</a></li>
            <li><a href="{{ url_for('usercenter',user_id=user.id,tag=3) }}">我的資料</a></li>
            {#            <li class="active"><a href="#">所有問答</a></li>#}
            {#            <li><a href="#">所有評論</a></li>#}
            {#            <li><a href="#">我的資料</a></li>#}
        </ul>
    </div>
    {% block user %}{% endblock %}
{% endblock %}

usercenter1.html

{% extends 'user.html' %}

{% block user %}
    <div style="padding-left: 300px;padding-right: 300px">
        <caption class="table">所有問題</caption><br><br>
            <ul class="note-list" style="padding-left: 0px;">
                {% for foo in user.questions %}
                    <li class="list-group-item">
                        <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                        <a href="#">{{ foo.author.username }}</a>
                        <br>
                        <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a>
                        <span class="badge">{{ foo.time }}</span>
                        <p>{{ foo.detail }}</p>

                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock %}

usercenter2.html

{% extends 'user.html' %}

{% block user %}
    <div style="padding-left: 300px;padding-right: 300px">
           <caption class="table">所有評論</caption><br><br>
             <ul class="note-list" style="padding-left: 0px;">
                {% for foo in user.comments %}
                    <li class="list-group-item">
                        <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                        <a href="#">{{ foo.author.username }}</a>
                        <span class="badge">{{ foo.time }}</span>
                        <br>
                        <p>{{ foo.detail }}</p>

                    </li>
                {% endfor %}
            </ul>

        </div>
    </div>

{% endblock %}

usercenter3.html

{% extends 'user.html' %}

{% block user %}
    <div style="padding-left: 300px;padding-right: 300px">

        <table class="table">
            <caption>我的信息</caption>

            <tbody>

            <tr class="active">
                <td>用戶名</td>
                <td>{{ user.username }}</td>
            </tr>

                <tr class="warning">
                    <td>用戶頭像</td>
                    <td><img src="{{ url_for('static',filename='img/ss.jpg') }}" style="width: 40px;"></td>
                </tr>
                <tr class="danger">
                    <td>修改密碼</td>
                    <td><a href="{{ url_for('edit_password') }}">重置密碼</a></td>
                </tr>
                <tr class="success">
                    <td>提問次數</td>
                    <td>{{ user.questions|length }}</td>
                </tr>
                <tr class="warning">
                    <td>評論次數</td>
                     <td>{{user.comments|length }}</td>
                </tr>

                </tbody>
                </table>

    </div>


{% endblock %}

base.css

.navbar-top{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: gray;
    }
.navbar-top li{
    float: left;
    border-right:1px solid #bbb;
}
li:last-child {
    border-right: none;
}
.navbar-top li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #0099CC;
}
#q{
    margin-top: 10px;
    width: 200px;
    height: 23px;
    font-size: 15px;
    border-radius: 25px;
}
.navbar-down{
    overflow: hidden;
    background-color: gray;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#myOnOff{
    margin-top: 10%;
}
.footer{
    /*margin-top: 600px;*/
    clear: both;
    text-align: center;
    padding-left: 25%;

}
.head_img img{
    width: 1028px;
}

以上就我這個學期所學習的內容，這讓我感覺到了python的有趣之處，我會繼續努力，把python學習得更好。