加载静态文件,父模板的继承和扩展
- 用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 lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}Title</title>
<link rel="stylesheet"type="text/css"href="{{ url_for('static',filename='css/base.css') }}">
<script src="{{ url_for('static',filename='js/base.js') }}"></script>
<base target="_blank" />
{% block head %}{% endblock %}
</head>
<body background="http://p0.so.qhimgs1.com/t01d2e82c8c8f2be36c.jpg" id="myBody">
<nav class="nav">
<ul>
<li><a href="{{ url_for('index') }}"><img src="../static/images/img1.png">首页</a></li>
<li><a href=""><img src="../static/images/img2.png">下载</a></li>
<li><a href="{{ url_for('login') }}"><img src="../static/images/img3.png">登录</a></li>
<li><a href="{{ url_for('regist') }}"><img src="../static/images/img4.png">注册</a></li>
<img class="on_off" id="on_off" onclick="mySwitch()" src="../static/images/pic_bulbon.gif" width="50px">
<button style="float: right;margin: 5px auto;border-radius: 5px;height: 26px" type="submit">搜索</button>
<input style="float: right;margin: 5px auto;border-radius: 8px;width: 200px;height: 20px;" type="text"name="search" placeholder="输入要搜索的内容">
</ul>
</nav>
<div id="bottom">
<a href="">关于我们</a>
<a href="">意见反馈</a>
<a href="">安全保障</a>
</div>
<div class="copyright">
<p>Copyright © 2017. Created by <a href="#" target="_blank">suxihong</a></p>
</div>
{% block main %}{% endblock %}
</body>
</html>
#登录页
{% extends 'base.html' %}
{% block title %}欢迎您的登录{% endblock %}
{% block head %}
<link href="{{ url_for('static',filename='css/js31.css') }}" rel="stylesheet" type="text/css">
<script src="{{ url_for('static',filename='js/js31.js') }}"></script>
{% endblock %}
{% block main %}
<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>
{% endblock %}
#注册页
{% extends 'base.html' %}
{% block title %}Regist{% endblock %}
{% block head %}
<link href="{{ url_for('static',filename='css/js31.css') }}" rel="stylesheet" type="text/css">
<script src="{{ url_for('static',filename='js/js31.js') }}"></script>
{% endblock %}
{% block main %}
<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>
{% endblock %}
浙公网安备 33010602011771号