zoukankan      html  css  js  c++  java
  • koa-artTemplate 的使用

    1.父页面

    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>我的音乐</title>
        <!--加载资源包-->
        {{include '../particles/link.html'}}
    </head>
    
    <body>
        <!--引入头部-->
        {{include '../particles/header.html'}}
        <!--中间留坑-->  {{block 'content'}}{{/block}}
    <!--引入底部-->
        {{include '../particles/footer.html'}}
    
    </body>
    
    </html>

    2.子页面

    {{extend './layout/main.html'}}
    {{block    'content'}}
        <div class="container">
            <form id="form" method="post" action="/">
                <div class="form-group">
                    <label for="">歌曲编号</label>
                    <input type="text" name="id" class="form-control" placeholder="请输入歌曲编号">
                </div>
                <div class="form-group">
                    <label for="">歌曲标题</label>
                    <input type="text" name="title" class="form-control" placeholder="请输入歌曲标题">
                </div>
                <div class="form-group">
                    <label for="">歌曲时长</label>
                    <input type="text" name="time" class="form-control" placeholder="请输入歌曲时长">
                </div>
                <div class="form-group">
                    <label for="">歌手</label>
                    <input type="text" name="singer" class="form-control" placeholder="请输入歌手姓名">
                </div>
                <div class="form-group">
                    <label for="">歌曲文件</label>
                    <input type="file" name="file">
                    <p class="help-block">请上传歌曲文件.</p>
                </div>
                <button type="submit" class="btn btn-success">点击添加</button>
            </form>
        </div>
    {{/block}}

    3. 拆分的页面

    footer.html

    <div class="aw-footer-wrap">
            <div class="aw-footer">
                Copyright © 2016, All Rights Reserved
            </div>
    </div>

    header.html

    <div class="aw-footer-wrap">
            <div class="aw-footer">
                Copyright © 2016, All Rights Reserved
            </div>
    </div>

    link.html

    <link href="/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="/public/vender/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/public/css/icon.css" />
    <link href="/public/css/common.css" rel="stylesheet" type="text/css" />
    <link href="/public/css/link.css" rel="stylesheet" type="text/css" />
    <link href="/public/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/public/vender/jquery/dist/jquery.js" type="text/javascript"></script>
    <script src="/public/vender/bootstrap/dist/js/bootstrap.js"></script>

    效果:

  • 相关阅读:
    session概述
    Flask实现登录功能【附完整Demo】(转)
    Python __repr__()方法:显示属性(转)
    Python使用SQLAlchemy连接数据库CRUD
    网络基础知识集合
    面向切面编程AOP
    SQL基础 insert table_name_1 (field1,field2,...) select value1,value2,... from table_name_2 ...
    java中char类型的变量为什么可以赋值为整型数字?
    iOS应用生命周期
    视图生命周期与视图控制器生命周期
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/10184550.html
Copyright © 2011-2022 走看看