jade模板引擎使用记录

需求：要将动态网站转换为静态网站

思路：找一个模板，写脚本定时生成静态页面

流程开始：

找到的模板引擎为jade

开始写demo:

安装jade

$ npm install jade --global

然后使用node请求数据保存本地文件.json

gen_model.js代码：

var request = require('request'); //请求模块
var fs = require('fs');　//文件读取模块
var path = require('path'); //系统路径模块

var ModelObject = function () {
};
ModelObject.prototype = {
//请求api把得到的数据转换为json文件
get_data: function convert_api_post_data_to_json(params) {
console.log(params);
request.post({url: 'http://api××××/api', form: params}, function (error, response, body) {
if (!error && response.statusCode == 200) {
fs.writeFile('../gen_json/' + params.filename + '.json', body, ['utf-8']);
}
});
}
};
var model_object = new ModelObject();
//model.index
var caiqiu_focus_02 = {'cmd': 'caiqiu_focus_02', 'gzip': '0','filename':'caiqiu_focus_02'};
var football_home_02 = {'cmd': 'football_home_02', 'gzip': '0','filename':'football_home_02'};
model_object.get_data(caiqiu_focus_02);
model_object.get_data(football_home_02);

保存运行node gen_model

就会看到本地目录中多了俩个文件，而且内容正确

那么接下来就是读取文件生成静态html

先上模板代码：index.jade

doctype html
html(lang='en')
head
title 手机彩球网
meta(charset='utf-8')
meta(name='keywords',content='手机彩球网')
meta(name='description',content='亿万大数据的足球精准预测')
meta(name='viewport', content = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no')
link(href='css/pure.min.css',rel='stylesheet')
link(href='css/index.css',rel='stylesheet')
link(rel='shortcut icon',href='favicon.png')
script(src='/js/libs/require.js',data-main='/js/main.js')
body
div#slideBox.slideBox
div.bd
ul
-each item in locals.caiqiu_focus_02.resp
li
if item.params.url
a.pic(href=item.params.url)
img(src=item.image)
else
a.pic(href='http://m.caiqr.com/share.html')
img(src=item.image)

div.hd
ul
nav._navicon.pure-g
dl.navicon.pure-u-1-4
a(href='/list/sporttery.html')
dt.icon-f-jctj
img(src='images/nav-01.png')
dd 竞彩推荐
dl.navicon.pure-u-1-4
a(href='/list/all.html')
dt.icon-f-mryc
img(src='images/nav-03.png')
dd 全部预测
dl.navicon.pure-u-1-4
a(href='/list/recommend.html')
dt.icon-f-jxbs
img(src='images/nav-02.png')
dd 精选比赛
dl.navicon.pure-u-1-4
a(href='/list/living.html')
dt.icon-f-bfzb
img(src='images/nav-04.png')
dd 比分直播
div#content2
-var homedata = locals.football_home_02
-var seconddata = locals.football_home_02.resp[0].a_01
if seconddata.content
a(href="http://m.caiqr.com/share.html")
section.beplaying
dl.pure-g
dt.pure-u-2-3
p.beplaying-p#beplay_title
span=seconddata.title
p.beplay-name#beplay_team.
#{seconddata.content.host_name}
<span> VS</span>
#{seconddata.content.away_name}
p.beplay-concept
img.forecast_icon(src="images/forecast_icon.png")
span#jxbsforecast=common.get_forecast(seconddata.content.forecast)
span.ycgl 预测概率
span.pecent#jxbspercent=seconddata.content.caiqiu_index + '%'
dd.pure-u-1-3#beplay_img
img(src=seconddata.image)
section.hot-and-end
dl.pure-g
dt.hots.pure-u-1-2
a(href='/list/end.html')
dl.pure-g
dt.pure-u-1-24.pd
dd.pure-u-14-24.pd
h1#ends-title=homedata.resp[1].a_02.title
p#ends-content=homedata.resp[1].a_02.content
dd.pure-u-9-24#ends-img
img(src=homedata.resp[1].a_02.image)
dd.ends.pure-u-1-2
a(href='/list/hot.html')
dl.pure-g
dt.pure-u-1-24.pd
dd.pure-u-14-24.pd
h1#hots-title=homedata.resp[2].a_03.title
p#hots-content=homedata.resp[2].a_03.content
dd.pure-u-9-24#hots-img
img(src=homedata.resp[2].a_03.image)
section.list-title
p 最新预测
-var newst = locals.football_home_02.resp[3].a_04;
div#list-newest.list-new
each item in newst
a(href='/detail/newdata.html?MatchId='+item.match_id)
section
div.top.pure-g
p.pure-u-1-2.m_name=item.season_pre+item.group_pre+'>>'
p.pure-u-1-2.m_time='今日' + item.match_time.split(' ')[1].substring(0, 5)
div.middle.pure-g
div.left.pure-u-2-3
p.t_name.m-t-10
img(width="16" src=item.host_team_image)
|#{item.host_name}
p.t_dyzb.pure-g
span.pure-u-1-2  
span.pure-u-1-2
img(width="12" src='images/live_icon.png')
|#{'动画直播'}
p.t_name
img(width="16" src=item.away_team_image)
|#{item.away_name}
div.right.pure-u-1-3(id=item.match_id)
p(style="line-height:64px;text-align:right;margin-right:7px;color:#77AA22;font-size:26px;font-weight:100;")
span=item.caiqiu_index
span(style='font-size:18px;') %
div.bottom.pure-g
dt.pure-u-3-5
img.forecast_icon(src='images/forecast_icon.png')
each jtem in item.forecast.split(',')
case parseInt(jtem)
when 3
span 主胜
when 1
span 平局
when 0
span 主负
dd.pure-u-2-5
i
span #{item.benefit}
footer

然后模板生成html的index.js:

var fs = require('fs');
var jade = require('jade');
var caiqiu_focus_02 = JSON.parse(fs.readFileSync('../gen_json/caiqiu_focus_02.json'));
var football_home_02 = JSON.parse(fs.readFileSync('../gen_json/football_home_02.json'));
var locals = {'caiqiu_focus_02':caiqiu_focus_02,'football_home_02':football_home_02};
console.log(locals);
var options = {
pretty:true
};
// Compile a function
var fn = jade.compileFile('template/index.jade', options);

// Render the function
var html = fn(locals);
console.log(html);
fs.writeFile("index.html", html);运行node index.js会发现更目录生成了index.html
ok接下来把俩个步骤串起来，这里用到了gulp.js

安装gulp之后

gulpfile.js:

var gulp = require('gulp');

//　请求数据写入文件中
var exec = require('child_process').exec;
function execfun(params,cb){
// 执行shell脚本
exec(params, function(err) {
if (err){
console.log(err);
}
else{
console.log(params);
cb();//告诉系统任务完成
}
});
}

gulp.task('gen_model', function (cb) {
execfun('node ../nodeserver/gen_model.js',cb);
});

gulp.task('jadeindex',['gen_model'],function (cb) {
execfun('node template/index.js',cb);
});

gulp.task('default',['gen_model','jadeindex']);

然后terminal:$ gulp
就会先请求一次api,将数据保存到本地，然后根据本地数据生成html，接下来就是定时任务刷新了，这块主要是用jenkins就不多说了。