加载静态文件,父模板的继承和扩展 - 016李云基

用url_for加载静态文件
1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
2. flask 从static文件夹开始寻找
3. 可用于加载css, js, image文件
继承和扩展
1. 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
2. 子模板继承父模板
  1. {% extends 'base.html’ %}
3. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
  1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
  2. {% block head %}{% endblock %}
  3. {% block main %}{% endblock %}
4. 子模板中写代码实现自己的需求。block
  1. {% block title %}登录{% endblock %}
首页、登录页、注册页都按上述步骤改写。

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>首页-{% block title %}{%endblock%}</title>
 5     <script src="../static/js/base.js"></script>
 6     <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='css/login.css') }}">
 7     {% block head %}{% endblock %}
 8 </head>
 9 <body>
10 <nav>
11     <img id="myOnOff" onclick="mySwitch()"
12          src="https://tva4.sinaimg.cn/crop.0.0.1242.1242.180/bde8475djw8f1hu7mrcy2j20yi0yiabl.jpg" width="40px">
13     <a href="http://127.0.0.1:5000/">首页</a>
14     <a href="http://127.0.0.1:5000/regist/">注册</a>
15     <a href="http://127.0.0.1:5000/login/">登录</a>
16 </nav>
17     {% block main %}{% endblock %}
18 </body>
19 </html>

 1 {% extends 'base父模板.html' %}
 2 {% block title %}登录{% endblock %}
 3 
 4 {% block head %}
 5     <link href="../static/css/login.css" rel="stylesheet" type="text/css">
 6     <script src="../static/js/login.js"></script>
 7 {% endblock %}
 8 
 9 {% block main %}
10     <div class="box">
11         <h2>登录</h2>
12 
13         <div class="input_box">
14             <input type="text" id="uname" placeholder="请输入用户名">
15         </div>
16         <div class="input_box">
17             <input type="password" id="upass" placeholder="请输入密码">
18         </div>
19         <div id="error_box"><br></div>
20         <div class="input_box">
21             <button onclick="fnLogin()">登录</button>
22         </div>
23 
24     </div>
25 {% endblock %}

posted on 2017-11-03 15:56 016李云基阅读(168) 评论(0) 收藏举报

刷新页面返回顶部