详解js静态资源文件请求的处理


Posted in Javascript onAugust 01, 2017

本文实例为大家分享了js静态资源文件请求的处理,供大家参考,具体内容如下

html文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="index.css" type='text/css' charset='utf-8'>
</head>
<body>
 <div class='box' id='box'></div>
 <script charset='utf-8' src='index.js'></script>
</body>
</html>

css文件

*{
 margin:0;
 padding:0;

}
html,body{
 font-size:14px;
 color:#000;
}
.box{
 margin:50px auto;
 width:300px;
 height:300px;
 background:#e3bd83;
 border:10px solid #e0f2be;
}

JS文件

var box = document.getElementById('box');
box.onclick = function(){
 this.style.background = "red"
}

server文件

var http = require('http'),
 fs = require('fs'),
 url = require('url');
//创建一个服务
var server1 = http.createServer(function(req,res){
 //解析客户端请求地址中的文件的目录名称以及传递给当前服务器的数据内容
 var urlObj = url.parse(req.url,true),
  pathname = urlObj["pathname"],
  query = urlObj["query"];
 //简写 try catch捕获异常 防止请求资源文件不存在 我们不加try catch服务会终止。这样不好,所以我们添加try catch捕获异常
 //处理静态资源文件的请求(HTML/CSS/JS...) ->前端路由
 var reg = /\.(HTML|JS|CSS|JSON|TXT|ICO)/i;
 if(reg.test(pathname)){
  //获取请求文件的后缀名
  var suffix = reg.exec(pathname)[1].toUpperCase();
  //根据请求文件的后缀名获取到当前文件的MIME类型
  var suffixMIME = "text/plain";//TXT文本对应的
  switch(suffix){
   case "HTML":
    suffixMIME = "text/html";
    break;
   case "CSS":
    suffixMIME = "text/css";
    break;
   case "JS":
    suffixMIME = "text/javascript";
    break;
   case "JSON":
    suffixMIME = "application/json";
    break; 
   case "ICO":
    suffixMIME = "application/octet-stream";
    break;
  }
  try{
   //按照指定的目录读取文件中的内容或者代码(读取出来的内容都是字符串格式的)
   var conFile = fs.readFileSync("."+pathname,"utf-8");

   //重写响应头信息:告诉客户端的浏览器我返回的内容是什么样的MIME类型,指定返回的内容的格式是utf-8,避免出现乱码
   res.writeHead(200,{'content-type':suffixMIME+';charset=utf-8'})
   //服务端向客户端返回的内容也是字符串
   res.end(conFile)
  }catch(e){
   res.writeHead(404,{'content-type':'text/plain;charset=utf-8'});
   res.end("request file is not found")
  }
  
  /*
   MIME类型:
   每一种资源文件都有自己的标识类型,例如:HTML文件的MIME
   类型是"text/html".css文件的MIME类型是"text/css"

   浏览器会按照代码的MIME类型进行渲染
  */
 }
 // try{
 //  var con = fs.readFileSync("."+pathname,"utf-8");
 //  res.end(con);
 // }catch(e){
 //  res.end("request file is not find")
 // }
 // if(pathname==="/index.html"){
 //  var con = fs.readFileSync("./index.html","utf-8");
 //  res.end(con);
 //  return;
 // }
 // if(pathname==="/index.css"){
 //  con = fs.readFileSync("./index.css","utf-8");
 //  res.end(con);
 //  return;
 // }
 // if(pathname==="/index.js"){
 //  con = fs.readFileSync("./index.js","utf-8");
 //  res.end(con);
 //  return;
 // }
})
//为当前的这个服务配置端口
server1.listen(80,function(){
 console.log("server is success,listening on 80");
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
javascript html5实现表单验证
Mar 01 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
js实现双色球效果
Aug 02 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 #Javascript
jQuery上传插件webupload使用方法
Aug 01 #jQuery
js实现鼠标拖拽多选功能示例
Aug 01 #Javascript
使用Node.js实现RESTful API的示例
Aug 01 #Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
js下拉菜单生成器dropMenu使用方法详解
Aug 01 #Javascript
简述jQuery Easyui一些用法
Aug 01 #jQuery
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
document.getElementById介绍
2011/09/13 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
使用python实现学生信息管理系统
2021/02/25 Python
自考生自我评价分享
2014/01/18 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
企业新年寄语
2014/04/04 职场文书
大学生毕业求职信
2014/06/12 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
社区好人好事材料
2014/12/26 职场文书
开学第一周值周总结
2015/07/16 职场文书
高中政治教学反思
2016/02/23 职场文书
详解Go语言中Get/Post请求测试
2022/06/01 Golang