javascript - node不利用框架怎么实现对静态HTML、css、js的服务?
PHP中文网
PHP中文网 2017-04-10 16:54:48
[JavaScript讨论组]

初学nodeJS,在使用nodejs构建静态文件服务器的时候,遇到下面问题。
用户请求index.html时,我使用fs.readFile读取index.html并将data返回,代码如下:

function serverStatic(req,res){
    var filePath;
    if(req.url==="/"){
        filePath =  "index.html";
    } else{
        filePath = "./" + url.parse(req.url).pathname;
    }
           
         fs.exists(filePath,function(err){
             if(err){
                  send404(res);
             }else{
                 fs.readFile(filePath,function(err,data){
                     if(err){
                         res.end("

500

服务器内部错误!"); }else{ res.writeHead(200,{'content-type':'text/html'}); res.end(data.toString()); } });//fs.readfile } })//path.exists }//serverStatic

那么问题来了,如果我的HTML页面引用了外部的css或者js,那么这些外部文件不会被加载···
这个问题怎么解决?

尝试:
index源码:






    
    
        看看伸缩盒?
    
    

css:

body{background-color:red;}
 

app.js:

var http=require('http');
var fs=require('fs');
var url=require('url');
var path=require('path');
var PORT=9090;
//添加MIME类型
var MIME_TYPE = {
    "css": "text/css",
    "gif": "image/gif",
    "html": "text/html",
    "ico": "image/x-icon",
    "jpeg": "image/jpeg",
    "jpg": "image/jpeg",
    "js": "text/javascript",
    "json": "application/json",
    "pdf": "application/pdf",
    "png": "image/png",
    "svg": "image/svg+xml",
    "swf": "application/x-shockwave-flash",
    "tiff": "image/tiff",
    "txt": "text/plain",
    "wav": "audio/x-wav",
    "wma": "audio/x-ms-wma",
    "wmv": "video/x-ms-wmv",
    "xml": "text/xml"
};

var server = http.createServer(serverStatic);
function serverStatic(req,res){
    var filePath;
    if(req.url==="/"){
        filePath =  "index.html";
    } else{
        filePath = "./" + url.parse(req.url).pathname;
    }

    fs.exists(filePath,function(err){
        if(!err){
            send404(res);
        }else{
            var ext = path.extname(filePath);
            ext = ext?ext.slice(1) : 'unknown';
            var contentType = MIME_TYPE[ext] || "text/plain";
            fs.readFile(filePath,function(err,data){
                if(err){
                    res.end("

500

服务器内部错误!"); }else{ res.writeHead(200,{'content-type':contentType}); res.end(data.toString()); } });//fs.readfile } })//path.exists } server.listen(PORT); console.log("Server runing at port: " + PORT + "."); function send404(res){ res.end("

404

file not found

") }

chrome查看网络:

我的文件结构

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(2)
PHPz

那么问题来了,你的为请求的每个资源写读取文件处理

黄舟

问题已解决,link css的时候,不能忘了 rel="stylesheet"

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号