nodejs渐入佳境[15]-express框架
原创
©著作权归作者所有:来自51CTO博客作者gopher梦工厂的原创作品,请联系作者获取转载授权,否则将追究法律责任
最简单的服务器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| const express = require('express');
var app = express();
//返回html格式 app.get('/',(req,res)=>{ res.send('<h1>Hello world</h1>'); });
//返回json格式 app.get('/fast',(req,res)=>{ res.send({ name:'json', likes:[ 'reading', 'coding' ] }); }); //监听端口 app.listen(3000);
|
访问:
localhost:3000
localhost:3000/fast
访问静态文件
创建public/help.html
1 2 3 4 5 6 7 8 9 10
| <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>Hello Jonson</h1> </body> </html>
|
express.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| const express = require('express');
var app = express();
// 参数是一个middleware app.use(express.static(__dirname +'/public')); //返回html格式 app.get('/',(req,res)=>{ res.send('<h1>Hello world</h1>'); });
//返回json格式 app.get('/fast',(req,res)=>{ res.send({ name:'json', likes:[ 'reading', 'coding' ] }); }); //监听端口, 第二个回调是开启服务器后调用 app.listen(3000,()=>{ console.log('hello jonson'); });
|
访问:
http://localhost:3000/help.html
会打开public/help.html的页面并显示出来。
动态注入 express template engines
新建views/about.hbs:
1 2 3 4 5 6 7 8 9 10 11
| <!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>{{currentYear}}</h1> <footer>{{pageTitle}}</footer> </body> </html>
|
express.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| const express = require('express'); const hbs = require('hbs'); var app = express();
app.set('view engine','hbs');
// 参数是一个middleware app.use(express.static(__dirname +'/public')); //返回html格式 app.get('/',(req,res)=>{ res.send('<h1>Hello world</h1>'); });
//返回json格式 app.get('/fast',(req,res)=>{ res.send({ name:'json', likes:[ 'reading', 'coding' ] }); });
//动态传递参数。 app.get('/about',(req,res)=>{ res.render('about.hbs',{ pageTitle:'About Page', currentYear:new Date().getFullYear() }); }); //监听端口, 第二个回调是开启服务器后调用 app.listen(3000,()=>{ console.log('hello jonson'); });
|
访问:
localhost/about
模版封装
新建:views/partial/footer.hbs:
1 2 3
| <Header> <footer>{{pageTitle}}</footer> <Header>
|
view/abut.hbs:
1 2 3 4 5 6 7 8 9 10 11
| <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>{{currentYear}}</h1> {{> footer}} </body> </html>
|
express.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| const express = require('express'); const hbs = require('hbs'); var app = express();
hbs.registerPartials(__dirname + '/views/partials'); app.set('view engine','hbs'); // 参数是一个middleware app.use(express.static(__dirname +'/public'));
//返回json格式 app.get('/about',(req,res)=>{ res.render('about.hbs',{ pageTitle:'About Page', currentYear:new Date().getFullYear() }); }); //监听端口, 第二个回调是开启服务器后调用 app.listen(3000,()=>{ console.log('hello jonson'); });
|
访问:
localhost/about
express middleware
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| const express = require('express'); const hbs = require('hbs'); const fs = require('fs'); var app = express();
hbs.registerPartials(__dirname + '/views/partials'); app.set('view engine','hbs'); // 参数是一个middleware app.use(express.static(__dirname +'/public')); //返回html格式 app.get('/',(req,res)=>{ res.send('<h1>Hello world</h1>'); });
//自定义middleware app.use((req,res,next)=>{ var now = new Date().toString(); var log = `${now}:${req.method} ${req.url}`; console.log(log); fs.appendFile('server.log',log+'\n',(err)=>{}); next();
}); //返回json格式 app.get('/fast',(req,res)=>{ res.send({ name:'json', likes:[ 'reading', 'coding' ] }); });
//返回文件,about.hbs在views文件夹下 app.get('/about',(req,res)=>{ res.render('about.hbs',{ pageTitle:'About Page', currentYear:new Date().getFullYear() }); }); //监听端口, 第二个回调是开启服务器后调用 app.listen(3000,()=>{ console.log('hello jonson'); });
|