加载静态文件,父模板的继承和扩展
- 用url_for加载静态文件
- <script src="{{ url_for('static',filename='js/login.js') }}"></script>
- flask 从static文件夹开始寻找
- 可用于加载css, js, image文件
- 继承和扩展
- 把一些公共的代码放在父模板中,避免每个模板写同样的内容。base.html
- 子模板继承父模板
- {% extends 'base.html’ %}
- 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
- <title>{% block title %}{% endblock %}-MIS问答平台</title>
- {% block head %}{% endblock %}
- {% block main %}{% endblock %}
- 子模板中写代码实现自己的需求。block
- {% block title %}登录{% endblock %}
导航栏:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jelly-fish汇</title> <link rel="stylesheet" type="text/css" href="../static/css/baidu.css"> <style> </style> </head> <body> <ul> <li><img src="http://www.jelly-fish.co.kr/img/main/logo01.png" width="80px" height="40px"></li> <li><a class="active" href="">首页</a></li> <li><a href="">活动汇</a></li> <li><a href="">下载APP</a></li> <li class="research"> <input class="research" type="text" class="right" placeholder="请输入要搜索的内容"></li> <li class="b"> <button type="submit" >搜索</button> </li> <li class="login"><a href="{{ url_for('new login') }}">登录</a></li> <li class="regist"><a href="{{ url_for('new regist') }}" style="color: hotpink">注册</a></li> </ul> </body> </html>
登录:
{% extends '.html'%} {% block aa %} <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="../static/js/login.js"> </script> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../static/css/style.css"> <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'> </head> <body> <div class="lg-container"> <h1>登录</h1> <form action="" id="lg-form" name="lg-form" method="post"> <div> 用户名: <label for="username">Username:</label> <input id="uname" type="text" name="用户名" placeholder="请输入用户名"><br> </div> <div> 密码:<label for="password">Password:</label> <input class="password" id="upass" type="password" name="密码" placeholder="请输入密码" > </div> <input type="checkbox" type="checkbox" name="vehicle" value="true"><span>记住密码</span> <a class="right" href="">登录遇到问题?</a> <div id="error_box"></div> <button type="submit" id="login" onclick="fnlogin()">登录</button> </form> <div id="message"></div> </div> </body> </html> {% endblock %}
注册:
{% extends 'daohang.html'%} {% block aa %} <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="../static/js/login.js"> </script> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../static/css/style.css"> <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'> </head> <body> <div class="lg-container"> <h1>注册</h1> <form action="" id="lg-form" name="lg-form" method="post"> <div> <label for="username">Username:</label> <input type="text" name="user_name" autocomplete="off" placeholder="登录用户名,不少于6个字符"><br> </div> <div> <label for="phonenumber">number:</label> <input type="text" name="phone_number" autocomplete="off" placeholder="手机号码" > </div> <div> <label for="password">Password:</label> <input type="text" name="password" autocomplete="off" placeholder="设置密码" > </div> <div id="error_box"></div> <button type="submit" id="login" onclick="fnlogin()">注册</button> </form> <div id="message"></div> </div> </body> </html> {% endblock %}