首页 > 代码库 > play框架之模板

play框架之模板

2024-09-07 22:53:03   218人阅读

现在网站发展日新月异，网页上显示的东西越来越复杂，看看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;
}
};
View Code

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

play框架之模板


联系
我们