2019-10-29静态资源

什么是静态资源?
客户端向服务器端请求的这个资源,服务器端不需要做任何的处理,可以直接响应给客户端的资源,就是静态资源(主要是CSS、JS、images文件、html文件,就是浏览器能够直接运行的文件)

什么是动态资源?
相同的请求地址,可以传递不同的请求参数,得到不同的请求结果,那么这个响应结果就是动态资源,例如网址:http://www.lbb8.con/?id=1http://www.lbb8.com/?id=2

如何实现静态资源访问功能?
在服务器端创建一个专门的文件夹,用来放置这些静态资源,当客户端请求某个静态资源文件时,服务器端将这个静态资源文件直接响应给客户端,这就是静态资源访问功能。

为什么不通过双击文件的形式直接打开静态文件?
通过双击的形式打开文件,只能说明这个文件在你自己的电脑上,这个文件只要你自己能访问到,别人访问不到,如果希望在服务器端这些文件能被用户访问到,我们就需要实现这样一个静态资源访问功能。

实现:
新建文件夹static(静态文件),目录下新建文件夹public(放置静态资源)→将静态资源拷贝在该文件夹下。
在static目录下新建文件app.js(创建网站服务器,并实现静态资源访问功能
app.js

const http = require('http');
const app = http.creatServer();
app.on('request',(req,res)=>{
    res.end('ok');
});
app.listen(3000);
console.log('服务器启动成功');

启动服务器,实现网站的访问
命令行窗口 :

nodemon app.js

浏览器地址栏中输入:

localhost:3000

返回:ok
思考:静态资源如何访问,到用户在地址栏中想要访问首页面,要访问default.html页面,它应该如何访问?
想法①:在服务器当中,default.html在public文件夹中,地址栏访问:localhost:3000/public/default.html(PS:请求地址只是一个字符串标识,它这个地址看起来像路径,但仅仅是看起来,也就是说这个地方请求的路径,和服务器真实的路径是可以不一样的)
想法②:用户访问的时候不需要输入public,仅仅只需要输入localhost:3000/default.html就能访问到这个页面(是可以实现的)
1.通过req.url获取到用户的请求路径,也就是说获取到/default.html,然后再把请求路径转换为文件在服务器上的真实物理路径,然后读取文件的内容,最终把读取的内容,返回到客户端,接下来开始做
切换到app.js中

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const app = http.creatServer();
app.on('request',(req,res)=>{
    // 获取用户的请求路径
    let pathname = url.parse(req.url).pathname;
    // 获得绝对路径(将用户的请求路径转换为实际的服务器硬盘路径)
    let realPath = path.join(__dirname ,'piblic' + pathname);
    // 读取文件(PS:严谨,读取失败要做错误处理)
    fs.readFile(realPath,(error,result)=>{
            if(error != null){
            // 响应报文处理
           res.writeHead(404,{
                  'content-type':'text/html;charset=utf8'
           });
           res.end('文件读取失败');           
           return;
           };
           res.end(result);
    })
    
});
app.listen(3000);
console.log('服务器启动成功');

以上就是一个最近被的静态资源访问代码。
=================================================.
优化
问题①:如果用户什么都没有输入的情况如何访问到index页面。
当客户端的请求路径是‘/’时,就去读index文件就可以了
问题②:当服务器端向客户端做出响应的时候,我们要告诉客户端当前给你的资源类型是什么?在浏览器执行代码时,源代码中会碰到link、image、script标签,他们具有共同的特点,他们可以去外链一些文件。此时html文件和那些文件是不同的文件,当前只是请求了html文件,没有请求link,image,script文件,就会失败,要怎么去指定当前的请求类型呢?该值不可能固定!
引入第三方模块:mime(功能:可以根据你当前请求的路径,分析出资源的类型,然后把类型通过返回值的方式传递给你)
问题③:为什么没有cont-type页面也能正常执行?因为现在使用的是高级浏览器,当你使用一些旧版本浏览器可能会出现问题,这就是网页中可能出现的隐患,所以要指定返回资源的类型
切换命令行工具下载mime模块

npm install mime
// 开启服务器
nodemon app.js

切换到app.js中

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const mime = require('mime');

const app = http.creatServer();

app.on('request',(req,res)=>{
    // 获取用户的请求路径
    let pathname = url.parse(req.url).pathname;
    if(pathname == '/'){
           pathname = '/default.html';
    }else{
           pathname = pathname;
    }
    // 获得绝对路径(将用户的请求路径转换为实际的服务器硬盘路径)
    let realPath = path.join(__dirname ,'piblic' + pathname);
    // 利用mime模块,返回资源类型
    let type = mime.getType(realPath);
    // 读取文件(PS:严谨,读取失败要做错误处理)
    fs.readFile(realPath,(error,result)=>{
           if(error != null){
            // 响应报文处理
           res.writeHead(404,{
                  'content-type':'text/html;charset=utf8'
           });
           res.end('文件读取失败');           
           return;
           };
           // 服务器端响应客户端,告诉客户端资源类型
          res.writeHead(200,{
               'content-type':type
          })
          res.end(result);
    });
    
});
app.listen(3000);
console.log('服务器启动成功');
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,635评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,543评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,083评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,640评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,640评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,262评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,833评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,736评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,280评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,369评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,503评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,185评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,870评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,340评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,460评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,909评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,512评论 2 359

推荐阅读更多精彩内容