首先我们新建一个文件夹 demo-test-node-1
目录目录如下
-- blog_recents.js
--template.html
--titles.jspn
首先我们新建一个 template.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> demo-test-node-1 </title> </head> <body> <h1>laters Posts</h1> <ul> <li>%</li> </ul> </body> </html>
这个页面就完成了
接下来我们只做 blog_recents.js
var http = require('http'); var fs = require('fs'); var server = http.createServer(function(req,res){ if(req.url == '/'){ fs.readFile('./titles.json',function(err,data){ if(err){ console.log(err); res.end('Server error'); }else{ var titles = JSON.parse(data.toString()); fs.readFile('./template.html',function(err,data){ if(err){ console.log(err); res.end('Server error'); }else{ var temp = data.toString(); var html = temp.replace('%',titles.join('</li><li>')); res.writeHead(200,{'Content-Type':'text/html'}); res.end(html); } }); // fs end } }) // fs end } // if end }) server.listen(1234,'127.0.0.1',function(){ console.log('127.0.0.1:1234'); });
启动一个http 服务器 加载静态文件 template.html 和 titles.json 文件
接下来我们新建一个 titles.json文件
[ "以项目为驱动,在项目中快乐学习,解决软件开发学习枯燥", "时间长,效果不明显,容易放弃等问题。" ]
只做完成后,cd 进入你当前的目录 node blog_recent.js 运行 是不是很简单呢
效果图如下
至此demo完成!
此项目demo地址 : https://github.com/guopz/demo-test-node-1
扩展
晋级项目 个人博客
demo地址 :https://github.com/guopz/nodejs-blog
有兴趣的同学可以clone一下