加载静态文件,父模板的继承和扩展

Posted 2020-10-13 lishanting

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了加载静态文件,父模板的继承和扩展相关的知识，希望对你有一定的参考价值。

用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 %}
首页、登录页、注册页都按上述步骤改写。

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(‘regist.html‘)

if __name__ == ‘__main__‘:
    app.run(debug=True)

父
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="../static/css/home.css">
    <script src="../static/js/base.js"></script>
{% block head %}

{% endblock %}
</head>
<body id="myBody">
<img id="on_off" onclick="mySwitch()" src="../static/image/day.PNG" width="50px">
<div id="nav-main" style="zoom: 1.1125;">
  <div id="search" >
    <div id="searchout">
      <div id="search_type" >
          <div class="search_top_type" type="show"><a href="{{ url_for("home")}}" >首页</a></div>
          <div class="search_top_type" type="news"><a href="{{ url_for("login")}}" >login</a></div>
          <div class="search_top_type" type="video"><a href="{{ url_for("signin")}}" >regist</a></div>
          <div class="search_top_type" type="music"><a href="">question</a></div>
      </div>
      </div>
    </div>
  </div>
</div>
{% block main %}
{% endblock %}
</body>
</html>

css
h2{
    align:center;
   }
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 300px;
    height: 150px;
    padding-left: 100px;
    padding-top: 30px;
    background-color: peachpuff;
    }
#input_box{
    align:center;
    margin:400px;
    padding-left:400px;
    }

#error_box{
    color: hotpink;
    }
body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; padding-bottom:30px; padding-top:40px; font-family:verdana,Arial,Helvetica,sans-serif;
}

login.html
{% extends ‘base.html‘ %}
{% block title %}
    login
{% extends ‘base.html‘ %}

{% block title %}LOGIN{% endblock %}

{% block head %}
    <link href="{{ url_for(‘static‘,filename=‘CSS/login.css‘) }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for(‘static‘,filename=‘JScript/login.js‘) }}"></script>
{% endblock %}


{% block main %}
<div class="login">
    <div class="loginone">
        <h1>logining</h1>
        <form>
            <input id="uname" type="text" value="Username" onfocus="this.value = ‘‘;" onblur="if (this.value==‘‘){ this.value = ‘Username‘;}">
            <input id="upass" type="password" value="Password" onfocus="this.value = ‘‘;" onblur="if (this.value==‘‘){ this.value = ‘Password‘;}">
        </form>
        <div class="forgot">
            <input type="checkbox"><p>Keep me logged in</p>
            <a href="#">forgot Password</a>
        </div>
    </div>
    <div class="login-bottom">
        <div id="errorbox"></div><button type="submit" onclick="MyLogin()">Login</button>
    </div>
</div>
{% endblock %}

regist.html

{% extends ‘base.html‘ %}

{% block title %}regist{% endblock %}

{% block head %}
    <link href="{{ url_for(‘static‘,filename=‘CSS/regist.css‘) }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for(‘static‘,filename=‘JScript/regist.js‘) }}"></script>
{% endblock %}

{% block main %}
<div class="login">
    <div class="login-top">
        <h1>Register</h1>
        <form>
            <input id="uname" type="text" value="Username" onfocus="this.value = ‘‘;" onblur="if (this.value==‘‘){ this.value = ‘Username‘;}">
            <input id="fupass" type="password" value="Password" onfocus="this.value = ‘‘;" onblur="if (this.value==‘‘){ this.value = ‘Password‘;}">
            <input id="supass" type="password" value="Password" onfocus="this.value = ‘‘;" onblur="if (this.value==‘‘){ this.value = ‘Password‘;}">
        </form>
    </div>
    <div class="login-bottom">
        <div id="errorbox"></div><button type="submit" onclick="MyRegister()">Register</button>
    </div>
</div>
{% endblock %}

body {
    background: -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-color: #840b2a;
    background: -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-color: #840b2a;
    background: -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -o-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-size: 1000px 1000px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 1000px 1000px;
    background-color: #840b2a;
}
.box{
  width: 410px;
    height: 600px;
    overflow: hidden;
    background: #1e1e1e;
    border-radius: 6px;
    margin: 50px auto;
    box-shadow: 0px 0px 50px rgba(0,0,0,.8);
}
.titulo{
    width: 410px;
    height: 30px;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 18px;
    text-align: center;
    color: #bfbfbf;
    font-weight: bold;
    background: #121212;
    border: #2d2d2d solid 1px;
    margin-bottom: 30px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    font-family: Arial;
}

.input_box1{
  border: #ccc 1px solid;
  padding: 0.5cm 0.5cm;
  margin-top:1.0cm;
  margin-left: 2.0cm;
  width:210px;
  font-size:1em;
  border-radius:4px;
}

.input_box2{
 border: #ccc 1px solid;
padding: 0.5cm 0.5cm;
  margin-left: 2.0cm;
  width:210px;
  font-size:1em;
  border-radius:4px;
}

.input_box3{
    width: 340px;
    height: 20px;
    display: block;
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 6px;
    border: none;
    border-top: #4eb2a8 1px solid;
    border-bottom: #161616 1px solid;
    background: #349e92;
    margin-top: 2.0cm;
    margin-left: 1.0cm;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0 -1px #1d7464, 0 1px #7bb8b3;
    font-family: Arial;
}

.error_box{
  text-align: center;
  text-decoration-color: azure;
}

function fnlogin() {
            var oUname = document.getElementById("uname");
            var oUpass = document.getElementById("upass");
            var oError = document.getElementById("error_box");
            oError.innerHTML = "<br>"
            if (oUname.value.length < 6 || oUname.value.length > 12) {
                oError.innerHTML = "用户名必须大于6位或少于12位！";
                return;
            }

            else if(oUname.charCodeAt(0)>=48&&oUname.charCodeAt(0)<=57){
                oError.innerHTML="首字母不能是数字！";
                return;
            }
            if (oUpass.value.length < 6 || oUpass.value.length > 12) {
                oError.innerHTML = "密码必须大于6位或少于12位！";
                return;
            }
            window.alert("登录成功！")
        }

以上是关于加载静态文件,父模板的继承和扩展的主要内容，如果未能解决你的问题，请参考以下文章

加载静态文件,父模板的继承和扩展