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就不多说了。