1. 用url_for加载静态文件
    1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
    2. flask 从static文件夹开始寻找
    3. 可用于加载css, js, image文件
  2. 继承和扩展
    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 %}
  3. 首页、登录页、注册页都按上述步骤改写。
 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李云基  阅读(164)  评论(0编辑  收藏  举报