Node.js教程基于Express4的动态页面静态化详解-职坐标

Node.js教程基于Express4的动态页面静态化详解

沉沙 2018-09-04 来源：阅读 1821 评论 0

摘要：本篇教程介绍了Node.js教程基于Express4的动态页面静态化详解，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

本篇教程介绍了Node.js教程基于Express4的动态页面静态化详解，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

Gulpfile.js

1 var jade=require(‘gulp-jade‘);
2
3 gulp.task(‘jade‘,function() {
4     gulp.src(‘./views/bokeDetail.jade‘)
5         .pipe(jade({pretty:true}))
6         .pipe(gulp.dest(‘./public/famanoder/‘));
7 });

bokeDetail.templ.js

1 var html=function(id,title,subtitle,time,from,contents){
2          //传递动态数据
3          return ‘<html><head></head><body>‘+动态数据+‘</body></html>‘;
4 }
5 //片段，实际情况而定

bokeDetail.js（router）

1 //......
2 //引入对应静态模块
3 var boketempl=require(‘./templs/bokeDetail.templ.js);
4
5 //依旧读取数据
6 //传递数据：如，id，title，content，comments
7 //生成静态页面到指定目录
8 function createStaticPage(id，title，content，comments，fn){
9                 var path=‘./public/famanoder/‘;
10                 var html=boketempl(id，title，content，comments);
11                 var ws=fs.createWriteStream(path+id+‘.html‘);
12         ws.write(html,function(err) {
13             console.log(‘writePage:‘+path+id+‘.html‘);
14             fn&&fn();
15         });
16         ws.on(‘drain‘,function() {
17             ws.end();
18         });
19 }

       ok,程序执行后静态页面就会带着动态数据生成到public下的famanoder目录了；下面还是在bokeDetail.js（router）里将response直指上面生成的静态页面；

1         var pathname=url.parse(req.url).pathname;
2         var realpath=‘./public/famanoder/‘+pathname.substr(pathname.lastIndexOf(‘/‘)+1)+‘.html‘;
3         var type=‘text/html‘;
4         var extname=‘html‘;
5         fs.exists(realpath,function(exist){
6             if(!exist){console.log(101);
7                 res.writeHead(404,{
8                     ‘content-type‘:‘text/plain‘
9                 });
10                 res.write(‘The Resourse ‘+pathname+‘ was Not Found!‘);
11                 res.end();
12             }else{
13                 fs.readFile(realpath,‘binary‘,function(err,file){
14                     console.log(11);
15                     if(err){
16                         res.writeHead(500,{
17                             ‘content-type‘:‘text/plain‘
18                         });
19                         res.end();
20                     }
21                     if(extname.match(config.fileMatch)){
22                         var expires=new Date();
23                         expires.setTime(expires.getTime()+config.maxAge*1000);
24                         res.setHeader(‘Expires‘,expires.toUTCString());
25                         res.setHeader(‘cache-control‘,‘max-age=‘+config.maxAge);
26                     }
27                     fs.stat(realpath,function(err,stat){
28                         var lastModified=stat.mtime.toUTCString();
29                         res.setHeader(‘Last-Modified‘,lastModified);
30
31                         if(req.headers[‘if-modified-since‘]&&lastModified==req.headers[‘if-modified-since‘]){
32                             console.log(0);
33                             res.writeHead(304,{
34                                 ‘content-type‘:type
35                             });
36                             res.end();
37                         }else{
38                             var raw=fs.createReadStream(realpath);
39                             var acceptEncoding=req.headers[‘accept-encoding‘]||‘‘;
40                             var matched=extname.match(/css|js|html/ig);
41                             if(matched&&acceptEncoding.match(/\bgzip\b/)){
42                                 console.log(1);
43                                 res.writeHead(200,{
44                                     ‘content-type‘:type,
45                                     ‘Content-Encoding‘:‘gzip‘
46                                 });
47                                 raw.pipe(zlib.createGzip()).pipe(res);
48                             }else if(matched&&acceptEncoding.match(/\bdeflate\b/)){
49                                 console.log(2);
50                                 res.writeHead(200,{
51                                     ‘content-type‘:type,
52                                     ‘Content-Encoding‘:‘deflate‘
53                                 });
54                                 raw.pipe(zlib.createDeflate()).pipe(res);
55                             }else{
56                                 console.log(3);
57                                 res.writeHead(200,{
58                                     ‘content-type‘:type
59                                 });
60                                 raw.pipe(res);
61                             }
62                         }
63                     });
64                 });
65             }
66         });

      再次访问详情页，看看秒开了吧，纯静态的，路由没变，url没改，维护也很简单，只要改下bokeDetail.templ.js就可以了；没办法啊，可能在大侠眼里这样很愚蠢，就当逗您一笑吧；类似这种搞法，现在小站全部页面都静态化了，而且完全照顾到了SEO；