现在网站发展日新月异，网页上显示的东西越来越复杂，看看HTML源码就知道，这东西不是正常人能拼出来的。因此模板应运而生，自我感觉，好的模板应该支持一下功能：

1.支持HTML代码段的复用，即在HTML里面可以非常方便的include常用的html代码，比方title、header和boot等；

2.支持HTML文件的继承，有些HTML文件从结构来看，完全相同，只是一些具体细节或数据有差别，这个时候就可以创建一个公共模板，其它类似的文件对其进行extend;

3.在继承模板文件的基础上，最好能支持HTML的模块化，这样只需要重写不同的地方，相同的地方可以忽略。

PS：感觉django自带的模板就特别好用，基本上以上的功能都实现了。

言归正传，play2自带的模板系统也支持以上功能，上代码app_active.scala.html：

@(push_date:List[Long],adr_rate:List[Integer],ios_rate:List[Integer],actives:List[models.AppActive],daterange: Form[controllers.Application.DateForm])

@main(title="app_active"){

    @helper.form(action = routes.Application.app_active()) {

        <fieldset>

        @helper.inputText(daterange("start_date"))

        @helper.inputText(daterange("end_date"))

        </fieldset>

        <input type="submit">

        }

<p></p>

  <div id="main" style="width: 950px;height:580px;"></div>

  <script type="text/javascript">

          var myChart = echarts.init(document.getElementById('main'));

          var push_date =@push_date;

          var new_date=[]

          for(i=0;i<push_date.length;i++){

              var temp=new Date(push_date[i]);

              new_date.push(temp.Format("yyyy-MM-dd"));

          }

          var adr_rate = @adr_rate;

          var ios_rate = @ios_rate;

          // 指定图表的配置项和数据

          @bar_tem2()

          option.series[0].name='adr活跃'

          option.series[1].name='ios活跃'

          option.series[0].stack='one'

          option.series[1].stack='one'

          option.legend.data=['adr活跃','ios活跃']

          option.dataZoom=[{type: 'slider',start: 0,end: 100 },{type:'inside',start: 0,end: 100}]

          myChart.setOption(option);

  </script>

} {<table border="1">

    <tr>

        <th>Date</th>

        <th>ADR</th>

        <th>IOS</th>

    </tr>@for(active <- actives) {

    <tr>

        <td>@active.push_date</td>

        <td>@active.adr_rate</td>

        <td>@active.ios_rate</td></tr>

}</table>

}

这是一个实现从表单填数据，查询数据库并返回数据，显示成图表的功能。

1.第一行的数据是从controllers文件种传递过来的，下面是controllers中Application的代码：

public static Result app_active(){

        Form<DateForm> daterange=Form.form(DateForm.class);

        DynamicForm in   = Form.form().bindFromRequest();

        if(in.get("start_date")==null){

            String start_date    = "2016-12-29";

            String end_date    = "2017-01-01";

            List<AppActive> actives=AppActive.find.where().between("push_date",start_date,end_date).findList();

            List<Long> push_date=new ArrayList<Long>();

            List<Integer> adr_rate=new ArrayList<Integer>();

            List<Integer> ios_rate=new ArrayList<Integer>();

            for(AppActive active:actives){

                push_date.add((active.push_date).getTime());

                adr_rate.add((Integer) active.adr_rate);

                ios_rate.add((Integer) active.ios_rate);

            }

            return ok(views.html.app_active.render(push_date,adr_rate,ios_rate,actives,daterange));

        }else {

            String start_date = in.get("start_date");

            String end_date = in.get("end_date");

            List<AppActive> actives = AppActive.find.where().between("push_date", start_date, end_date).findList();

            List<Long> push_date = new ArrayList<Long>();

            List<Integer> adr_rate = new ArrayList<Integer>();

            List<Integer> ios_rate = new ArrayList<Integer>();

            for (AppActive active : actives) {

                push_date.add((active.push_date).getTime());

                adr_rate.add((Integer) active.adr_rate);

                ios_rate.add((Integer) active.ios_rate);

            }

            return ok(views.html.app_active.render(push_date, adr_rate, ios_rate, actives, daterange));

        }

    }

2.第二行@main,意思是这个html文件继承自main.scala.html，main.scala.html文件主要定义了HTML文件引用的js/css/png文件，原文如下：

@(title:String)(content:Html)(data:Html)

<!DOCTYPE html>

<html>

<head>

    <title>@title</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    @*<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/main.css")" />*@

    <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")" />

    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css" rel="stylesheet"/>

    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js" ></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    @*<script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" ></script>*@

    <script src="@routes.Assets.at("javascripts/dateformat.js")" ></script>

    <script src="@routes.Assets.at("javascripts/datepicker.js")" ></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.2.2/echarts.min.js"></script>

    <script src="http://echarts.baidu.com/asset/map/js/china.js"></script>

</head>

<body>

@content

@data

</body>

</html>

3.第三行@helper是play2的表单文件，在此不多复述。

4.中间还有一个@bar_tem2(),是引用的一段公用js文件，文件名即为bar_tem2.scala.html,内容如下：

var option = {

title: {

text: '',

left:'center',

},

legend: {

data: ['bar', 'bar2'],

x: 'center',

},

toolbox: {

// y: 'bottom',

left: 'left',

top: 'top',

feature: {

magicType: {

type: ['stack', 'tiled','line','bar']

},

restore:{},

dataView: {},

saveAsImage: {

pixelRatio: 2

}

}

},

//浮层

tooltip : {

trigger: 'axis'

},

xAxis: {

data: new_date,

silent: false,

splitLine: {

show: false

}

},

yAxis: {

},

series: [{

name: 'bar',

type: 'bar',

data: adr_rate,

animationDelay: function (idx) {

return idx * 10;

}

}, {

name: 'bar2',

type: 'bar',

data: ios_rate,

animationDelay: function (idx) {

return idx * 10 + 100;

}

}],

animationEasing: 'elasticOut',

animationDelayUpdate: function (idx) {

return idx * 5;

}

};

5.最后一段采用一个for循环，对actives进行遍历，将一组二维数据展示为一个表格

play框架之模板的更多相关文章

  1. Django(框架、模板)

    day65 参考:https://www.cnblogs.com/liwenzhou/p/8296964.html Django框架的设计模式借鉴了MVC框架的思想,也是分成三部分,来降低各个部分之间 ...

  2. 第三百一十节，Django框架，模板语言

    第三百一十节,Django框架,模板语言 模板语言就是可以将动态数据在html模板渲染的语言 一.接收值渲染 locals()函数,写在请求响应render()函数里,可以将逻辑处理函数里的变量传到h ...

  3. Django框架之模板语法【转载】

    Django框架之模板语法 一.什么是模板? 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法分类 一.模板语法之变量:语法为 {{ }}: 在 Django ...

  4. TP框架中模板赋值

    TP框架中模板赋值 $this->assign('name',$value); $this->name = $value; // 两种写法是等效的

  5. Django框架 之 模板语言

    Django框架 之 模板语言 浏览目录 标签 过滤器 一.标签 Tags 1.普通变量 普通变量用{{ }} 变量名由数字.字母.下划线组成 点.在模板语言中用来获取对象相应的属性值 示例: 1 2 ...

  6. Django框架2——模板

    django框架2--模板 直接将HTML硬编码到你的视图里却并不是一个好主意: 对页面设计进行的任何改变都必须对 Python 代码进行相应的修改. 站点设计的修改往往比底层 Python 代码的修 ...

  7. Django框架04 /模板相关、别名/反向解析/路由分发

    Django框架04 /模板相关.别名/反向解析/路由分发 目录 Django框架04 /模板相关.别名/反向解析/路由分发 1. 语法 2. 变量/万能的点 3 . 过滤器 4. 标签Tags 5. ...

  8. 动手写一个简单的Web框架（模板渲染）

    动手写一个简单的Web框架(模板渲染) 在百度上搜索jinja2,显示的大部分内容都是jinja2的渲染语法,这个不是Web框架需要做的事,最终,居然在Werkzeug的官方文档里找到模板渲染的代码. ...

  9. 来玩Play框架03 模板

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在上一章节中,我把字符串通过ok()返回给客户.我可以把一个完整的html页面放入 ...

  10. SqlSugar框架T4模板的使用

    一.T4模板说明 1.T4模板是用来生成Model层实体类的 2.文件后缀为.tt 3.需要修改配置主要有:引用的SqlSugar.dll的位置.生成实体类的位置及生成实体类的命名空间 4.T4模板生 ...

随机推荐

  1. 编程算法 - 背包问题(三种动态规划) 代码(C)

    背包问题(三种动态规划) 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目參考: http://blog.csdn.net/caroline_wen ...

  2. gdal库中设置prj4库全路径的用法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 gdal库实现投影转换之类的功能实际上底层都是调用prj4库的功能.如果gdal使用非静态的方式集成prj4库,实际上 ...

  3. C# 获取Windows系统：Cpu使用率，内存使用率，Mac地址，磁盘使用率

    一.获取CPU使用率: #region 获取CPU使用率         #region AIP声明          [DllImport("IpHlpApi.dll")]   ...

  4. 让你编写的控件库在 XAML 中有一个统一的漂亮的命名空间（xmlns）和命名空间前缀

    原文 让你编写的控件库在 XAML 中有一个统一的漂亮的命名空间(xmlns)和命名空间前缀 在 WPF XAML 中使用自己定义的控件时,想必大家都能在 XAML 中编写出这个控件的命名空间了.然而 ...

  5. Win10局域网内无法共享的解决方法分享（开启Server和ComputerBrowser服务，其它文章也不错）

    局域网共享是办公环境下经常使用的,而有些用户反应在升级到win10系统后,网络总是无法共享,给用户带来了很大的困扰,如果你也遇上这样的情况,并通过一些方法无较后,不妨尝试下小编提供的方法. 如果在Wi ...

  6. WPF自定义LED风格数字显示控件

    原文:WPF自定义LED风格数字显示控件 版权声明:本文为博主原创文章,转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP11199988899/article/de ...

  7. JavaScript:undefined And null差异

    班吃饭的时候,同事偶然问了一个问题:undefined和null究竟有什么差别?无法回答,回去查阅相关文档,算了有了一个了解,做相关的总结.在開始之前,请看例如以下代码,算是抛出这个问题: conso ...

  8. C++ 异常机制分析（C++标准库定义了12种异常，很多大公司的C++编码规范也是明确禁止使用异常的，如google、Qt）

    阅读目录 C++异常机制概述 throw 关键字 异常对象 catch 关键字 栈展开.RAII 异常机制与构造函数 异常机制与析构函数 noexcept修饰符与noexcept操作符 异常处理的性能 ...

  9. window下nodejs爬取gb2312网页出现乱码的解决方案

     发布于 2012-8-22 18:15  5230 次浏览  最后一次编辑是 2013-2-18 22:31 linux环境下,我们可以通过 iconv 这个C++模块来处理Node.JS不支持的字 ...

  10. LINUX 蓝牙耳机的配置方法

    由于经常使用SKYPE聊天打电话,一直觉得被拴在电脑前面不是很自由,终于在一个周末,一激动买了一个蓝牙耳机.经过几天的努力在Linux/Debian上用了起来,现在就把这个配置过程和大家分享. 第一 ...