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.indexvar 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 htmlhtml(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 functionvar fn = jade.compileFile('template/index.jade', options);// Render the functionvar 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就不多说了。