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 © , All Rights Reserved

        </div>

</div>

header.html

<div class="aw-footer-wrap">

        <div class="aw-footer">

            Copyright © , 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>

效果：

koa-artTemplate 的使用的更多相关文章

  1. koa art-template模板引擎的使用

    art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

  2. koa 基础（二十六）数据库 与 art-template 模板 联动 --- 编辑数据、删除数据

    1.通过 ObjectID 获取 _id 根目录/module/db.js /** * DB库 */ var MongoDB = require('mongodb'); var MongoClient ...

  3. koa 基础（二十五）数据库 与 art-template 模板 联动 --- 新增数据

    1.视图层 根目录/views/index.html <!DOCTYPE html> <html lang="en"> <head> <m ...

  4. js模板引擎art-template使用方法

    art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...

  5. koa 搭建模块化路由/层级路由

    搭建node项目目录以及基本的文件 初始化package.json文件 执行下面命令生成package.json文件 npm init --yes 创建项目目录 创建路由目录routes,存放静态资源 ...

  6. koa 基础（十三）koa-art-template 模板引擎的使用

    1.项目目录 2.app.js /** * http://aui.github.io/art-template/koa/ * 1.npm install --save art-template * n ...

  7. artTemplate模版引擎的使用

    artTemplate: template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不 ...

  8. koa2入门--09.art-template高速模板引擎的使用

    首先在项目文件夹下使用 cmd,输入:npm install --save art-template koa-template art-template语法参考:http://aui.github.i ...

  9. Node.js实现RESTful api,express or koa?

    文章导读: 一.what's RESTful API 二.Express RESTful API 三.KOA RESTful API 四.express还是koa? 五.参考资料 一.what's R ...

  10. 性能卓越的js模板引擎--artTemplate

    artTemplate能够将数据与View视图的分离,充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现. 在 chrome 下渲染效率测试中分别是知名引擎 Mu ...

随机推荐

  1. 由hbase.client.scanner.caching参数引发的血案（转）

    转自:http://blog.csdn.net/rzhzhz/article/details/7536285 环境描述 Hadoop 0.20.203.0Hbase 0.90.3Hive 0.80.1 ...

  2. MVC默认提供了一个异常过滤器 HandleErrorAttribte特性

    这一篇记录MVC默认提供了一个异常过滤器 HandleErrorAttribte,下一篇介绍自定义异常过滤特性. 参考引用:https://www.cnblogs.com/TomXu/archive/ ...

  3. 转载关于struts命名空间的一则报警

    今天花了点时间把struts2警告事件彻底的测试了一边,终于有点眉目了.希望能给其他人带来一点帮助.文章属于原创.并不需要转载的时候注明出处,而是希望转载的朋友一定要看明白本文内容再转载,因为我你都清 ...

  4. SpringMvc返回给前端数据@ResponseBody响应体【支持Ajax】

    1).在Controller中写 //@ResponseBody响应体是jackson包提供的 用于将Controller的方法返回的对象,通过HttpMessageConverter接口转换为指定格 ...

  5. python--有参装饰器、迭代器

    有参装饰器的引入: import time import random from functools import wraps def timmer(func): @wraps(func) def w ...

  6. python--闭包函数、装饰器

    先来点补充. x= def foo(): print(x) x= foo() 结果: x= def foo(): global x x= print(x) foo() print(x) 结果: x= ...

  7. Druid数据源配置入门

    Druid是什么 Druid首先是一个数据库连接池.Druid是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.BoneCP.Proxool.JBos ...

  8. 【Flutter学习】基本组件之BottomNavigationBar底部导航栏

    一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...

  9. mysql性能查看 命中率 慢查询

    网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...

  10. <自动化测试>之<使用unittest Python测试框架进行参数化测试>

    最近在看视频时,虫师简单提到了简化自动化测试脚本用例中的代码量,而python中本身的参数化方法用来测试很糟糕,他在实际操作中使用了parameterized参数化... 有兴趣就查了下使用的方法,来 ...