详解js静态资源文件请求的处理
时间:2019-03-30
本文章向大家介绍详解js静态资源文件请求的处理,主要包括详解js静态资源文件请求的处理使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring的BeanUtil的copyProperties方法 慎用!!
- (译)SDL编程入门(9)视口
- (译)SDL编程入门(7)纹理加载和渲染
- 三步带你开发一个短链接生成平台
- 绕安全狗的那些事
- single-spa 基础概念
- DVWA-对Command Injection(命令注入)的简单演示与分析
- 如何探测内网存活主机
- Java ServletContext详解
- Java web Cookie详解(持久化+原理详解+共享问题+设置中文+发送多个Cookie)
- 实战记录之SQL server报错手工注入
- 树莓派基础实验23:触摸开关传感器实验
- springmvc 文件下载 VS resteasy 文件上传下载
- Struts Scan工具的使用
- 树莓派基础实验24:超声波测距传感器实验