- 用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 %}
- 首页、登录页、注册页都按上述步骤改写
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('/regist/')
def regist():
return render_template('zhuce.html')
if __name__ == '__main__':
app.run(debug=True)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}CSGO{% endblock %}</title>
<script src="{{ url_for('static',filename='js/base.js') }}" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/base.css') }}">
{% block head %}{% endblock %}
</head>
{% block main %}
<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509701877012&di=44ee63599bf26c9aeaed4c59232f7b73&imgtype=0&src=http%3A%2F%2Fi0.letvimg.com%2Flc06_crawler%2F201710%2F27%2F16%2F07%2F1509091667478-6.jpg"
<body>
<div class="navbox">
<div class="nav">
<div class="logo">
<a href="" class="toweb">
<img src="http://www.csgo.com.cn/web201608/images/cslogo.png" alt="CSGO官方网站">
</a>
</div>
<div class="nav_list">
<a href="">
<span></span>
<h4>首页</h4><p>HOME</p>
</a>
<a href="">
<span></span>
<h4>新闻资讯</h4><p>NEWS</p>
</a>
<a href="">
<span></span>
<h4>电竞中心</h4><p>ESPORTS</p>
</a>
<a href="">
<span></span>
<h4>精彩视频</h4><p>VIDEOS</p>
</a>
<a href="">
<span></span>
<h4>玩家攻略</h4><p>TIPS</p>
</a>
<a href="">
<span></span>
<h4>游戏资料</h4><p>GUIDES</p>
</a>
<a href="">
<span></span>
<h4>个人中心</h4><p>MEMBERS</p>
</a>
</div>
</div>
<div class="chuangjian">
<a href="http://127.0.0.1:5000/login">
<span></span>
<h4>登陆</h4><p>LOGIN</p>
</a>
<a href="http://127.0.0.1:5000/zhuce">
<span></span>
<h4>注册</h4><p>REGISTER</p>
</a>
</div>
>
</div>
</body>
{% endblock %}
{% extends 'base.html' %}
{% block title %}登录界面{% endblock %}
{% block head %}
<script type="text/javascript" src="{{ url_for('static',filename='js/login.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}">
{% endblock %}
{% block main %}
<body bgcolor="#faebd7">
<div class="div1">
<div class="div2">登录</div>
<div class="div3">
<div class="iconfont ic-user"></div> 用户：<input id="username" type="text" placeholder="请输入用户名">
</div>
<div class="div3">
密码：<input id="userpass" type="text" placeholder="请输入密码">
</div>
<div id="error_box"><br></div>
<div class="div3">
<button onclick="myLogin()">登陆</button>
</div>
<div class="div2">登陆遇到问题？</div>
</div>
{% endblock %}
{% extends 'base.html' %}
{% block title %}注册界面{% endblock %}
{% block head %}
<script type="text/javascript" src="{{ url_for('static',filename='js/zhuce.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/zhuce.css') }}">
{% endblock %}
{% block main %}
<body bgcolor="#faebd7">
<div class="div1">
<div class="div2">登录注册</div>
<div class="div3">
请输入你的昵称：<input id="username" type="text" placeholder="请输入你的昵称">
</div>
<div class="div3">
设置密码：<input id="userpass" type="text" placeholder="请输入密码">
</div>
<div class="div3">
重复密码：<input id="userpass1" type="text" placeholder="请再次输入密码">
</div>
<div class="div3">
请输入手机号：<input id="userphone" type="text" placeholder="请输入11位手机号">
</div>
<div id="error_box"><br></div>
<div class="div3">
<button onclick="myLogin()">注册</button>
</div>
<div class="div2">点击 “注册” 即表示您同意并愿意遵守<br>用户协议 和 隐私政策 。</div>
</div>
{% endblock %}
