开始Flask项目

  1. 新建Flask项目。
  2. 设置调试模式。
  3. 理解Flask项目主程序。
  4. 使用装饰器，设置路径与函数之间的关系。
  5. 使用Flask中render_template，用不同的路径，返回首页、登录员、注册页。
  6. 用视图函数反转得到URL，url_for(‘login’)，完成导航里的链接。

Flask代码：

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def deng():
    return render_template('deng.html')

@app.route('/zhuce')
def zhuce():
    return render_template('zhuce.html')

@app.route('/test')
def test():
    return render_template('test1.html')


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

用视图函数反转得到URL，url_for(‘login’)，完成导航里的链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片导航</title>
    <link rel="stylesheet" type="text/css" href="../static/css/test1.css">
</head>
<body>

    <div class="header">

        <a href="/">
            <span class="dz">首页</span>
            <a href="http://127.0.0.1:5000/test"/>
        </a>
        <a href="{{ url_for('/')}}" class="dz">登录</a>
        <a href="{{ url_for('/zhuce')}}" class="dz">注册</a>


         <a href="http://127.0.0.1:5000/" class="dz">登录</a>
         <a href="http://127.0.0.1:5000/zhuce" class="dz">注册</a>

        <input type="text" name="q" id="q" value="" autocomplete="off"
               placeholder="搜索" class="search-input"><br>

    </div>


<div class="daohang">
    <h2>用户导航</h2>
    <hr>
    <div class="img">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xueyuanrongyu/">学校荣誉</a>
        </div>
    </div>


    <div class="img">
        <a href="http://www.gzcc.cn/html/banxuechengguo/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/banxuechengguo/">师生获奖</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/xygk/ldgh/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xygk/ldgh/">领导关怀</a>
        </div>
    </div>


    <div class="img">
        <a href="http://i.gzcc.cn" target="_blank">
            <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>
        <div class="desc">
            <a href="http://i.gzcc.cn" target="_blank">数字广商</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">画说校园</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频广商</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">
            <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a>
        </div>
    </div>

</div>


<div id="footer">
    版权 © runoob.com
</div>


</div>
</body>
</html>

 

posted on 2017-11-03 09:53  043李庆  阅读(175)  评论(0)    收藏  举报

导航