接下来进入我不擅长的页面部分了。规划页面分为side和main,side中提供时间选择框/类型下拉选择框和提交按钮;main中展示最后形成的chart。
时间选择框是用js和css完成的,这个网上有很多,不过要同时支持多浏览器和分钟级别的选项的,目前就发现一个好用的。下载地址如下:http://chenlinux.com/images/uploads/Calendar.zip
然后创建cachemoni/public/cdn.html如下:
```html

CDN Monitor ``` cachemoni/public/side.html如下: ```html select_time
  • begin
  • end

  • ``` cachemoni/views/charts.tt如下: ```html FusionCharts Free Documentation
    FusionCharts. ``` cachemoni/lib/cachemoni.pm中相关函数如下: ```perl use Time::Local; get '/cdncharts' => sub { my $type = params->{chartstype}; my $begin = unix_time_format(params->{timefrom}); my $end = unix_time_format(params->{timeto}); my $req_url = "/xml?begin=${begin}&end=${end}&type=${type}"; my $line = 1 if $type eq 'time'; template 'charts', { line => $line, url => "$req_url", }; }; sub unix_time_format { my $time = shift; if ( $time =~ m/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2})/ ) { return timelocal('00',$5,$4,$3,$2-1,$1-1900); }; };``` 这里比较怪的是,如果setDataURL里传的arg是直接2011-08-01 11:00的格式,fusionchart.js不会发起请求,只有1311111111才行,所以只能在用Time::Local模块转换时间了。 最终访问结果如下: