YWEIEN

导航

开始Flask项目

1,

  1. 新建Flask项目。
  2. 设置调试模式。
  3. 理解Flask项目主程序。
  4. 使用装饰器,设置路径与函数之间的关系。
  5. 使用Flask中render_template,用不同的路径,返回首页、登录员、注册页。
  6. 用视图函数反转得到URL,{{url_for(‘login’)}},完成导航条里的链接。
  7.          py
  8. from flask import Flask,render_template
    
    app = Flask(__name__)
    
    
    @app.route('/')
    def base():
        return render_template('base.html')
    
    @app.route('/login')
    def login():
        return render_template('login.html')
    
    @app.route('/register')
    def register():
        return render_template('register.html')
    
    
    if __name__ == '__main__':
        app.run(debug=True)

     

 base

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页导航</title>

    <link rel="stylesheet" type="text/css" href="base.css">

</head>
<body>
    <nav>
        <img src=" https://123p2.sogoucdn.com/imgu/2017/10/20171031223052_33.png"><br>
        <a href="{{ url_for('index') }}">首页</a>
        <a href="">下载</a>
        <input type="text" name="search">
        <button type="submit">搜索</button>
        <a href="{{ url_for('login') }}">登录</a>
        <a href="{{ url_for('register') }}">注册</a>
    </nav>

</body>
</html>
  

login

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <link href="base.css" rel="stylesheet" type="text/css">
    <script src="base.js"></script>

</head>
<body>
     <div class="box">
         <h2>登录</h2>

         <div class="input_box">
          用户名:<input id="uname" type="text" placeholder="请输入用户名">
         </div>

         <div class="input_box">
          密码:<input id="upass" type="password" placeholder="请输入密码">
         </div>


         <div id="error_box"><br></div>
         <div class="input_box">
            <button onclick="fnLogin()">登录</button>
              <button onclick=window.alert("此页面询问您是否要离开:您输入的数据可能不会被保存")>取消</button>
              </div>
      </div>

</body>
</html>

register

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
  <link href="base.css" rel="stylesheet" type="text/css">
    <script src="base.js"></script>
</head>
<body>
    <div class="box">
            <h2>注册页面</h2>
            <div class="input_box">
               用户名: <input id="uname" type="text" placeholder="请输入用户名">
        </div>
             <div class="input_box">
                输入密码: <input id="upass" type="password" placeholder="请输入密码">
             </div>
            <div class="input_box">
                确认密码: <input id="checkpass" type="password" placeholder="请确认密码">
             </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">注册</button>
            <button onclick=window.alert("此页面询问您是否要离开:您输入的数据可能不会被保存")>取消</button></div>

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

 

 

 

 

 

posted on 2017-11-03 21:23  YWEIEN  阅读(195)  评论(0编辑  收藏  举报