Python+Flask+MysqL设计网页

Python+Flask+MysqL设计网页

本人这学期在学习Python Web框架Flask下网站开发，这篇文章主要介绍在Web框架Flask下的网站开发入门实例，本文主要设计网友交流互动平台，已经实现了注册、登录、首页、发布、详情、个人中心功能

一、Flask简介

Flask 是一个 Python 实现的 Web 开发微框架。官网：http://flask.pocoo.org/

Flask主要有静态文件(staitc)、网页文件(templstes)、主py文(newproject)件以及配置文件(config)这四大部分。

static主要存放提供给网页css样式、js样式、以及图片。

网页文件是将效果展示给用户的。

主py文件的作用是实现用户与数据库的交互，实现网页上的功能，下图1.1为本实例的结构：

 

二、各模块效果图及重要代码

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.1、图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=" 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学习得更好。