/** * 使用express来实现对于静态资源的控制。 */ let express = require('express'); let fs = require('fs'); let path = require('path'); var app = express(); app.use(express.static(path.join(__dirname, './public'))); app.all('https://www.jb51.net/', function(req, res){ console.log("======================================="); console.log("请求路径："+req.url); var filename = req.url.split('https://www.jb51.net/')[req.url.split('https://www.jb51.net/').length-1]; var suffix = req.url.split('.')[req.url.split('.').length-1]; console.log("文件名：", filename); if(req.url==='https://www.jb51.net/'){ res.writeHead(200, {'Content-Type': 'text/html'}); res.end(get_file_content(path.join(__dirname, 'html', 'index.html'))); }else if(suffix==='css'){ res.writeHead(200, {'Content-Type': 'text/css'}); res.end(get_file_content(path.join(__dirname, 'public', 'css', filename))); }else if(suffix in ['gif', 'jpeg', 'jpg', 'png']) { res.writeHead(200, {'Content-Type': 'image/'+suffix}); res.end(get_file_content(path.join(__dirname, 'public', 'images', filename))); } }); function get_file_content(filepath){ return fs.readFileSync(filepath); } app.listen(8080);
index.html
因为刚才使用了静态资源控制，也就是说我们可以简化HTML页面中对于静态资源的路径拼写。比如：
原来在HTML页面中要这么写：
<img src='https://www.jb51.net/public/images/1.gif' />
现在只需要这么写了：
<img src='https://www.jb51.net/images/1.gif' />
看起来就是少了个 /public， 但是实际上通过这一点就可以表明express 其实帮我们省去了很多枯燥的工作内容。
然后打开浏览器就可以看到具体的静态资源内容了。
那么对于不同的图片类型的支持程度如何呢？
下面修改一下HTML页面：
<html> <head> <meta charset="UTF-8"> <title>My Index Page</title> <link href="https://www.jb51.net/css/index.css" > </head> <body> <h1>It Works.</h1> <hr> <img src="https://www.jb51.net/images/1.gif" /><br> <img src="https://www.jb51.net/images/2.jpg" alt=""><br> <img src="https://www.jb51.net/images/3.png" alt=""><br> </body> </html>
打开浏览器查看对于gif, png, jpg的支持如何？
