详解js静态资源文件请求的处理
程序员文章站
2022-11-25 09:48:41
本文实例为大家分享了js静态资源文件请求的处理,供大家参考,具体内容如下
html文件
本文实例为大家分享了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"); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
Tomcat无法加载css和js等静态资源文件的解决思路
-
详解js静态资源文件请求的处理
-
Nginx + Tomcat实现请求动态数据和请求静态资源的分离详解
-
nginx 多个location转发任意请求或访问静态资源文件的实现
-
Tomcat无法加载css和js等静态资源文件的解决思路
-
Node.js利用js-xlsx处理Excel文件的方法详解
-
javascript实现动态导入js与css等静态资源文件的方法_javascript技巧
-
HTTP 异常 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理
-
详解js静态资源文件请求的处理
-
关于解决Java Web的Filter过滤器过滤掉css、js、jpg、png等静态资源请求