zoukankan      html  css  js  c++  java
  • 11.5

    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. 首页、登录页、注册页都按上述步骤改写。
      首页:
      <!
      DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %} {% endblock %} 网易考拉</title> <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/shouye.css') }}"> {% block head %} {% endblock %} </head> <nav style="background-color: blanchedalmond"> <img src="{{ url_for('static',filename='img/daohang.jpg') }}" width="600px"> <input type="text" placeholder="输入你想找的宝贝"> <input type="button" value="搜索"> <a>购物车</a> <a href="https://www.kaola.com/activity/flashSaleIndex/show.html?navindex=2&zn=top">今日限时购</a> <a href="https://www.kaola.com/activity/newArrival.html?navindex=3&zn=top">每日上新</a> <a href="{{ url_for('tt') }}">登陆</a> <a href="{{ url_for('zhuce') }}">注册</a> </nav> <body class="li"> <h1 align="center"><a href="https://www.kaola.com/?zn=top"target="_blank">网易考拉</a></h1> <br> <br> <div> <select class="ziti"> <option>收藏</option> <option>点赞</option> <option>评论</option> </select> </div> {% block main %} {% endblock %} </body> </html>
      登录页:
      {% extends 'shouye.html' %} {% block title %} 登录 {% endblock %} {% block head %}
      <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/dl.css') }}"> <script src="{{ url_for('static',filename='js/denglu.js') }}"></script> {% endblock %} {% block main %} <div class="box"> <div id="tittle"><h2 align="center">登录</h2></div> <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="foLogin()">登录</button> </div> <button type="button" onclick="foLogin()"><a href="zhuce.html">注册</a></button> </div> {% endblock %}
      注册页:
      {% extends 'shouye.html' %} {% block title %} 注册 {% endblock %} {% block head %}
      <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/dl.css') }}"> <script src="{{ url_for('static',filename='js/yx.js') }}"></script> {% endblock %} {% block main %} <div class="box"> <div id="tittle"><h2 align="center">新用户注册</h2></div> <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="upass1" type="password" placeholder="请再次输入密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="foLogin()">注册</button> </div> </div> {% endblock %} </body> </html>

  • 相关阅读:
    微信支付退款部分代码
    Raspberry PI 点亮LED
    Raspberry PI 摄像头
    RaspberryPI 3B系统烧录
    MySQL基础使用
    MySQL数据库管理系统概述
    Eclipse创建JAVA项目
    Brup Suite拦截https请求
    Github 第一个仓库
    python os模块主要函数
  • 原文地址:https://www.cnblogs.com/chenyanxi123/p/7788770.html
Copyright © 2011-2022 走看看