一、问题:
大家都知道在HTML中有三种使用CSS的方式,分别是:内联样式、内部样式、外部样式。外部样式,在head部分使用link标签引入外部写入css样式表的文件,示例如下:,同时,在项目根目录下创建index.css文件,并写入样式。修改后我们刷新页面,发现页面背景色没有变成绿色, 不仅如此,我们在标签里引入一张图片。发现不仅引入的外部样式表不起作用,图片也同样无法正常显示。这是为什么呢?
当然,我们不能光想,而是要去分析,我们打开chrome浏览器的开发者模式,在右侧找到 network并点击查看 该页面的有关请求,如果没有在刷新一下,我们可以看到浏览器为了渲染页面发了三次请求:
第一个请求的是’/‘, 服务器给我们返回了index.html文件;
第二个请求的是’/index.css’, 但返回内容还是index.html文件;
第三个请求的是’/skills.jpg’, 但返回内容还是index.html文件;
这是为什么呢?我们先看看当下 index.js文件中内容处理的部分:
app.use(ctx => {
ctx.response.type = 'html';
ctx.response.body = fs.createReadStream('index.html')