期末做品檢查

1. 期末做品檢查：基本要求
   1. 檢查時間：18最後四節課，上課以前必須所有完成，上課作基本部署就開始檢查
   2. 方式：逐個運行演示，抽查代碼
   3. 主題：選一個主題，整個網站風格統一，佈局合理，儘可能美觀。
      
      
2. 期末做品檢查：必須完成：
   1. 網站父模板統一佈局：頭部導航條、底部圖片導航、中間主顯示區域佈局
   2. 註冊、登陸、註銷
   3. 發佈、列表顯示
   4. 詳情頁
   5. 評論、列表顯示
   6. 我的中心
   7. 搜索，條件組合搜索
   8. 一篇完整的博客
      1. 我的學期總結
      2. 總結Python+Flask+MysqL的web建設技術過程，標準以下：
         1. 便是對本身所學知識的梳理
         2. 也可做爲初學入門者的簡單教程
         3. 也可做爲本身之後複習的嚮導
         4. 也是一種向外展現能力的途徑
            
            
3. 期末做品檢查：加分功能
   1. 文章分類、顯示
   2. 點贊、收藏
   3. 修改密碼、頭像、上傳頭像
   4. 個人
   5. 高級搜索

1. 我的學期總結

 通過一個學期的學習，在老師的教導之下，從一個連網頁製做都不會的菜鳥，變成會用Python+Flask+MysqL的web建設技術來製做網頁。

一開始是學習簡單輸入輸出交互，算並輸出兩個數字之和，輸入半徑，計算圓的面積。到畫圓，太陽花，同心圓畫五角星，字符串基礎操做，愷撒密碼的編碼，打出99乘法表，英文詞頻統計，用文件方式實現完整的英文詞頻統計，中文詞頻統計，datetime處理日期和時間，timestamp與timedelta,這些都是比較簡單的，比較容易上手，逐漸的，web的基礎，用html元素製做web網頁，導航，css基礎，圖片導航塊，到登陸，登陸和註冊頁面的前端驗證再到鏈接myssql數據庫，建立用戶模型，對數據庫進行增刪改查操做，完成註冊功能，登陸後更新導航，發佈功能，製做首頁的顯示列表，顯示所有問答，完成問答詳情頁的佈局，點擊問答標題時跳轉到相應的詳情頁，評論功能的實現，我的中心的顯示，我的中心標籤導航，搜索功能的實現，密碼的保護等等。在學習的過程當中發現了不少樂趣。

Python+Flask+MysqL的web建設技術過程：

首先是軟件安裝以及環境搭建，我使用的是pycharm這個軟件來進行代碼編寫，數據庫用的是Navicat for MySQL。還有裝的python3以及MySQL 5.7 CommandLine Client 。

主py文件：

from flask import Flask, render_template, request, redirect, url_for, session
from flask_sqlalchemy import SQLAlchemy
import config,os
from datetime import datetime
from functools import wraps
from sqlalchemy import or_,and_
from werkzeug.security import generate_password_hash,check_password_hash


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)
    nickname = db.Column(db.String(50), nullable=True)

    @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 Wenda(db.Model):
    __tablename__ = 'wenda'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    title = db.Column(db.String(100), nullable=False)
    detail = db.Column(db.Text, nullable=False)
    creat_time = db.Column(db.DateTime, default=datetime.now)
    author_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    author = db.relationship('User', backref=db.backref('wenda'))

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'))
    wenda_id = db.Column(db.Integer, db.ForeignKey('wenda.id'))
    creat_time = db.Column(db.DateTime, default=datetime.now)
    detail = db.Column(db.Text, nullable=False)
    wenda = db.relationship('Wenda', backref=db.backref('comment',order_by=creat_time.desc))
    author = db.relationship('User', backref=db.backref('comments'))



db.create_all()   #是否連接成功


# 數據添加
# user=User(username='ma',password='gg')
# db.session.add(user)
# db.session.commit()
#
#
# 數據更新
#
# user = User.query.filter(User.username=='hh').first()
# user.password='gg'
# db.session.commit()
#
#
# 數據查詢
# user = User.query.filter(User.username=='ma').first()
# print(user.username,user.password)
#
# 數據刪除
# user = User.query.filter(User.username=='ma').first()
# db.session.delete(user)
# db.session.commit()


# session會話鏈接
# filter()過濾器
# route制定路徑和函數之間的關係
# def定義一個變量



@app.route('/')
def moban():
    context = {
        'wenda': Wenda.query.order_by('-creat_time').all()
    }
    return render_template('moban.html',**context)


@app.route('/login/', methods=['GET', 'POST'])  # 跳轉登錄,methods定義它有兩種請求方式
def login():
    if request.method == 'GET':
        return render_template('login.html')
    else:
        username = request.form.get('user')
        password = request.form.get('psw')
        user = User.query.filter(User.username == username).first()  # 判斷用戶名是否存在
        if user:
           if user.check_password(password) :
               session['user']=username
               session['id']=user.id
               session.permanent = True
               return redirect(url_for('moban'))
           else:
               return '密碼錯誤'
        else:
            return '用戶名不存在'


@app.context_processor
def mycontext():
    username=session.get('user')
    if username:
        return {'username':username}
    else:
        return {}

def loginFirst(func): #參數是函數
    @wraps(func)
    def wrapper(*args, ** kwargs): #定義個函數將其返回
        if session.get('user'):
            return func(*args, ** kwargs)
        else:
            return redirect(url_for('login'))
    return wrapper #返回一個函數

@app.route('/register/', methods=['GET', 'POST'])  # 跳轉註冊,methods定義它有兩種請求方式
def register():
    if request.method == 'GET':
        return render_template('register.html')
    else:

        username = request.form.get('user')
        password = request.form.get('psw')
        nickname = request.form.get('nickname')
        user = User.query.filter(User.username == username).first()  # 判斷用戶名是否存在
        if user:
            return u'該用戶已存在'
        else:
            user = User(username=username, password=password, nickname=nickname)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('login'))

@app.route('/logout/')
def logout():
    session.clear()
    return render_template('moban.html')

@app.route('/wenda/',methods=['GET', 'POST'])  # 跳轉註冊,methods定義它有兩種請求方式
@loginFirst
def wenda():
    if request.method == 'GET':
        return render_template('wenda.html')
    else:
        title = request.form.get('title')
        detail = request.form.get('detail')
        author_id = User.query.filter(User.username == session.get('user')).first().id
        wenda = Wenda(title = title,detail =detail,author_id = author_id)
        db.session.add(wenda)
        db.session.commit()
        return redirect(url_for('moban'))

# @app.route('/comment/',methods=['GET', 'POST'])  # 跳轉註冊,methods定義它有兩種請求方式
# @loginFirst
# def comment():
#     if request.method == 'GET':
#         return render_template('comment.html')
#     else:
#         title = request.form.get('title')
#         detail = request.form.get('detail')
#         author_id = User.query.filter(User.username == session.get('user')).first().id
#         comment = Comment(title = title,detail =detail,author_id = author_id)
#         db.session.add(comment)
#         db.session.commit()
#         return redirect(url_for('detail'))

@app.route('/detail?<wenda_id>',methods=['GET','POST'])
def detail(wenda_id):
    wen = Wenda.query.filter(Wenda.id == wenda_id).first()
    comments=Comment.query.filter(Comment.wenda_id==wenda_id).all()
    return render_template('detail.html',wen=wen,comments=comments)

@app.route('/usercenter/<user_id>/<tag>',methods=['GET','POST'])
@loginFirst
def usercenter(user_id,tag):
    user = User.query.filter(User.id==user_id).first()
    context ={
        'user':user,
        'comments':user.comments,
        'wendas':user.wenda
    }
    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():
    cha=request.args.get('q')
    chaxun=Wenda.query.filter(
        or_(
            Wenda.title.contains(cha),
            Wenda.detail.contains(cha)
        )).order_by('-creat_time')
    return render_template('moban.html',wenda=chaxun)


@app.route('/comment/',methods=['GET','POST'])
@loginFirst
def comment():
    comment = request.form.get('new_comment')
    wenda_id= request.form.get('wenda_id')
    author_id = User.query.filter(User.username == session.get('user')).first().id
    comm=Comment(author_id = author_id,wenda_id= wenda_id,detail=comment)
    db.session.add(comm)
    db.session.commit()
    return redirect(url_for('detail', wenda_id= wenda_id))


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

manage.py文件:

from flask_script import Manager
from flask_migrate import Migrate,MigrateCommand
from untitled import app,db,User,Wenda,Comment

manager = Manager(app)
migrate = Migrate(app,db)#使用Migrate綁定aap和db
manager.add_command('db',MigrateCommand)

if __name__=='__main__':
    manager.run()

config.py文件：

debug = True
SQLALCHEMY_DATABASE_URI='mysql+pymysql://root:@localhost:3306/long?charset=utf8'
SQLALCHEMY_TRACK_MODIFICATIONS=False
import os
SECRET_KEY=os.urandom(24)

父模板html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        首頁
        {% block logintitle %}{% endblock %}
        {% block registertitle %}{% endblock %}
        {% block wendatitle %}{% endblock %}
    </title>
    {% block loginhead %}{% endblock %}
    {% block registerhead %}{% endblock %}
    {% block wendahead %}{% endblock %}
    <link rel="stylesheet" href="/static/css/meihua.css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="myBody" style="background-color: lightcyan">
<nav>
    <img src="{{ url_for('static',filename='image/gzsxy.png') }}" width="2200px">
    <br>
    <script>
        document.write(Date())
    </script>
    <br>
    <a href="{{ url_for('moban') }}" style="color: orange">首頁</a>
    {% if username %}
        <a href="{{ url_for('usercenter',user_id= session.get('id'),tag =1) }}" style="color: orange">{{ username }}</a>
        <a href="{{ url_for('logout') }}" style="color: orange">註銷</a>
    {% else %}
        <a href="{{ url_for('login') }}" style="color: orange">登陸</a>
        <a href="{{ url_for('register') }}" style="color: orange">註冊</a>
    {% endif %}
    <a href="{{ url_for('wenda') }}" style="color: orange">問答</a>
    <form action="{{ url_for('search') }}" method="get">
        <input name="q" type="text" placeholder="請輸入關鍵字">
        <button type="submit" style="color: orange">搜索</button>
    </form>
</nav>
<p style="color: gold">歡迎登錄{{ username }}</p>

<div class="list_container">
    <ul class="news-list">
        {% for foo in wenda %}
            <li class="list-group-item">
                <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                <a href="{{ url_for('usercenter',user_id=foo.author_id,tag=3) }}"
                   style="color: brown">{{ foo.author.username }}</a>
                <br>
                <a href="{{ url_for('detail',wenda_id= foo.id) }}" style="color: orange">{{ foo.title }}</a>
                <br>
                <span class="badge" style="color: mediumspringgreen">{{ foo.creat_time }}</span>
                <p style="color: magenta">{{ foo.detail }}</p>
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </li>
        {% endfor %}

    </ul>

</div>
{% block loginbody %}{% endblock %}
{% block registerbody %}{% endblock %}
{% block wendabody %}{% endblock %}
</body>
</html>
<style>
div
{
    border:5px solid #a1a1a1;
    padding:10px 10px;
    background:#dddddd;
    width:500px;
    border-radius:25px;
}
</style>

登陸頁面html：

{% extends 'moban.html' %}

{% block logintitle %}歡迎來到登陸界面，請登陸{% endblock %}
{% block loginhead %}
{% endblock %}
{% block loginbody %}
<form action="{{ url_for('login') }}" method="post">
<script type="text/javascript" src="../static/js/login.js"></script>
    <div id="header" style="background-color: pink"><h2 align="center">登錄界面</h2></div>
    <div id="content">
        <p align="center">用戶名：<input id="uname" type="text" name="user" placeholder="請輸入帳號">
        </p>
        <p align="center"> 密碼：<input id="upass" type="password" name="psw" placeholder="請輸入密碼"></p>
        <input type="radio" value="stu">學生
        <input type="radio" value="tea">老師
        <br>
        <input type="checkbox" value="true">記住密碼 <a href="">登錄遇到問題</a><br>
        <p align="center">
            <button type="submit" onclick="return fnLogin()">登陸</button>
        </p>
    </div>
    <div id="footer" style="background-color: pink"><h3 align="center">版權全部@</h3></div>
    {% endblock %}

註冊頁面html：

{% extends 'moban.html' %}
{% block registertitletitle %}歡迎來到註冊界面，請登陸{% endblock %}
{% block registerhead %}{% endblock %}
{% block registerbody %}


<form action="{{ url_for('register') }}" method="post">
<script type="text/javascript" src="../static/js/ma.js"></script>
    <div id="header" style="background-color: pink"><h2 align="center">註冊界面</h2></div>
    <div id="content">
            <p align="center">用戶名：<input id="uname" type="text" name="user" placeholder="請輸入帳號">
            </p>
            <p align="center"> 密碼：<input id="upass" type="password" name="psw" placeholder="請輸入密碼"></p>
             <p align="center">密碼：<input id="upass2" type="password" name="psw2" placeholder="請再次輸入密碼"></p>
            <input type="radio" value="stu">學生
            <input type="radio" value="tea">老師
            <br>
            <input type="checkbox" value="true">記住密碼 <a href="">登錄遇到問題</a><br>
         <p align="center"><button type="submit" onclick=" return fnLogin()">註冊</button></p>
</div>
           </form>
    <div id="footer" style="background-color: pink"><h3 align="center">版權全部@</h3></div>

{% endblock %}

登陸/註冊js：

function fnLogin() {
    var oUname = document.getElementById("uname")
    var oUpass = document.getElementById("upass")
     var oUpass2=document.getElementById("upass2");
    var oError = document.getElementById("error_box")

    oError.innerHTML="<br>"
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError.innerHTML = "請輸入用戶名6-20位字符"
       isErrer = false
        return isErrer;
    }else if ((oUname.value.charCodeAt(0)>=48)&&(oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML="用戶名首字母必須是字母"
         isErrer = false
        return isErrer;
    }else for(var i=0; i<oUname.value.length;i++){
        if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){
            oError.innerHTML="用戶名必須爲字母或數字";
            isErrer = false
            return isErrer;
        }

    }

 

發佈問答html：

{% extends 'moban.html' %}
{% block wendatitle %}問答界面{% endblock %}
{% block wendahead %}{% endblock %}

{% block wendabody %}
    <form action="{{ url_for('wenda') }}" method="post">
    <div class="from-group">
        <label for="gb" style="color: orange"> 標題 </label><br>
        <textarea class="from-control" cols="50" rows="1" id="gb" name="title"></textarea>
    </div>
    <div class="from-group">
        <label for="gb1" style="color: orange"> 詳情</label><br>
        <textarea class="from-control" cols="50" rows="8" id="gb1" name="detail"></textarea><br>
        <button type="submit" style="color: orange">發佈</button>
    </div>
    </form>
{% endblock %}

問答詳情html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>詳情頁</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <a href="{{ url_for('moban') }}" style="color: orange">返回首頁</a>
    <link rel="stylesheet" href="/static/css/meihua.css"/>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
    <h2 style="color: orange">{{ wen.title }}
        <small style="color: orange">{{ wen.author.username }}<span class="pull-center"><small style="color: orange"><br>{{ wen.creat_time }}</small></span>
        </small>
    </h2>
    <br>
    <p style="color: orange">{{ wen.detail }}</p>
    <form action="{{  url_for('comment')}}" method="post" style="margin: 20px;color: orange">
        <div class="form-group">
                    <textarea name="new_comment" class="form-control" rows="6" id="new_comment" placeholder="請輸入評論"></textarea>
            <input name="wenda_id" type="hidden" value="{{ wen.id }}">
        </div>
        <button type="submit" class="btn btn-default" style="color: orange">發送</button>
    </form>

</div>
<h4 style="color: orange">評論：({{ wen.comment|length}})</h4>

      <div class="list-group">
          {% for foo in comments %}
          <a href="" class="list-group-item active">做者：{{ foo.author.username }}</a>
          <div class="list-group-item ">
              <a href=""class="list-group-item-heading"></a>
              <p class="list-group-item-text">{{ foo.detail }}</p>
          </div>
          <div class="list-group-item">
              <span class="badge">發佈時間:{{ foo.creat_time }}</span>
          </div>
          {% endfor %}
      </div>


</body>
</html>

我的中心html：

<!doctype html>
<html lang="en">
<head>

    <style>
        .nav_ul li {
            float: left;
            list-style: none;
            margin: 10px;
            border-bottom: outset;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的中心</title>
    <link rel="stylesheet" href="/static/css/meihua.css"/>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="nav_ul">
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=1) }}" style="color: orange">所有問答</a></li>
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=2) }}" style="color: orange">所有評論</a></li>
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=3) }}" style="color: orange">我的資料</a></li>
     <li role="presentation"><a href="{{ url_for('moban') }}" style="color: orange">返回首頁</a></li>
</ul>
<br>
{#<h2 >所有提問</h2>#}
{#<div class="col-md-6 column ">#}
{#    <div class="page-header"> {% for foo in wenda %}#}
{#        <div class="panel panel-default">#}
{#            <div class="panel-heading">#}
{#                <br>#}
{#                <h3 class="panel-title">#}
{#                    <a href="{{ url_for('detail',wenda_id=foo.id) }}">標題:{{ foo.title }}</a><br>#}
{#                </h3>#}
{#                <a href="{{ url_for('usercenter',user_id=foo.author_id) }}">做者：{{ foo.author.username }}</a>#}
{#            </div>#}
{##}
{#            <div class="panel-body">#}
{#                <a href="#">內容:{{ foo.detail }}</a><br>#}
{#            </div>#}
{#            <div class="panel-footer">#}
{#                <span class="badge" style="margin-left: 60%">{{ foo.creat_time }}發佈時間</span>#}
{#            </div>#}
{#        </div>#}
{#    {% endfor %}#}
{#    </div>#}
{#</div>#}
{#<h2>所有評論</h2>#}
{#<div class="col-md-6 column ">#}
{#    <div class="page-header">{% for foo in comments %}#}
{#        <li class="list-group-item">#}
{#            <a href="{{ url_for('usercenter',user_id=foo.author_id) }}">{{ foo.author.username }}</a>#}
{#            <span class="badge pull-right">{{ foo.create_time }}</span>#}
{#            <p>{{ foo.detail }}</p>#}
{#            <br>#}
{#        </li>#}
{#        </div>#}
{#    {% endfor %}#}
{#</div>#}
</body>
</html>

<!doctype html>
<html lang="en">
<head>

    <style>
        .nav_ul li {
            float: left;
            list-style: none;
            margin: 10px;
            border-bottom: outset;
        }
    </style>
        <style>
div
{
    border:5px solid #a1a1a1;
    padding:10px 10px;
    background:#dddddd;
    width:500px;
    border-radius:25px;
}
</style>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的中心</title>
    <link rel="stylesheet" href="/static/css/meihua.css"/>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="nav_ul">
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=1) }}" style="color: orange">所有問答</a></li>
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=2) }}" style="color: orange">所有評論</a></li>
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=3) }}" style="color: orange">我的資料</a></li>
     <li role="presentation"><a href="{{ url_for('moban') }}" style="color: orange">返回首頁</a></li>
</ul>
 <div class="group" style="clear:both">
        <ul class="list-group">
            {% for foo in wendas %}
                <li class="list-group-item">
                    <a href="#" style="color: brown">{{ foo.author.username }}</a>
                    <a href="#" style="color: orange">{{ foo.author.title }}</a>
                    <span class="badge"style="color: mediumspringgreen">{{ foo.creat_time }}</span>
                    <p class="abstract" style="color: magenta">{{ foo.detail }}</p>
                </li>
            {% endfor %}
        </ul>
 </div>

</body>
</html>

<!doctype html>
<html lang="en">
<head>

    <style>
        .nav_ul li {
            float: left;
            list-style: none;
            margin: 10px;
            border-bottom: outset;
        }
    </style>
    <style>
div
{
    border:5px solid #a1a1a1;
    padding:10px 10px;
    background:#dddddd;
    width:500px;
    border-radius:25px;
}
</style>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的中心</title>
    <link rel="stylesheet" href="/static/css/meihua.css"/>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<ul class="nav_ul">
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=1) }}" style="color: orange">所有問答</a></li>
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=2) }}" style="color: orange">所有評論</a></li>
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=3) }}" style="color: orange">我的資料</a></li>
     <li role="presentation"><a href="{{ url_for('moban') }}" style="color: orange">返回首頁</a></li>
</ul>
  <div class="page-header" style="clear:both">
{#  <div id="content" style="height:800px;width:1500px;float:left;clear: both;text-align:center;">#}

        <ul class="list-group"style="margin:10px">
            {% for foo in comments %}
                <li class="list-group-item">
                    <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                    <a href="#" style="color: brown">{{ foo.author.username }}</a>
                    <span class="badge"style="color: mediumspringgreen">{{ foo.creat_time }}</span>
                    <p style="align-content: center;color: pink">{{ foo.detail }}</p>
                </li>
            {% endfor %}
        </ul>
</div>
{#    </div>#}
</body>
</html>

<!doctype html>
<html lang="en">
<head>

    <style>
        .nav_ul li {
            float: left;
            list-style: none;
            margin: 10px;
            border-bottom: outset;
        }
    </style>
    <style>
div
{
    border:5px solid #a1a1a1;
    padding:10px 10px;
    background:#dddddd;
    width:500px;
    border-radius:25px;
}
</style>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的中心</title>
    <link rel="stylesheet" href="/static/css/meihua.css"/>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="nav_ul">
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=1) }}" style="color: orange">所有問答</a></li>
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=2) }}" style="color: orange">所有評論</a></li>
     <li role="presentation"><a href="{{ url_for('usercenter',user_id= user.id,tag=3) }}" style="color: orange">我的資料</a></li>
     <li role="presentation"><a href="{{ url_for('moban') }}" style="color: orange">返回首頁</a></li>
</ul>
  <div class="page-header" style="clear:both"><br>
{#        <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user }}<br><small>我的信息<span class="badge>"></span> </small> </h3>#}
        <ul class="list-group">
            <li class="list-group-item" style="color: brown">用戶：{{ username }}</li>
            <li class="list-group-item" style="color: brown">編號：</li>
            <li class="list-group-item" style="color: brown">暱稱：</li>
        </ul>
    </div>
</body>
</html>