zoukankan      html  css  js  c++  java
  • 完成个人中心—导航标签

    1. 个人中心—视图函数带标签页面参数tag
      @app.route('/usercenter/<user_id>/<tag>')
      def usercenter(user_id, tag):
         if tag == ‘1':
             return render_template('usercenter1.html', **context)

    2. 个人中心—导航标签链接增加tag参数
      <li role=“presentation”><a href=“{{ url_for(‘usercenter’,user_id = user.id,tag = ‘1’) }}">全部问答</a></li>

    3. 个人中心—有链接到个人中心页面的url增加tag参数

     <a href="{{ url_for('usercenter',user_id = session.get('userid'), tag=1) }}">{{ session.get('user') }}</a>

    主py文件:

    @app.route('/gr/<user_id>/<tag>')
    @loginFirst
    def gr(user_id,tag):
        user=User.query.filter(User.id==user_id).first() #把信息存放到数据库里面
        context={
            'username':user.username,
            'question':user.question,
            'comments':user.comments,
            'user':user
        }
        if tag == '1':
            return render_template('wd.html',**context) #输出显示数据库里的信息
        elif tag == '2':
            return render_template('pl.html',**context)
        else:
            return render_template('zx.html', **context)

    个人中心导航html:

    <ul class="nav nav-tabs">
            <li role="presentation"><a href="{{ url_for('gr', user_id = user.id,tag='1') }}">全部问答</a></li>
            <li role="presentation"><a href="{{ url_for('gr',user_id = user.id,tag='2') }}">全部评论</a></li>
            <li role="presentation"><a href="{{ url_for('gr',user_id = user.id,tag='3') }}">个人信息</a></li>
    
        </ul>

    链接页面html:

    首页:

     <a href="{{ url_for('gr',user_id=foo.author.id,tag=1) }}">{{ foo.author.username }}</a><br>

    详情页:

    <a href="{{ url_for('gr',user_id=ques.author.id,tag=1) }}">{{ ques.author.username }}</a><br>

    导航页:

    <a href="{{ url_for('gr',user_id=session.get("userid"),tag=1) }}">{{ username }}</a>
  • 相关阅读:
    [JS]手写动画最小时间间隔设置
    [CSS3]chrome浏览器中支持汉字的最小像素是12px,如何让显示更小的字体
    [HTML,CSS]div+css垂直水平居中
    promise经典题目
    HTML5新兴API
    使用MessageChannel(消息通道)进行深拷贝
    原生js手写Promise
    github图片显示不出来-已解决
    前端原生js加密解密
    vue-cli3前端工程静态文件下载
  • 原文地址:https://www.cnblogs.com/qisq/p/8066977.html
Copyright © 2011-2022 走看看