Flask开发实现在线问答系统的问题发布功能

淡淡的烟草味﹌ 2022-10-10 04:42 196阅读 0赞

# 前言 #

--------------------

#  问题发布功能开发 #

import hashlib
    
    from flask import request
    from flask_login import login_user
    from flask_wtf import FlaskForm
    from wtforms import StringField, PasswordField, ValidationError
    from wtforms.validators import DataRequired, Length, EqualTo
    
    from models import User, db, UserProfile, UserLoginHistory
    from utils import constants
    from utils.validators import phone_required
    
    
    class RegisterForm(FlaskForm):
        """ 用户注册 """
        username = StringField(label='用户名', render_kw={ 
            'class': 'form-control input-lg',
            'placeholder': '请输入用户名'
        }, validators=[DataRequired('请输入用户名'), phone_required])
        nickname = StringField(label='用户昵称', render_kw={ 
            'class': 'form-control input-lg',
            'placeholder': '请输入用户昵称'
        }, validators=[DataRequired('请输入用户昵称'),
                       Length(min=2, max=20, message='昵称长度在2-20之间')])
        password = PasswordField(label='密码', render_kw={ 
            'class': 'form-control input-lg',
            'placeholder': '请输入密码'
        }, validators=[DataRequired('请输入密码')])
        confirm_password = PasswordField(label='确认密码', render_kw={ 
            'class': 'form-control input-lg',
            'placeholder': '请输入确认密码'
        }, validators=[DataRequired('请输入确认密码'),
                       EqualTo('password', message='两次密码输入不一致')])
    
        def validate_username(self, field):
            """ 检测用户名是否已经存在 """
            user = User.query.filter_by(username=field.data).first()
            if user:
                raise ValidationError('该用户名已经存在')
            return field
    
        def register(self):
            """ 自定义的用户注册函数 """
            # 1. 获取表单信息
            username = self.username.data
            password = self.password.data
            nickname = self.nickname.data
            # 2. 添加到db.session
            try:
                # 将密码加密存储
                password = hashlib.sha256(password.encode()).hexdigest()
                user_obj = User(username=username, password=password, nickname=nickname)
                db.session.add(user_obj)
                profile = UserProfile(username=username, user=user_obj)
                db.session.add(profile)
                db.session.commit()
                return user_obj
            except Exception as e:
                print(e)
            return None
    
    
    class LoginForm(FlaskForm):
        """ 用户登录 """
        username = StringField(label='用户名', render_kw={ 
            'class': 'form-control input-lg',
            'placeholder': '请输入用户名'
        }, validators=[DataRequired('请输入用户名'), phone_required])
        password = PasswordField(label='密码', render_kw={ 
            'class': 'form-control input-lg',
            'placeholder': '请输入密码'
        }, validators=[DataRequired('请输入密码')])
    
        def validate(self):
            result = super().validate()
            username = self.username.data
            password = self.password.data
            if result:
                # TODO 验证加密后的密码是否正确
                user = User.query.filter_by(username=username, password=password).first()
                if user is None:
                    result = False
                    self.username.errors = ['用户名或者是密码错误']
                elif user.status == constants.UserStatus.USER_IN_ACTIVE.value:
                    result = False
                    self.username.errors = ['用户已被禁用']
            return result
    
        def do_login(self):
            """ 执行登录逻辑代码 """
            username = self.username.data
            password = self.password.data
            try:
                # 1. 查找对应的用户
                # TODO 验证加密后的密码是否正确
                user = User.query.filter_by(username=username, password=password).first()
                # 2. 登录用户
                # session['user_id'] = user.id
                login_user(user)
                # 3. 记录日志
                ip = request.remote_addr
                ua = request.headers.get('user-agent', None)
                obj = UserLoginHistory(username=username, ip=ip, ua=ua, user=user)
                db.session.add(obj)
                db.session.commit()
                return user
            except Exception as e:
                print(e)
            return None

{ % extends 'base.html' %}
    { % from 'macro/form_errors.html' import form_field_errors %}
    { % block title %}{ {  super() }}-登录{ % endblock %}
    { % block header %}
      <link rel="stylesheet" href="./assets/style/login.css">
      <link rel="stylesheet" href="//at.alicdn.com/t/font_1658093_nokjvsp8hws.css">
    { % endblock %}
    { % block layout %}
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            { # 展示flash消息 #}
            { % include 'components/flash_messages.html' %}
            
            <div class="login-header">
              <h2 class="title text-center">在线问答系统登录</h2>
              <div class="slogan text-center">有问题 上问答</div>
            </div>
            
            
            <form class="login-form box-wrap" method="POST"
                  action="{ { url_for('accounts.login') }}">
              <input type="hidden" name="next" value="{ { next_url|d('') }}">
              { {  form.csrf_token }}
              <div class="form-group">
                <label for="id-user-name">用户名</label>
                { {  form.username }}
              </div>
              { {  form_field_errors(form.username.errors) }}
              <div class="form-group">
                <label for="id-password">密码</label>
                { {  form.password }}
              </div>
              { {  form_field_errors(form.password.errors) }}
              <div class="form-group">
                <button type="submit" class="btn btn-info btn-block btn-lg">登录</button>
              </div>
              <p class="desc">未注册手机验证后自动登录<br />
                注册即代表同意《用户使用协议》《隐私保护指引》</p>
              <p class="text-right">没有账号，<a href="register.html">点击注册</a></p>
            </form>
            
            
            <div class="login-social box-wrap">
              <span>社交账号登录</span>
              <div class="right">
                <span><i class="iconfont icon-wechat"></i>微信</span>
                <span><i class="iconfont icon-qq"></i>QQ</span>
                <span><i class="iconfont icon-weibo"></i>微博</span>
              </div>
            </div>
            
            
            <div class="login-footer">
              <a href="">关于我们</a>
              <a href="">联系我们</a>
              <a href="">注册机构</a>
              <a href="">专栏</a>
              <br>
              <a href="">京ICP 备1000000012号</a>
            </div>
          </div>
        </div>
      </div>
    { % endblock %}

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <title>在线问答系统-个人中心</title>
    
      
      <link href="./assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
      
      
      
    
      <link rel="stylesheet" href="./assets/style/common.css">
      <link rel="stylesheet" href="./assets/style/mine.css">
    </head>
    
    <body class="layout">
      
      <div class="layout-header">
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#id-index-banner"
                aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="./index.html">在线问答系统</a>
            </div>
    
            
            <div class="collapse navbar-collapse" id="id-index-banner">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">话题</a></li>
              </ul>
              <form class="navbar-form navbar-left">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="搜索话题">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">提问</a></li>
                <li><a href="#">消息<span class="badge">4</span></a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                    aria-expanded="false">个人中心 <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">我的主页</a></li>
                    <li><a href="#">设置</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">退出</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
      
      
      <div class="layout-personal">
        <div class="container">
          <div class="main-top">
            <img src="./assets/home/qa/personal_top.jpg" alt="">
          </div>
          <div class="main-bottom">
            <div class="content-left">
              <img src="./assets/home/qa/personal_avatar.jpg" alt="">
            </div>
            <div class="content-right">
              <h3>NavCat</h3>
              <div class="desc">
                创业是一次孤独的旅行
              </div>
              <div class="info-row">
                <i class="glyphicon glyphicon-folder-close"></i> <span>计算软件</span>
              </div>
              <div class="info-row">
                <i class="glyphicon glyphicon-certificate"></i> <span>男</span>
              </div>
              <button class="btn btn-default btn-gray" type="button">编辑个人资料</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="container layout-main">
        <div class="row">
          <div class="col-md-9">
            
            <div class="main-left">
              <ul class="nav nav-tabs">
                <li role="presentation"><a href="#">动态</a></li>
                <li role="presentation"><a href="#">回答</a></li>
                <li role="presentation" ><a href="#">收藏</a></li>
                <li role="presentation" class="active"><a href="#">关注</a></li>
                <li role="presentation"><a href="#">文章</a></li>
              </ul>
              <div class="title">我关注的问题</div>
              
              <ul class="flllow-qa-ls">
                <li>
                  <a href="../../qa/templates/detail.html">疫情结束后会爆发消费狂潮吗？</a>
                  <div class="stats">2020-3-1 · 15个回答 ·  20个关注</div>
                </li>
                <li>
                  <a href="../../qa/templates/detail.html">钟南山说「我们也做了疫情预测模型，投稿到国外权威期刊被退了回来」，你怎么看？</a>
                  <div class="stats">2020-3-1 · 15个回答 ·  20个关注</div>
                </li>
                <li>
                  <a href="../../qa/templates/detail.html">疫情结束后会爆发消费狂潮吗？</a>
                  <div class="stats">2020-3-1 · 15个回答 ·  20个关注</div>
                </li>
                <li>
                  <a href="../../qa/templates/detail.html">钟南山说「我们也做了疫情预测模型，投稿到国外权威期刊被退了回来」，你怎么看？</a>
                  <div class="stats">2020-3-1 · 15个回答 ·  20个关注</div>
                </li>
                <li>
                  <a href="../../qa/templates/detail.html">疫情结束后会爆发消费狂潮吗？</a>
                  <div class="stats">2020-3-1 · 15个回答 ·  20个关注</div>
                </li>
                <li>
                  <a href="../../qa/templates/detail.html">钟南山说「我们也做了疫情预测模型，投稿到国外权威期刊被退了回来」，你怎么看？</a>
                  <div class="stats">2020-3-1 · 15个回答 ·  20个关注</div>
                </li>
              </ul>
              
              <nav aria-label="Page navigation">
                <ul class="pagination">
                  <li>
                    <a href="#" aria-label="上一页">
                      <span aria-hidden="true">«</span>
                    </a>
                  </li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li>
                    <a href="#" aria-label="下一页">
                      <span aria-hidden="true">»</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
            
          </div>
          <div class="col-md-3">
            
            <div class="main-right">
              
              <div class="follow-stats box-wrap">
                <div>
                  <span>关注了</span>
                  <strong>12</strong>
                </div>
                <div>
                  <span>关注者</span>
                  <strong>12</strong>
                </div>
              </div>
              
              
              <div class="right-footer">
                <a href="#">用户指南</a><span class="dot">·</span>
                <a href="#">用户使用协议</a><span class="dot">·</span>
                <a href="#">用户隐私权政策</a>
                <br/>
                <a href="#">侵权举报</a><span class="dot">·</span>
                <a href="#">网上有害信息举报专区</a>
                <br/>
                <a href="#">京ICP证 第10001000号</a>
                <br/>
                <a href="#">京ICP备 第10001000号</a>
                <br/>
                <a href="#">联系我们 © 2020在线问答</a>
              </div>
            
            </div>
            
          </div>
        </div>
      </div>
    
      
      <script src="./assets/plugins/jquery-3.4.1.min.js"></script>
      
      <script src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    </body>
    
    </html>

{ % extends 'base.html' %}
    { % from 'macro/form_errors.html' import form_field_errors %}
    { % block title %}{ {  super() }}-注册{ % endblock %}
    { % block header %}
      <link rel="stylesheet" href="./assets/style/login.css">
      <link rel="stylesheet" href="//at.alicdn.com/t/font_1658093_nokjvsp8hws.css">
    { % endblock %}
    { % block layout %}
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            { # 展示flash消息 #}
            { % include 'components/flash_messages.html' %}
            <div class="login-header">
              <h2 class="title text-center">在线问答系统-注册</h2>
              <div class="slogan text-center">有问题 上问答</div>
            </div>
            
            <form class="login-form box-wrap" method="POST"
                  action="{ { url_for('accounts.register') }}">
              { {  form.csrf_token }}
              <div class="form-group">
                <label for="id-user-name">用户名</label>
                { {  form.username }}
              </div>
              { {  form_field_errors(form.username.errors) }}
              <div class="form-group">
                <label for="id-nick-name">昵称</label>
                { {  form.nickname }}
              </div>
              { {  form_field_errors(form.nickname.errors) }}
              <div class="form-group">
                <label for="id-password">密码</label>
                { {  form.password }}
              </div>
              { {  form_field_errors(form.password.errors) }}
              <div class="form-group">
                <label for="id-confirm-password">确认密码</label>
                { {  form.confirm_password }}
              </div>
              { {  form_field_errors(form.confirm_password.errors) }}
              <div class="form-group">
                <button type="submit" class="btn btn-info btn-block btn-lg">注册</button>
              </div>
              <p class="desc">未注册手机验证后自动登录<br/>
                注册即代表同意《用户使用协议》《隐私保护指引》</p>
              <p class="text-right">已有账号，<a href="{ { url_for('accounts.login') }}">点击登录</a></p>
            </form>
            
            
            <div class="login-social box-wrap">
              <span>社交账号登录</span>
              <div class="right">
                <span><i class="iconfont icon-wechat"></i>微信</span>
                <span><i class="iconfont icon-qq"></i>QQ</span>
                <span><i class="iconfont icon-weibo"></i>微博</span>
              </div>
            </div>
            
            
            <div class="login-footer">
              <a href="">关于我们</a>
              <a href="">联系我们</a>
              <a href="">注册机构</a>
              <a href="">专栏</a>
              <br>
              <a href="">京ICP 备1000000012号</a>
            </div>
          </div>
        </div>
      </div>
    { % endblock %}

import hashlib
    
    from flask import Blueprint, render_template, flash, redirect, url_for, session, request
    from flask_login import login_user, logout_user
    
    from accounts.forms import RegisterForm, LoginForm
    from models import User, db, UserProfile, UserLoginHistory
    
    accounts = Blueprint('accounts', __name__,
                         template_folder='templates',
                         static_folder='../assets')
    
    
    @accounts.route('/login', methods=['GET', 'POST'])
    def login():
        """ 登录页面 """
        form = LoginForm()
        next_url = request.values.get('next', url_for('qa.index'))
        if form.validate_on_submit():
            user = form.do_login()
            if user:
                # 4. 跳转到首页
                flash('{}, 欢迎回来'.format(user.nickname), 'success')
                return redirect(next_url)
            else:
                flash('登录失败，请稍后重试', 'danger')
        # else:
        # print(form.errors)
        return render_template('login.html', form=form, next_url=next_url)
    
    
    @accounts.route('/logout')
    def logout():
        """ 退出登录 """
        # 自定义登录的逻辑代码
        # session['user_id'] = ''
        # g.current_user = None
        logout_user()
        flash('欢迎下次再来', 'success')
        return redirect(url_for('accounts.login'))
    
    
    @accounts.route('/register', methods=['GET', 'POST'])
    def register():
        """ 注册 """
        form = RegisterForm()
        if form.validate_on_submit():
            user_obj = form.register()
            if user_obj:
                # 跳转到登录的页面
                flash('注册成功，请登录', 'success')
                return redirect(url_for('accounts.login'))
            else:
                flash('注册失败，请稍后再试', 'danger')
        return render_template('register.html', form=form)
    
    
    @accounts.route('/mine')
    def mine():
        """ 个人中心 """
        return render_template('mine.html')

{ % extends 'base_layout.html' %}
    { % block title %}{ {  super() }} - 文章详情{ % endblock %}
    { % block header %}
      <link rel="stylesheet" href="/assets/style/detail.css">
      { % endblock %}
    { % block content %}
      
      <div class="layout-question">
        <div class="container">
          <div class="row">
            <div class="col-md-9">
              
              <ul class="que-tag-ls">
                <li><a href="#">心理学</a></li>
                <li><a href="#">经济学</a></li>
                <li><a href="#">大数据</a></li>
                <li><a href="#">大数据分析</a></li>
                <li><a href="#">新型冠状病毒</a></li>
              </ul>
              
              <h3>{ {  question.title }}</h3>
              <div class="show-desc hidden">
                { {  question.desc|d('暂无', True) }}…
                <span class="btn-show-more">显示全部<i class="glyphicon glyphicon-menu-down"></i></span>
              </div>
              <div class="show-all ">
                { % autoescape false %}
                { {  question.content|safe }}
                { % endautoescape %}
                <span class="btn-show-less">收起<i class="glyphicon glyphicon-menu-up"></i></span>
              </div>
              
              <div class="qa-footer">
                <div>
                  <button type="button" class="btn btn-info btn-sm">关  注</button>
                </div>
                <div>
                  <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#addComment">写回答</button>
                </div>
                <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> { {  question.comment_count }}条评论</div>
                <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                <div class="txt-menu"></div>
                <div class="txt-menu btn-group">
                  <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false"></i>
                  <ul class="dropdown-menu">
                    <li><a href="#">不感兴趣</a></li>
                  </ul>
                </div>
              </div>
              
            </div>
            <div class="col-md-3">
              <div class="que-stats-box">
                
                <div>
                  <span>关注者</span>
                  <strong>{ {  question.follow_count|number_split }}</strong>
                </div>
                
                
                <div>
                  <span>被浏览</span>
                  <strong>{ {  question.view_count|number_split }}</strong>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
      
    
      <div class="layout-answer">
        <div class="container">
          <div class="row">
            <div class="col-md-9 left-content">
              { % block link_more %}
              <a class="link-more" href="#">查看全部 { {  question.answer_count|number_split }} 个回答</a>
              { % endblock %}
              
              { % if answer %}
              <div class="answer-content box-wrap">
                <div class="user-info">
                  <div class="avater">
                    { % if answer.user.avatar %}
                      <img src="{ { answer.user.avatar }}" alt="用户头像">
                    { % else %}
                      <img src="/assets/home/qa/user_head.jpg" alt="用户头像">
                    { % endif %}
                  </div>
                  <div class="desc">
                    <h4>{ {  answer.user.nickname }}</h4>
                    <p>{ {  answer.user.profile.maxim }}</p>
                  </div>
                </div>
                <div class="answer-stats">5,550 人赞同了该回答</div>
                <div class="answer-txt">
                  { % autoescape false %}
                  { {  answer.content|safe }}
                  { % endautoescape %}
                </div>
                <div class="answer-time">发布于{ {  answer.created_at }}</div>
                
                <div class="qa-footer">
                  <div><button type="button" class="btn btn-info btn-sm">
                      <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 { {  answer.love_count }}</button>
                    <button type="button" class="btn btn-info btn-sm"><i
                        class="glyphicon glyphicon-thumbs-down"></i></button>
                  </div>
                  <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                  <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                  <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                  <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                  <div class="txt-menu"></div>
                  <div class="txt-menu btn-group">
                    <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                      aria-haspopup="true" aria-expanded="false"></i>
                    <ul class="dropdown-menu">
                      <li><a href="#">不感兴趣</a></li>
                    </ul>
                  </div>
                </div>
                
                
                <div class="comment-box box-wrap">
                  
                  <div class="comment-stats">
                    <div class="title">8条评论</div>
                    <div class="menu"><i class="glyphicon glyphicon-random"></i>切换为时间顺序</div>
                  </div>
                  
                  
                  <div class="comment-ls">
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item reply">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                  </div>
                  
                  
                  <form class="form-horizontal comment-publish">
                    <input type="text" class="form-control" placeholder="写下你的评论...">
                    <button type="button" class="btn btn-default btn-grey">发布</button>
                  </form>
                  
                </div>
                
              </div>
              { % else %}
                <div class="answer-content box-wrap">
                暂无人回答该问题
                </div>
              { % endif %}
              
              { {  self.link_more() }}
            </div>
            <div class="col-md-3 right-content">
              
              <div class="about-user box-wrap">
                <div class="user-info">
                  <div class="avater">
                    <img src="./assets/home/qa/user_head.jpg" alt="用户头像">
                  </div>
                  <div class="desc">
                    <h4>舒大克</h4>
                    <p>《互联网营销人实战手记》新书上市； 公众号：舒大克。</p>
                  </div>
                </div>
                
                <div class="qa-stats">
                  <div>
                    <span>回答</span>
                    <strong>309</strong>
                  </div>
                  <div>
                    <span>文章</span>
                    <strong>40</strong>
                  </div>
                  <div>
                    <span>关注者</span>
                    <strong>85,265</strong>
                  </div>
                </div>
                
                <div class="menu-ls">
                  <div>
                    <a href="#" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-plus"></i>关注他</a>
                  </div>
                  <div>
                    <a href="#" class="btn btn-default btn-sm btn-grey"><i class="glyphicon glyphicon-comment"></i>发私信</a>
                  </div>
                </div>
              </div>
              
              
              <div class="rel-ques box-wrap">
                <div class="title">相关问题</div>
                <div class="rel-que-ls">
                  <div>
                    <a href="#">疫情过后，你会报复性消费吗？</a><span>30 个回答</span>
                  </div>
                  <div>
                    <a href="#">疫情过后你最想去哪？和谁一起？</a><span>19 个回答</span>
                  </div>
                  <div>
                    <a href="#">如果能熬过这波疫情，你最想做的事情是什么？</a><span>21 个回答</span>
                  </div>
                  <div>
                    <a href="#">请问这次疫情可能有积极影响吗？</a><span>9 个回答</span>
                  </div>
                  <div>
                    <a href="#">如果疫情结束了你最想做什么？</a><span>3 个回答</span>
                  </div>
                </div>
              </div>
              
              
              <div class="right-footer">
                <a href="#">用户指南</a><span class="dot">·</span>
                <a href="#">用户使用协议</a><span class="dot">·</span>
                <a href="#">用户隐私权政策</a>
                <br />
                <a href="#">侵权举报</a><span class="dot">·</span>
                <a href="#">网上有害信息举报专区</a>
                <br />
                <a href="#">京ICP证 第10001000号</a>
                <br />
                <a href="#">京ICP备 第10001000号</a>
                <br />
                <a href="#">联系我们 © 2020在线问答</a>
              </div>
              
            </div>
          </div>
        </div>
      </div>
      <div class="layout-footer">
        <a href="#" data-toggle="tooltip" title="意见反馈"><i class="glyphicon glyphicon-briefcase"></i></a>
        <a href="#" data-toggle="tooltip" title="回到顶部"><i class="glyphicon glyphicon-arrow-up"></i></a>
      </div>
      
      <div class="modal fade" id="addComment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <form class="form-horizontal modal-dialog" role="document" method="post" action="../../templates">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title" id="myModalLabel">写回答</h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <textarea class="form-control" rows="10" placeholder="请输入正文"></textarea>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="submit" class="btn btn-primary">提交</button>
            </div>
          </div>
        </form>
      </div>
      
    { % endblock %}
    { % block js_inline %}
          // 点击，查看更多，把详细的那个p标签展示出来，把自己隐藏
          $('.show-desc').click(function () { 
            $(this).addClass('hidden');
            $(this).next().removeClass('hidden')
          })
          $('.show-all').click(function () { 
            $(this).addClass('hidden');
            $(this).prev().removeClass('hidden')
          })
    { % endblock %}

{ % extends 'base_layout.html' %}
    { % block title %}{ {  super() }} - 首页{ % endblock %}
    { % block header %}
      <link rel="stylesheet" href="./assets/style/index.css">
      { % endblock %}
    { % block content %}
      <div class="layout-main">
        <div class="container">
          <div class="row">
            <div class="col-md-9">
              { # 展示flash消息 #}
             { % include 'components/flash_messages.html' %}
              { # <div>{ {  g.current_user.nickname }}</div> #}
              { % if current_user.is_authenticated %}
                <div>{ {  current_user.nickname }}</div>
              { % endif %}
              
              <div id="id-index-banner" class="carousel slide" data-ride="carousel">
                
                <div class="carousel-inner" role="listbox">
                  <div class="item active">
                    <img class="img-responsive" src="./assets/home/banner/banner1.jpg" alt="banner图">
                  </div>
                  <div class="item">
                    <img class="img-responsive" src="./assets/home/banner/banner1.jpg" alt="banner图">
                  </div>
                </div>
    
                
                <a class="left carousel-control" href="#id-index-banner" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#id-index-banner" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
              
              
              <div class="cls-menu-ls">
                <a href="#" class="active">推荐</a>
                <a href="#">关注</a>
                <a href="#">热榜</a>
              </div>
              
              
              <div class="qa-ls">
                <div class="qa-item">
                  <a href="detail.html" class="title">钟南山团队从尿液中分离出新冠病毒，这对疫情防治有什么影响？</a>
                  <div class="desc">
                    <div class="left">
                      <img src="./assets/home/qa/left.jpg" alt="" srcset="">
                    </div>
                    <div class="right">
                      <p class="show-desc">Vigorous Cooler： 尿液出现病毒并不罕见，但第一步是病毒要进入循环系统（血液、淋巴）。
                        比如寨卡病毒通过蚊子吸血进入循环系统，再进入泌尿系统。对于新型冠状病毒来说，第一步是通过呼吸系统进入下...
                        <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>
                      </p>
                      <p class="show-all hidden">
                        27日，广州市政府新闻办在广州医科大学举办疫情防控专场新闻通气会，国家卫健委高级别专家组组长、国家呼吸系统疾病临床医学研究中心主任钟南山谈到疫情的预测时表示，疫情开始时，国外有流行病学家用权威的试验模型，预测2月初，中国感染新冠肺炎人数将达16万人。钟南山说：“这是没有考虑到国家的强力干预，也没有考虑春节后的延迟复工，我们也做了预测模型，2月中旬或下旬达到疫情高峰，确诊病例约六、七万人，投到国外权威期刊，被退了回来，感觉和上面的预测水平差太多，还有人给我微信‘你的话几天之内就会被碾个粉碎’。但事实上，我们预测更接近权威。”
                        <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>
                      </p>
                    </div>
                  </div>
                  <div class="qa-footer">
                    <div><button type="button" class="btn btn-info btn-sm">
                        <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 1780</button>
                      <button type="button" class="btn btn-info btn-sm"><i
                          class="glyphicon glyphicon-thumbs-down"></i></button>
                    </div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                    <div class="txt-menu btn-group">
                      <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"></i>
                      <ul class="dropdown-menu">
                        <li><a href="#">不感兴趣</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="qa-item">
                  <a href="detail.html" class="title">钟南山团队从尿液中分离出新冠病毒，这对疫情防治有什么影响？</a>
                  <div class="desc">
                    <div class="right">
                      <p class="show-desc">Vigorous Cooler： 尿液出现病毒并不罕见，但第一步是病毒要进入循环系统（血液、淋巴）。
                        比如寨卡病毒通过蚊子吸血进入循环系统，再进入泌尿系统。对于新型冠状病毒来说，第一步是通过呼吸系统进入下...
                        <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>
                      </p>
                      <p class="show-all hidden">
                        27日，广州市政府新闻办在广州医科大学举办疫情防控专场新闻通气会，国家卫健委高级别专家组组长、国家呼吸系统疾病临床医学研究中心主任钟南山谈到疫情的预测时表示，疫情开始时，国外有流行病学家用权威的试验模型，预测2月初，中国感染新冠肺炎人数将达16万人。钟南山说：“这是没有考虑到国家的强力干预，也没有考虑春节后的延迟复工，我们也做了预测模型，2月中旬或下旬达到疫情高峰，确诊病例约六、七万人，投到国外权威期刊，被退了回来，感觉和上面的预测水平差太多，还有人给我微信‘你的话几天之内就会被碾个粉碎’。但事实上，我们预测更接近权威。”
                        <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>
                      </p>
                    </div>
                  </div>
                  <div class="qa-footer">
                    <div><button type="button" class="btn btn-info btn-sm">
                        <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 1780</button>
                      <button type="button" class="btn btn-info btn-sm"><i
                          class="glyphicon glyphicon-thumbs-down"></i></button>
                    </div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                    <div class="txt-menu"></div>
                    <div class="txt-menu btn-group">
                      <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"></i>
                      <ul class="dropdown-menu">
                        <li><a href="#">不感兴趣</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="qa-item">
                  <a href="detail.html" class="title">钟南山团队从尿液中分离出新冠病毒，这对疫情防治有什么影响？</a>
                  <div class="desc">
                    <div class="left">
                      <img src="./assets/home/qa/left.jpg" alt="" srcset="">
                    </div>
                    <div class="right">
                      <p class="show-desc">Vigorous Cooler： 尿液出现病毒并不罕见，但第一步是病毒要进入循环系统（血液、淋巴）。
                        比如寨卡病毒通过蚊子吸血进入循环系统，再进入泌尿系统。对于新型冠状病毒来说，第一步是通过呼吸系统进入下...
                        <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>
                      </p>
                      <p class="show-all hidden">
                        27日，广州市政府新闻办在广州医科大学举办疫情防控专场新闻通气会，国家卫健委高级别专家组组长、国家呼吸系统疾病临床医学研究中心主任钟南山谈到疫情的预测时表示，疫情开始时，国外有流行病学家用权威的试验模型，预测2月初，中国感染新冠肺炎人数将达16万人。钟南山说：“这是没有考虑到国家的强力干预，也没有考虑春节后的延迟复工，我们也做了预测模型，2月中旬或下旬达到疫情高峰，确诊病例约六、七万人，投到国外权威期刊，被退了回来，感觉和上面的预测水平差太多，还有人给我微信‘你的话几天之内就会被碾个粉碎’。但事实上，我们预测更接近权威。”
                        <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>
                      </p>
                    </div>
                  </div>
                  <div class="qa-footer">
                    <div><button type="button" class="btn btn-info btn-sm">
                        <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 1780</button>
                      <button type="button" class="btn btn-info btn-sm"><i
                          class="glyphicon glyphicon-thumbs-down"></i></button>
                    </div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                    <div class="txt-menu"></div>
                    <div class="txt-menu btn-group">
                      <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"></i>
                      <ul class="dropdown-menu">
                        <li><a href="#">不感兴趣</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="qa-item">
                  <a href="detail.html" class="title">钟南山团队从尿液中分离出新冠病毒，这对疫情防治有什么影响？</a>
                  <div class="desc">
                    <div class="right">
                      <p class="show-desc">Vigorous Cooler： 尿液出现病毒并不罕见，但第一步是病毒要进入循环系统（血液、淋巴）。
                        比如寨卡病毒通过蚊子吸血进入循环系统，再进入泌尿系统。对于新型冠状病毒来说，第一步是通过呼吸系统进入下...
                        <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>
                      </p>
                      <p class="show-all hidden">
                        27日，广州市政府新闻办在广州医科大学举办疫情防控专场新闻通气会，国家卫健委高级别专家组组长、国家呼吸系统疾病临床医学研究中心主任钟南山谈到疫情的预测时表示，疫情开始时，国外有流行病学家用权威的试验模型，预测2月初，中国感染新冠肺炎人数将达16万人。钟南山说：“这是没有考虑到国家的强力干预，也没有考虑春节后的延迟复工，我们也做了预测模型，2月中旬或下旬达到疫情高峰，确诊病例约六、七万人，投到国外权威期刊，被退了回来，感觉和上面的预测水平差太多，还有人给我微信‘你的话几天之内就会被碾个粉碎’。但事实上，我们预测更接近权威。”
                        <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>
                      </p>
                    </div>
                  </div>
                  <div class="qa-footer">
                    <div><button type="button" class="btn btn-info btn-sm">
                        <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 1780</button>
                      <button type="button" class="btn btn-info btn-sm"><i
                          class="glyphicon glyphicon-thumbs-down"></i></button>
                    </div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                    <div class="txt-menu"></div>
                    <div class="txt-menu btn-group">
                      <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"></i>
                      <ul class="dropdown-menu">
                        <li><a href="#">不感兴趣</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="qa-item">
                  <a href="detail.html" class="title">钟南山团队从尿液中分离出新冠病毒，这对疫情防治有什么影响？</a>
                  <div class="desc">
                    <div class="left">
                      <img src="./assets/home/qa/left.jpg" alt="" srcset="">
                    </div>
                    <div class="right">
                      <p class="show-desc">Vigorous Cooler： 尿液出现病毒并不罕见，但第一步是病毒要进入循环系统（血液、淋巴）。
                        比如寨卡病毒通过蚊子吸血进入循环系统，再进入泌尿系统。对于新型冠状病毒来说，第一步是通过呼吸系统进入下...
                        <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>
                      </p>
                      <p class="show-all hidden">
                        27日，广州市政府新闻办在广州医科大学举办疫情防控专场新闻通气会，国家卫健委高级别专家组组长、国家呼吸系统疾病临床医学研究中心主任钟南山谈到疫情的预测时表示，疫情开始时，国外有流行病学家用权威的试验模型，预测2月初，中国感染新冠肺炎人数将达16万人。钟南山说：“这是没有考虑到国家的强力干预，也没有考虑春节后的延迟复工，我们也做了预测模型，2月中旬或下旬达到疫情高峰，确诊病例约六、七万人，投到国外权威期刊，被退了回来，感觉和上面的预测水平差太多，还有人给我微信‘你的话几天之内就会被碾个粉碎’。但事实上，我们预测更接近权威。”
                        <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>
                      </p>
                    </div>
                  </div>
                  <div class="qa-footer">
                    <div><button type="button" class="btn btn-info btn-sm">
                        <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 1780</button>
                      <button type="button" class="btn btn-info btn-sm"><i
                          class="glyphicon glyphicon-thumbs-down"></i></button>
                    </div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                    <div class="txt-menu"></div>
                    <div class="txt-menu btn-group">
                      <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"></i>
                      <ul class="dropdown-menu">
                        <li><a href="#">不感兴趣</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="qa-item">
                  <a href="detail.html" class="title">钟南山团队从尿液中分离出新冠病毒，这对疫情防治有什么影响？</a>
                  <div class="desc">
                    <div class="right">
                      <p class="show-desc">Vigorous Cooler： 尿液出现病毒并不罕见，但第一步是病毒要进入循环系统（血液、淋巴）。
                        比如寨卡病毒通过蚊子吸血进入循环系统，再进入泌尿系统。对于新型冠状病毒来说，第一步是通过呼吸系统进入下...
                        <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>
                      </p>
                      <p class="show-all hidden">
                        27日，广州市政府新闻办在广州医科大学举办疫情防控专场新闻通气会，国家卫健委高级别专家组组长、国家呼吸系统疾病临床医学研究中心主任钟南山谈到疫情的预测时表示，疫情开始时，国外有流行病学家用权威的试验模型，预测2月初，中国感染新冠肺炎人数将达16万人。钟南山说：“这是没有考虑到国家的强力干预，也没有考虑春节后的延迟复工，我们也做了预测模型，2月中旬或下旬达到疫情高峰，确诊病例约六、七万人，投到国外权威期刊，被退了回来，感觉和上面的预测水平差太多，还有人给我微信‘你的话几天之内就会被碾个粉碎’。但事实上，我们预测更接近权威。”
                        <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>
                      </p>
                    </div>
                  </div>
                  <div class="qa-footer">
                    <div><button type="button" class="btn btn-info btn-sm">
                        <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 1780</button>
                      <button type="button" class="btn btn-info btn-sm"><i
                          class="glyphicon glyphicon-thumbs-down"></i></button>
                    </div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                    <div class="txt-menu"></div>
                    <div class="txt-menu btn-group">
                      <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"></i>
                      <ul class="dropdown-menu">
                        <li><a href="#">不感兴趣</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="qa-item">
                  <a href="detail.html" class="title">钟南山团队从尿液中分离出新冠病毒，这对疫情防治有什么影响？</a>
                  <div class="desc">
                    <div class="left">
                      <img src="./assets/home/qa/left.jpg" alt="" srcset="">
                    </div>
                    <div class="right">
                      <p class="show-desc">Vigorous Cooler： 尿液出现病毒并不罕见，但第一步是病毒要进入循环系统（血液、淋巴）。
                        比如寨卡病毒通过蚊子吸血进入循环系统，再进入泌尿系统。对于新型冠状病毒来说，第一步是通过呼吸系统进入下...
                        <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>
                      </p>
                      <p class="show-all hidden">
                        27日，广州市政府新闻办在广州医科大学举办疫情防控专场新闻通气会，国家卫健委高级别专家组组长、国家呼吸系统疾病临床医学研究中心主任钟南山谈到疫情的预测时表示，疫情开始时，国外有流行病学家用权威的试验模型，预测2月初，中国感染新冠肺炎人数将达16万人。钟南山说：“这是没有考虑到国家的强力干预，也没有考虑春节后的延迟复工，我们也做了预测模型，2月中旬或下旬达到疫情高峰，确诊病例约六、七万人，投到国外权威期刊，被退了回来，感觉和上面的预测水平差太多，还有人给我微信‘你的话几天之内就会被碾个粉碎’。但事实上，我们预测更接近权威。”
                        <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>
                      </p>
                    </div>
                  </div>
                  <div class="qa-footer">
                    <div><button type="button" class="btn btn-info btn-sm">
                        <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 1780</button>
                      <button type="button" class="btn btn-info btn-sm"><i
                          class="glyphicon glyphicon-thumbs-down"></i></button>
                    </div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                    <div class="txt-menu"></div>
                    <div class="txt-menu btn-group">
                      <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"></i>
                      <ul class="dropdown-menu">
                        <li><a href="#">不感兴趣</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="qa-item">
                  <a href="detail.html" class="title">钟南山团队从尿液中分离出新冠病毒，这对疫情防治有什么影响？</a>
                  <div class="desc">
                    <div class="right">
                      <p class="show-desc">Vigorous Cooler： 尿液出现病毒并不罕见，但第一步是病毒要进入循环系统（血液、淋巴）。
                        比如寨卡病毒通过蚊子吸血进入循环系统，再进入泌尿系统。对于新型冠状病毒来说，第一步是通过呼吸系统进入下...
                        <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>
                      </p>
                      <p class="show-all hidden">
                        27日，广州市政府新闻办在广州医科大学举办疫情防控专场新闻通气会，国家卫健委高级别专家组组长、国家呼吸系统疾病临床医学研究中心主任钟南山谈到疫情的预测时表示，疫情开始时，国外有流行病学家用权威的试验模型，预测2月初，中国感染新冠肺炎人数将达16万人。钟南山说：“这是没有考虑到国家的强力干预，也没有考虑春节后的延迟复工，我们也做了预测模型，2月中旬或下旬达到疫情高峰，确诊病例约六、七万人，投到国外权威期刊，被退了回来，感觉和上面的预测水平差太多，还有人给我微信‘你的话几天之内就会被碾个粉碎’。但事实上，我们预测更接近权威。”
                        <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>
                      </p>
                    </div>
                  </div>
                  <div class="qa-footer">
                    <div><button type="button" class="btn btn-info btn-sm">
                        <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 1780</button>
                      <button type="button" class="btn btn-info btn-sm"><i
                          class="glyphicon glyphicon-thumbs-down"></i></button>
                    </div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                    <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                    <div class="txt-menu"></div>
                    <div class="txt-menu btn-group">
                      <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"></i>
                      <ul class="dropdown-menu">
                        <li><a href="#">不感兴趣</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              
              <div class="right-menu-box box-wrap">
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-plus"></i>
                  <span>写回答</span>
                </a>
                <a href="write.html" class="menu-item">
                  <i class="glyphicon glyphicon-pencil"></i>
                  <span>写文章</span>
                </a>
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-ok"></i>
                  <span>些想法</span>
                </a>
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-play-circle"></i>
                  <span>发视频</span>
                </a>
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-adjust"></i>
                  <span>稍后答</span>
                </a>
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-file"></i>
                  <span>草稿箱</span>
                </a>
              </div>
              
              <div class="right-creater-box box-wrap">
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-user"></i>
                    <span>草稿箱</span>
                  </div>
                  <div class="right">
                    <span>去开通</span>
                    <i class="glyphicon glyphicon-menu-right"></i>
                  </div>
                </a>
              </div>
              
              <div class="right-menu-box box-wrap">
                <a href="#" class="menu-item menu-live">
                  <i class="glyphicon glyphicon-plus"></i>
                  <span>Live</span>
                </a>
                <a href="#" class="menu-item menu-store">
                  <i class="glyphicon glyphicon-pencil"></i>
                  <span>书店</span>
                </a>
                <a href="#" class="menu-item menu-table">
                  <i class="glyphicon glyphicon-ok"></i>
                  <span>圆桌</span>
                </a>
                <a href="#" class="menu-item menu-special">
                  <i class="glyphicon glyphicon-play-circle"></i>
                  <span>专栏</span>
                </a>
                <a href="#" class="menu-item menu-consult">
                  <i class="glyphicon glyphicon-adjust"></i>
                  <span>付费咨询</span>
                </a>
                <a href="#" class="menu-item menu-wiki">
                  <i class="glyphicon glyphicon-file"></i>
                  <span>百科</span>
                </a>
              </div>
              
              
              <div class="right-mine-box box-wrap">
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-heart"></i>
                    <span>我的收藏</span>
                  </div>
                  <div class="right">
                    <span>0</span>
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-question-sign"></i>
                    <span>我关注的问题</span>
                  </div>
                  <div class="right">
                    <span>28</span>
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-user"></i>
                    <span>我的邀请</span>
                  </div>
                  <div class="right">
                    <span>33</span>
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-yen"></i>
                    <span>我的余额</span>
                  </div>
                  <div class="right">
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-king"></i>
                    <span>站务中心</span>
                  </div>
                  <div class="right">
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-file"></i>
                    <span>版权服务中心</span>
                  </div>
                  <div class="right">
                  </div>
                </a>
              </div>
              
              
              <div class="right-footer">
                <a href="#">用户指南</a><span class="dot">·</span>
                <a href="#">用户使用协议</a><span class="dot">·</span>
                <a href="#">用户隐私权政策</a>
                <br />
                <a href="#">侵权举报</a><span class="dot">·</span>
                <a href="#">网上有害信息举报专区</a>
                <br />
                <a href="#">京ICP证 第10001000号</a>
                <br />
                <a href="#">京ICP备 第10001000号</a>
                <br />
                <a href="#">联系我们 © 2020在线问答</a>
              </div>
              
            </div>
          </div>
        </div>
        
      </div>
    { % endblock %}
    { % block js_inline %}
          // 点击，查看更多，把详细的那个p标签展示出来，把自己隐藏
          $('.show-desc').click(function () { 
            $(this).addClass('hidden');
            $(this).next().removeClass('hidden')
          })
          $('.show-all').click(function () { 
            $(this).addClass('hidden');
            $(this).prev().removeClass('hidden')
          })
    { % endblock %}

{ % extends 'base_layout.html' %}
    { % from 'macro/form_errors.html' import form_field_errors %}
    { % block title %}{ {  super() }} - 写文章{ % endblock %}
    { % block header %}
      <link rel="stylesheet" href="/assets/style/write.css">
      { % endblock %}
    { % block content %}
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <form class="form-horizontal write-form" method="post"
              enctype="multipart/form-data" action="{ { url_for('qa.write') }}">
              { {  form.csrf_token }}
              <div class="form-group">
                <button type="submit" class="btn btn-info pull-right">发布</button>
              </div>
              <div class="form-group">
                <label class="upload-file">
                  { {  form.img }}
                  <i class="glyphicon glyphicon-camera"></i>
                </label>
              </div>
              { {  form_field_errors(form.img.errors) }}
              <div class="form-group">
                { {  form.title }}
              </div>
              { {  form_field_errors(form.title.errors) }}
              <div class="form-group">
                { {  form.tags }}
              </div>
              { {  form_field_errors(form.tags.errors) }}
              <div class="form-group">
                { {  form.desc }}
              </div>
              { {  form_field_errors(form.desc.errors) }}
              <div class="form-group">
                { {  form.content }}
              </div>
              { {  form_field_errors(form.content.errors) }}
            </form>
          </div>
        </div>
      </div>
    { % endblock %}
    { % block js_extra %}
      <script>
        $(function () { 
          // 文件选择后，在浏览器中预览
          $('input[type=file]').change(function () { 
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function () { 
              $('.upload-file').css('background-image', 'url(' + reader.result + ')')
            }
            reader.readAsDataURL(file);
          })
        })
      </script>
    { % endblock %}

from flask_login import current_user
    from flask_wtf import FlaskForm
    from flask_wtf.file import FileAllowed
    from wtforms import StringField, TextAreaField, FileField
    from wtforms.validators import DataRequired, Length
    
    from models import Question, db
    
    
    class WriteQuestionForm(FlaskForm):
        """ 写文章\问题 """
        img = FileField(label='上传图片', render_kw={ 
            'accept': ".jpeg, .jpg, .png"
        }, validators=[
            FileAllowed(['png', 'jpg', 'jpeg'], '请选择合适的图片类型')
        ])
        title = StringField(label='标题', render_kw={ 
            'class': "form-control",
            'placeholder': "请输入标题（最多50个字）"
        }, validators=[DataRequired('请输入标题'),
                       Length(min=5, max=50, message='标题长度为5-50字')])
        tags = StringField(label='标签', render_kw={ 
            'class': "form-control",
            'placeholder': "输入标签，用,分隔"
        })
        desc = StringField(label='描述', render_kw={ 
            'class': "form-control",
            'placeholder': "简述"
        }, validators=[Length(max=150, message='描述最长为150字')])
        content = TextAreaField(label='文章内容', render_kw={ 
            'class': "form-control",
            'placeholder': "请输入正文"
        }, validators=[DataRequired('请输入正文'),
                       Length(min=5, message='不能少于5个字符')])
    
        def save(self):
            """ 发布问题 """
            # 1. 获取图片
            # 2. 保存问题
            title = self.title.data
            desc = self.desc.data
            content = self.content.data
            que_obj = Question(
                title=title, desc=desc, content=content, user=current_user)
            db.session.add(que_obj)
            db.session.commit()
            # 3. 保存标签
    
            return que_obj

from flask import Blueprint, render_template, request, abort, redirect, url_for, flash
    from flask_login import login_required
    
    from models import Question
    from qa.forms import WriteQuestionForm
    
    qa = Blueprint('qa', __name__,
                   template_folder='templates',
                   static_folder='../assets')
    
    
    @qa.route('/')
    def index():
        """ 首页 """
        return render_template('index.html')
    
    
    @qa.route('/follow')
    def follow():
        """ 关注 """
        per_page = 20  # 每页数据的大小
        page = int(request.args.get('page', 1))
        page_data = Question.query.filter_by(is_valid=True).paginate(
            page=page, per_page=per_page)
        return render_template('follow.html', page_data=page_data)
    
    
    @qa.route('/write', methods=['GET', 'POST'])
    @login_required
    def write():
        """ 写文章，提问 """
        form = WriteQuestionForm()
        if form.validate_on_submit():
            try:
                que_obj = form.save()
                if que_obj:
                    flash('发布问题成功', 'success')
                    return redirect(url_for('qa.index'))
            except Exception as e:
                print(e)
            flash('发布问题失败，请稍后重试', 'danger')
        return render_template('write.html', form=form)
    
    
    @qa.route('/detail/<int:q_id>')
    def detail(q_id):
        """ 问题详情 """
        # 1. 查询问题信息
        question = Question.query.get(q_id)
        if not question.is_valid:
            abort(404)
        # 2. 展示第一条回答信息
        answer = question.answer_list.filter_by(is_valid=True).first()
        return render_template('detail.html', question=question, answer=answer)

{ # flash 消息 #}
    
    { % for category, message in get_flashed_messages(with_categories=true) %}
    <div class="alert alert-{ { category }} alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">×</span></button>
      { % autoescape false %}
      <span>{ {  message }}</span>
      { % endautoescape %}
    </div>
    { % endfor %}

<div class="layout-header">
    
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#id-index-banner"
                    aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">在线问答系统</a>
          </div>
    
          
          <div class="collapse navbar-collapse" id="id-index-banner">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">话题</a></li>
            </ul>
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="搜索话题">
              </div>
              <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">提问</a></li>
              <li><a href="#">消息<span class="badge">4</span></a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false">个人中心 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="./mine.html">我的主页</a></li>
                  <li><a href="./mine.html">设置</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="{ { url_for('accounts.logout') }}">退出</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>

{ # 表单验证中的错误显示 #}
    { % macro form_field_errors(err_list) %}
      { % if err_list %}
        <ul class="list-unstyled text-danger">
          { % for err in err_list %}
            <li>{ {  err }}</li>
          { % endfor %}
        </ul>
      { % endif %}
    { % endmacro %}

{ % extends 'base.html' %}
    { % block layout %}
      { # 顶部导航 #}
      { % include 'components/layout_header_nav.html' %}
      { % block content %}
        { # 内容区域 #}
      { % endblock %}
      { # 底部右下角的菜单 #}
      <div class="layout-footer">
        <a href="#" data-toggle="tooltip" title="意见反馈"><i class="glyphicon glyphicon-briefcase"></i></a>
        <a href="#top" data-toggle="tooltip" title="回到顶部"><i class="glyphicon glyphicon-arrow-up"></i></a>
      </div>
    { % endblock %}
    { % block js %}
      <script>
          $(function () { 
              // 页面右下角的菜单提示
              $('[data-toggle="tooltip"]').tooltip()
              { % block js_inline %}
                  { # jquery内部的js逻辑 #}
              { % endblock %}
          })
      </script>
      { % block js_extra %}
       { % endblock %}
    { % endblock %}

import re
    
    from wtforms import ValidationError
    
    
    def phone_required(form, field):
        """ 自定义的手机号码的验证 """
        # 强制验证用户名为手机号
        username = field.data
        pattern = r'^1[0-9]{10}$'
        if not re.search(pattern, username):
            raise ValidationError('请输入手机号码')
        return field

def number_split(num):
        """
        数字格式化
        12345678 => 12,345,678
        :param num: 需要格式化的数字
        :return: 格式化后的字符串
        """
        return '{:,}'.format(int(num))

from flask import Flask, session, g
    from flask_login import LoginManager
    
    from models import db, User
    from accounts.views import accounts
    from qa.views import qa
    from utils.filters import number_split
    
    app = Flask(__name__, static_folder='assets')
    # 从配置文件加载配置
    app.config.from_object('conf.Config')
    
    # 数据库初始化
    db.init_app(app)
    
    # 登录验证
    login_manager = LoginManager()
    login_manager.login_view = "accounts.login"
    login_manager.login_message = '请登录'
    login_manager.login_message_category = "danger"
    login_manager.init_app(app)
    
    # 注册蓝图
    app.register_blueprint(accounts, url_prefix='/accounts')
    app.register_blueprint(qa, url_prefix='/')
    
    # 注册过滤器
    app.jinja_env.filters['number_split'] = number_split
    
    #
    # @app.before_request
    # def before_request():
    # """ 如果有用户id,设置到全局对象 """
    # user_id = session.get('user_id', None)
    # if user_id:
    # user = User.query.get(user_id)
    # print(user)
    # g.current_user = user
    
    
    @login_manager.user_loader
    def load_user(user_id):
        return User.query.get(user_id)

import os
    
    
    class Config(object):
        """ 项目的配置文件 """
        # 数据库连接URI
        SQLALCHEMY_DATABASE_URI = 'mysql://root:@localhost/flask_qa'
        SQLALCHEMY_TRACK_MODIFICATIONS = True
        # flash, form wtf
        SECRET_KEY = 'abcdsacb12312'
        # 文件上传的根路径
        MEDIA_ROOT = os.path.join(os.path.dirname(__file__), 'medias')

from datetime import datetime
    
    from flask_sqlalchemy import SQLAlchemy
    
    from utils import constants
    
    db = SQLAlchemy()
    
    
    class User(db.Model):
        """ 用户模型 """
        __tablename__ = 'accounts_user'
        id = db.Column(db.Integer, primary_key=True, autoincrement=True)  # 主键
        # 用户名，用于登录
        username = db.Column(db.String(64), unique=True, nullable=False)
        # 用户昵称
        nickname = db.Column(db.String(64))
        password = db.Column(db.String(256), nullable=False)
        # 用户的头像地址
        avatar = db.Column(db.String(256))
    
        # 是否有效，无效用户将不能登录系统
        status = db.Column(db.SmallInteger,
                           default=constants.UserStatus.USER_ACTIVE.value,
                           comment='用户状态')
        # 是否是超级管理员，管理员可以对所有内容进行管理
        is_super = db.Column(db.SmallInteger,
                             default=constants.UserRole.COMMON.value)
        # 创建时间
        created_at = db.Column(db.DateTime, default=datetime.now)
        # 最后修改的时间
        updated_at = db.Column(db.DateTime,
                               default=datetime.now, onupdate=datetime.now)
        # profile = db.relationship('UserProfile')
    
        @property
        def is_authenticated(self):
            return True
    
        @property
        def is_active(self):
            """ 有效的用户才能登录系统 """
            return self.status == constants.UserStatus.USER_ACTIVE.value
    
        @property
        def is_anonymous(self):
            return False
    
        def get_id(self):
            return '{}'.format(self.id)
    
        def __str__(self):
            return self.nickname
    
    
    class UserProfile(db.Model):
        """ 用户详细信息 """
        __tablename__ = 'accounts_user_profile'
        id = db.Column(db.Integer, primary_key=True)  # 主键
        # 用户名，用于登录
        username = db.Column(db.String(64), unique=True, nullable=False)
        # 用户真实姓名
        real_name = db.Column(db.String(64))
        # 用户的格言
        maxim = db.Column(db.String(128))
        # 性别
        sex = db.Column(db.String(16))
        # 地址
        address = db.Column(db.String(256))
        # 创建时间
        created_at = db.Column(db.DateTime, default=datetime.now)
        # 最后修改的时间
        updated_at = db.Column(db.DateTime,
                               default=datetime.now, onupdate=datetime.now)
        # 关联用户
        user_id = db.Column(db.Integer, db.ForeignKey('accounts_user.id'))
        # 建立用户的一对一关系属性user.profile profile.user
        user = db.relationship('User', backref=db.backref('profile', uselist=False))
    
    
    class UserLoginHistory(db.Model):
        __tablename__ = 'accounts_login_history'
        id = db.Column(db.Integer, primary_key=True)  # 主键
        # 用户名，用于登录
        username = db.Column(db.String(64), nullable=False)
        # 账号平台
        login_type = db.Column(db.String(32))
        # IP地址
        ip = db.Column(db.String(32))
        # user-agent
        ua = db.Column(db.String(128))
        # 创建时间
        created_at = db.Column(db.DateTime, default=datetime.now)
        # 关联用户
        user_id = db.Column(db.Integer, db.ForeignKey('accounts_user.id'))
        # 建立与用户的一对多属性,user.history_list
        user = db.relationship('User', backref=db.backref('history_list', lazy='dynamic'))
    
    
    class Question(db.Model):
        """ 问题 """
        __tablename__ = 'qa_question'
        id = db.Column(db.Integer, primary_key=True)  # 主键
        # 问题标题
        title = db.Column(db.String(128), nullable=False)
        # 问题描述
        desc = db.Column(db.String(256))
        # 问题图片
        img = db.Column(db.String(256))
        # 问题详情
        content = db.Column(db.Text, nullable=False)
        # 浏览人数
        view_count = db.Column(db.Integer, default=0)
        # 逻辑删除
        is_valid = db.Column(db.Boolean, default=True)
        # 排序
        reorder = db.Column(db.Integer, default=0)
        # 创建时间
        created_at = db.Column(db.DateTime, default=datetime.now)
        # 最后修改的时间
        updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
        # 关联用户
        user_id = db.Column(db.Integer, db.ForeignKey('accounts_user.id'))
        # 建立与用户的一对多属性,user.question_list
        user = db.relationship('User', backref=db.backref('question_list', lazy='dynamic'))
    
        @property
        def comment_count(self):
            """ 评论数量 """
            return self.question_comment_list.filter_by(is_valid=True).count()
    
        @property
        def follow_count(self):
            """ 关注数量 """
            return self.question_follow_list.filter_by(is_valid=True).count()
    
        @property
        def answer_count(self):
            return self.answer_list.filter_by(is_valid=True).count()
    
    
    class QuestionTags(db.Model):
        """ 问题下的标签 """
        __tablename__ = 'qa_question_tags'
        id = db.Column(db.Integer, primary_key=True)  # 主键
        # 标签名称
        tag_name = db.Column(db.String(16), nullable=False)
        # 逻辑删除
        is_valid = db.Column(db.Boolean, default=True)
        # 创建时间
        created_at = db.Column(db.DateTime, default=datetime.now)
    
        # 关联问题
        q_id = db.Column(db.Integer, db.ForeignKey('qa_question.id'))
        # 建立与问题的一对多属性
        question = db.relationship('Question', backref=db.backref('tag_list', lazy='dynamic'))
    
    
    class Answer(db.Model):
        """ 问题的回答 """
        __tablename__ = 'qa_answer'
        id = db.Column(db.Integer, primary_key=True)  # 主键
        # 回答的内容详情
        content = db.Column(db.Text, nullable=False)
        # 逻辑删除
        is_valid = db.Column(db.Boolean, default=True)
        # 创建时间
        created_at = db.Column(db.DateTime, default=datetime.now)
        # 最后修改的时间
        updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
        # 关联用户
        user_id = db.Column(db.Integer, db.ForeignKey('accounts_user.id'))
        # 关联问题
        q_id = db.Column(db.Integer, db.ForeignKey('qa_question.id'))
        # 建立与用户的一对多属性
        user = db.relationship('User', backref=db.backref('answer_list', lazy='dynamic'))
        # 建立与问题的一对多属性
        question = db.relationship('Question', backref=db.backref('answer_list', lazy='dynamic'))
    
        @property
        def love_count(self):
            """ 点赞的数量 """
            return self.answer_love_list.count()
    
    
    class AnswerComment(db.Model):
        """ 回答的评论 """
        __tablename__ = 'qa_answer_comment'
        id = db.Column(db.Integer, primary_key=True)  # 主键
        # 评论内容
        content = db.Column(db.String(512), nullable=False)
        # 赞同人数
        love_count = db.Column(db.Integer, default=0)
        # 评论是否公开
        is_public = db.Column(db.Boolean, default=True)
        # 逻辑删除
        is_valid = db.Column(db.Boolean, default=True)
        # 创建时间
        created_at = db.Column(db.DateTime, default=datetime.now)
        # 最后修改的时间
        updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
        # 回复ID
        reply_id = db.Column(db.Integer, db.ForeignKey('qa_answer_comment.id'), nullable=True)
        # 关联用户
        user_id = db.Column(db.Integer, db.ForeignKey('accounts_user.id'))
        # 关联答案
        answer_id = db.Column(db.Integer, db.ForeignKey('qa_answer.id'))
        # 关联问题
        q_id = db.Column(db.Integer, db.ForeignKey('qa_question.id'))
    
        # 建立与用户的一对多属性
        user = db.relationship('User', backref=db.backref('answer_comment_list', lazy='dynamic'))
        # 建立与答案的一对多属性
        answer = db.relationship('Answer', backref=db.backref('answer_comment_list', lazy='dynamic'))
        # 建立与问题的一对多属性
        question = db.relationship('Question', backref=db.backref('question_comment_list', lazy='dynamic'))
    
    
    class AnswerLove(db.Model):
        """ 回答点赞 """
        __tablename__ = 'qa_answer_love'
        id = db.Column(db.Integer, primary_key=True)  # 主键
        created_at = db.Column(db.DateTime, default=datetime.now)
        # 关联用户
        user_id = db.Column(db.Integer, db.ForeignKey('accounts_user.id'))
        # 关联答案
        answer_id = db.Column(db.Integer, db.ForeignKey('qa_answer.id'))
        # 关联问题
        q_id = db.Column(db.Integer, db.ForeignKey('qa_question.id'))
    
        # 建立与用户的一对多属性
        user = db.relationship('User', backref=db.backref('answer_love_list', lazy='dynamic'))
        # 建立与答案的一对多属性
        answer = db.relationship('Answer', backref=db.backref('answer_love_list', lazy='dynamic'))
        # 建立与问题的一对多属性
        question = db.relationship('Question', backref=db.backref('question_love_list', lazy='dynamic'))
    
    
    class AnswerCollect(db.Model):
        """ 收藏的回答 """
        __tablename__ = 'qa_answer_collect'
        id = db.Column(db.Integer, primary_key=True)  # 主键
        # 创建时间
        created_at = db.Column(db.DateTime, default=datetime.now)
        # 逻辑删除
        is_valid = db.Column(db.Boolean, default=True)
        # 关联用户
        user_id = db.Column(db.Integer, db.ForeignKey('accounts_user.id'))
        # 关联问题
        q_id = db.Column(db.Integer, db.ForeignKey('qa_question.id'))
        # 关联答案
        answer_id = db.Column(db.Integer, db.ForeignKey('qa_answer.id'))
    
        # 建立与用户的一对多属性
        user = db.relationship('User', backref=db.backref('answer_collect_list', lazy='dynamic'))
        # 建立与问题的一对多属性
        question = db.relationship('Question', backref=db.backref('question_collect_list', lazy='dynamic'))
        # 建立与答案的一对多属性
        answer = db.relationship('Answer', backref=db.backref('answer_collect_list', lazy='dynamic'))
    
    
    class QuestionFollow(db.Model):
        """ 关注的问题 """
        __tablename__ = 'qa_question_follow'
        id = db.Column(db.Integer, primary_key=True)  # 主键
        created_at = db.Column(db.DateTime)
        is_valid = db.Column(db.Boolean, default=True, comment='逻辑删除')
        # 关联用户
        user_id = db.Column(db.Integer, db.ForeignKey('accounts_user.id'))
        # 关联问题
        q_id = db.Column(db.Integer, db.ForeignKey('qa_question.id'))
    
        # 建立与用户的一对多属性
        user = db.relationship('User', backref=db.backref('question_follow_list', lazy='dynamic'))
        # 建立与问题的一对多属性
        question = db.relationship('Question', backref=db.backref('question_follow_list', lazy='dynamic'))